在手機瀏覽器中判斷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>