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

从网上搜到之前手机中判断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>