首页 » 前端 » 正文

在移动端页面打开本地app

| 前端 | | 1 条评论 | 1752 views

现在移动端页面和公司APP通常都是相关连的，比如这个是你app分享出来的页面，那么我就想点击页面的下载，如果我已经在手机上安装了app，那就直接打开app。

想必大家在平时使用一些分享页的时候经常有用到这样的功能，那么在页面上是怎么做的？其实很简单，就是打开一个链接。

当然了，这个链接是有要求的，首先它是客户端定义好的链接，这样的链接在手机上就是一个指针一样。那么你要做的就是在页面上判断一下，这个链接是否有效就行，无效的情况下就打开下载地址，有效就可以直接跳转，那么问题来了：怎么判断有效或者无效？

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>Js Open App Demo</title>
    <script type="text/javascript">
        var timeout;
        function startApp(){
            var ifr = document.createElement('iframe');
            ifr.src = 'scheme://host'; // shoule configure at AndroidManifest.xml
            ifr.style.display = 'none';
            timeout = setTimeout(function(){
                location.href = 'http://www.google.com'; //
            }, 800);
            
            document.addEventListener("webkitvisibilitychange", clean);
            document.addEventListener("visibilitychange", clean);
            window.addEventListener("pagehide",  clean),
            
            document.body.appendChild(ifr);
        
        }
        
        function clean() {
            clearTimeout(timeout);
        }
    </script>
</head>
<body>
<a href="javascript:;" onclick="startApp()">Start App</a><br/>
</body>
</html>

整体来看呢，做法就是添加一个iframe，让iframe打开链接，如果可以打开，说明可以跳转，打不开，说明没有按照，那就直接下载了。中间做了页面变化监听，我也很少用，看到这样的方法还是挺有意思的。

来源：https://github.com/zjbpku/Js-Launch-App/blob/master/Js-Launch-App.html

本文共 1 个回复

发表评论