糾結兩天(瀏覽器中喚起本地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...