问题：h5页面唤起App，有则打开，否则跳转下载地址，怎么处理

103 阅读 0 评论 68 点赞

我是靠谱客的博主高兴八宝粥，这篇文章主要介绍问题：h5页面唤起App，有则打开，否则跳转下载地址，怎么处理，现在分享给大家，希望可以做个参考。

遇到的问题：

公司的App产品，在运营推广上有一个需求。要求可以让用户在访问我们的推广网页时，可以判断出这个用户手机上是否安装了我们的App。如果安装了则可以直接在手机上打开，否则就前往下载。从而形成一个推广上的闭环。

浏览器和app没有通信协议，所以h5不知道用户的手机释放安装了app。因此只能是h5去尝试唤起app，若不能唤起，引导用户去下载我们的app。

微信里屏蔽了 schema 协议,如果在微信中打开h5，则会提示用户在浏览器中打开。

解决思路：

想通过iframe的方式试图打开APP，如若不行则用window.location的方法解决。

对于点击链接后，能否直接打开，可以通过下面的代码来实现。前提条件：你得知道你的APP对应的打开协议，如贴吧APP，协议为：com.baidu.tieba:// ，微信的：weixin:// ，等等。

复制代码

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
33
34
35

<!-- a标签点击打开的动作，在click事件中注册 -->
2 <a href="javascript:;" id="openApp">App客户端</a>
3 <script type="text/javascript">
//判断浏览器
var u = navigator.userAgent;
if(/MicroMessenger/gi.test(u) {
// 引导用户在浏览器中打开
alert('请在浏览器中打开');
return;
}
4
document.getElementById('openApp').onclick = function(e){
5
// 通过iframe的方式试图打开APP，如果能正常打开，会直接切换到APP，并自动阻止js其他行为
7
var ifr = document.createElement('iframe');
8
ifr.src = 'aaa://aaa.com?actNo=111';
//打开app的协议，由app同事提供
9
ifr.style.display = 'none';
10
document.body.appendChild(ifr);
11
window.setTimeout(function(){
12
document.body.removeChild(ifr);
13 　　　　　　　window.location.href = "http://www.aaa.com/app/id123";
//打开app下载地址，由app同事提供
14
},3000)
15
};
16 </script>

注：此方法有些浏览器不兼容iframe，可以window.location的方法解决。

复制代码

1
2
3
4
5
6
7
8
9
<a href="javascript:;" id="openApp">App客户端</a>
<script type="text/javascript">
document.getElementById('openApp').onclick = function(e){
window.location.href = "aaa://aaa.com?actNo=111";
window.setTimeout(function(){
window.location.href = "http://www.aaa.com/app/id123";//打开app下载地址，有app同事提供
},3000)
};
</script>