在手机浏览器中判断App是否已安装

从网上搜到之前手机中判断App是否安装可以通过onblur事件+定时器来实现。

但现在要做这个功能时，按网上的说法已经不能实现了。因为现在浏览器中打开App，window不会触发onblur事件。

在尝试几次后发现，虽然window.onblur没有触发，但定时器仍然会停止，所以使用这个特点就尝试做了一个demo。

dome中包含2个页面，一个主页面，另一个用来打开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

<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

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

<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>