从网上搜到之前手机中判断App是否安装可以通过onblur事件+定时器来实现。
但现在要做这个功能时,按网上的说法已经不能实现了。因为现在浏览器中打开App,window不会触发onblur事件。
在尝试几次后发现,虽然window.onblur没有触发,但定时器仍然会停止,所以使用这个特点就尝试做了一个demo。
dome中包含2个页面,一个主页面,另一个用来打开App的页面:
主页面
<script type="text/javascript">
var log = function (msg) {
$('body').append('<div class="log">' + msg + '</div>');
}; var tmCheck; function testApp(){
var $ifr = $('<iframe id="ifr"></iframe>')
$ifr.attr('src', 'checkapp.html');
$('body').append($ifr); tmCheck = setTimeout(function(){
log('timeout, 未安装');
}, 3000);
} function checkApp(state){
if( state == true ){
clearTimeout(tmCheck);
return;
} else {
log('checkApp, 未安装');
}
}
</script>
<button onclick="testApp();">Test</button>
checkApp.html
<script type="text/javascript">
function getSearchParam(key){
var result = window.location.search.match(new RegExp("(?:\\?|&)" + key + "=([^&]*)"));
return result ? result[1] : '';
} var ticket = getSearchParam('_');
if( ticket != '' ){
if( Date.now() - ticket < 2500 ){
window.parent.checkApp(false);
}
} else {
setTimeout(function(){
var t = Date.now();
location.href = 'app打开协议://';
setTimeout(function(){
window.parent.checkApp(true);
location.href = 'checkapp.html?_=' + t;
}, 1500);
}, 100);
}
</script>