Ios/Android h5 喚起本地APP

糾結兩天（瀏覽器中喚起本地APP），一直找不到解決方案，今天總算基本搞定。

ps：吐槽一下 魔窗那篇文章，爲何就不直接把js代碼開源開源，混淆後的代碼看得我好惱火

參考文章：魔窗解決方案、京東解決方案

首先是判斷瀏覽器

// 判斷瀏覽器
var Navigator = navigator.userAgent;
var ifChrome = Navigator.match(/Chrome/i) != null && Navigator.match(/Version\/\d+\.\d+(\.\d+)?\sChrome\//i) == null ? true : false;
var ifAndroid = (Navigator.match(/(Android);?[\s\/]+([\d.]+)?/)) ? true : false;
var ifiPad = (Navigator.match(/(iPad).*OS\s([\d_]+)/)) ? true : false;
var ifiPhone = (!ifiPad && Navigator.match(/(iPhone\sOS)\s([\d_]+)/)) ? true : false;
var ifIos = Navigator.match(/iPhone|iPad|iPd/i) ? true : false;
var ifSafari = ifIos && Navigator.match(/Safari/);
// ios 設備的版本號
var iosVersion = Navigator.match(/OS\s*(\d+)/)
iosVersion = iosVersion ? (iosVersion[1] || 0) : 0;
// 安卓版本號
var androidVersion = Navigator.match(/Android\s*(\d+)/)
androidVersion = androidVersion ? (androidVersion[1] || 0) : 0;

android5 及以上的高版本

// 延後50毫秒
setTimeout(function() {
    location.href = ‘自定義 URL’
}, 50)

ios9 及以上的版本

setTimeout(function() {  // 必需要使用settimeout
    var a = document.createElement("a"); //建立a元素
    a.setAttribute("href", ‘自定義 URL’), a.style.display = "none", document.body.appendChild(a);
    var t = document.createEvent("HTMLEvents"); // 返回新建立的 Event 對象，具備指定的類型。
    t.initEvent("click", !1, !1) // 初始化新事件對象的屬性
    a.dispatchEvent(t)  // 綁定事件
}, 0)

全部狀況都用 iframe

document.querySelector("#" + iframe).src = ‘自定義 URL’ // 將iframe增長src

計算時差的方案打開APP

var checkOpen = function (cb){
    var _clickTime = +(new Date());
    function check(elsTime) {
        if ( elsTime > 3000 || document.hidden || document.webkitHidden) {
            cb(1);
        } else {
            cb(0);
        }
    }
    //啓動間隔20ms運行的定時器，並檢測累計消耗時間是否超過3000ms，超過則結束
    var _count = 0, intHandle;
    intHandle = setInterval(function(){
        _count++;
        var elsTime = +(new Date()) - _clickTime;
        if (_count>=100 || elsTime > 3000 ) {
            clearInterval(intHandle);
            check(elsTime);
        }
    }, 20);
}
checkOpen(function(opened){
    // APP沒有打開成功  而且開啓自動跳轉到下載頁
    if(opened === 0 && option.autoRedirectToDownloadUrl){
        location.href = downloadUrl;
    }
});

注意

ios9 以上的 Universal Link 設置自行百度下（這個須要問問ios開發人員） 這裏還有個我本身發現的 bug
在Android裏面的qq裏面打開
若是打開APP的同時立馬返回到QQ裏面，應用寶的下載頁立馬又從新打開APP。ios裏面也有個狀況，打開APP的同時立馬用左上角的返回再次點擊打開APP按鈕則
Universal Link 失效，跳轉到配置好的 Universal Link 連接，你們有知道的解答哈，共同成長
若是ios9 裏面沒有安裝APP 則直接就挑轉到 Universal Link 連接 ，這應該是個bug，我想的是，若是沒有安裝APP 則跳轉到應用寶，這個不知道怎麼實現

測試的配置全部用的 獲得 的APP連接，爲了方便

GitHub上面有個示例：https://github.com/lmxdawn/te...