有个公司需求是在前端页面，点击按钮能成功跳到公司的APP。跟原生同事联调时候，记得让他们把URL scheme://告诉你。下面的脚本是通过jquery方式去判断当前手机是android还是ios，展示对应的跳转按钮；然后监听按钮的点击事件，通过iframe的方式试图打开APP，如果能正常打开，会直接切换到APP，并自动阻止a标签的默认行为。否则会alert提示用户下载。
脚本部分：
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
| <body>
<div id="btn">
<a href="安卓配置" class="a-btn" style="display: none">安卓</a>
<a href="苹果URL scheme://" class="i-btn" style="display: none">苹果</a>
</div>
</body>
<script src="http://m-cdn.saclub.com.cn/app/2.4/js/jquery-1.11.3.min.js"></script>
<script type="text/javascript">
var ua = navigator.userAgent.toLowerCase();
var isWeixin = ua.indexOf('micromessenger') != -1;
var isAndroid = ua.indexOf('android') != -1;
var isIos = (ua.indexOf('iphone') != -1) || (ua.indexOf('ipad') != -1);
var d = new Date(); var t0 = d.getTime();
$(function(){ if(isAndroid){ $(".a-btn").show(); }else{ $(".i-btn").show(); } });
$(".a-btn").click(function(){ openApp("安卓下载链接"); }); $(".i-btn").click(function(){ openApp("IOS App Store下载链接"); });
function openApp(src) {
var delay = setInterval(function(){
var d = new Date(); var t1 = d.getTime();
if( t1-t0<3000 && t1-t0>2000){ alert('请下载APP'); window.location.href =src; }
if(t1-t0>=3000){ clearInterval(delay); }
},2000); }
</script>
|