在iOS中提供了兩種在浏覽器中打開APP的方法:Smart App Banner和schema協議。
Smart App Banner
即通過一個meta 標簽,在標簽上帶上app的信息,和打開後的行為,例如:app-id之類的,代碼形如:
代碼如下 復制代碼<meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL">
具體可以看下開發文檔:https://developer.apple.com/library/ios/documentation/AppleApplications/Reference/SafariWebContent/PromotingAppswithAppBanners/PromotingAppswithAppBanners.html
今天Smart APP Banner不是我們的主角,我們說的是schema
使用schema URL來打開iOS APP
schema類似自定義url協議,我們可以通過自定義的協議來打開自己的應用,形如:
代碼如下 復制代碼myapplink://
# 例如 facebook的
fb://
# itunes的
itms-apps://
# 還有短信也是類似的
sms://
如果要打開一個app,最簡單的方式是通過一個鏈接,如我們在html中這樣寫:
代碼如下 復制代碼<a href="myapplink://">打開我的app</a>
當用戶點擊鏈接的時候就可以打開對應的app。
綁定click事件
但是實際中我們更多的情況是綁定事件,比如做個彈層啥的,不能一味的用a標簽啊,所以可以通過兩種方式來解決:location.href和iframe。
location.href,簡單,但是容易出現問題,比如沒有安裝可能會跳轉啦。
iframe,比較復雜,需要創建一個iframe,然後把schema扔給src
iframe的方式是開發中常用的,但是他也有一些問題:
我們沒很好的方式來判斷是否打開了app
會引起history變化
因為引起history變化,所以一些webview會有問題,比如:我查查,打開一個頁面,如果有iframe,選擇在safari中打開,實際打開的是iframe的頁面
如果頁面暴漏給了android系統,那麼也會出現頁面打不開,之類的問題
如果沒有app,調起不成功,ios的safari會自己彈出一個對話框:打不開網址之類的提示
所以現在的問題是:如何知道iframe已經打開了某個app,即解決iframe打開app回調
使用iframe在iOS系統中打開app
聰明的你可能想到了,iframe的onload事件啊,可是遺憾的說,無效!所以我們找到了定時器(setTimeout),通過一個定時器,如果在一段時間內(比如500ms),當點擊了按鈕(記錄time1),頁面沒有切走(調起app之後,頁面進程會被中斷),進程中斷,那麼計時器也會中斷,這時候應該不會觸發timer,如果調起失敗,那麼timer會就觸發,我們判斷下在一定時間內如果頁面沒有被切走,就認為調起失敗。
另外通過timer觸發時候的timer2,做差,判斷是否太離譜了(切走了之後的時間應該比timer實際定時的500ms要長):
代碼如下 復制代碼function openIos(url, callback) {
if (!url) {
return;
}
var node = document.createElement('iframe');
node.style.display = 'none';
var body = document.body;
var timer;
var clear = function(evt, isTimeout) {
(typeof callback==='function') && callback(isTimeout);
if (!node) {
return;
}
node.onload = null;
body.removeChild(node);
node = null;
};
var hide = function(e){
clearTimeout(timer);
clear(e, false);
};
node.onload = clear;
node.src = url;
body.appendChild(node);
var now = +new Date();
//如果事件失敗,則1秒設置為空
timer = setTimeout(function(){
var newTime = +new Date();
if(now-newTime>600){
//因為切走了,在切回來需要消耗時間
//所以timer即使執行了,但是兩者的時間差應該跟500ms有較大的出入
//但是實際並不是這樣的!
clear(null, false);
}else{
clear(null, true);
}
}, 500);
}
看上去方法很靠譜,但是現實總是那麼的殘酷!
不同的浏覽器app(包括webview),都有自己在後台的常駐時間,即:假如一個浏覽器他在被切走之後,後台常駐10s,那麼我們設置定時器5s過期就是徒勞的,而且5s的定時器,用戶要空等5s!交互也不讓你這樣干啊!
最後我們想到了pageshow和pagehide事件,即如果浏覽器被切走到了要打開的app,應該會觸發浏覽器的pagehide事件,而從app重新返回到浏覽器,就會觸發pageshow方法。
但是經過代碼測試發現,在uc、chrome中,不會觸發pagehide和pageshow的方法,而在safari中可以的。
結論:
使用iframe調用schema URL
使用定時器判斷在一段時間內是否調起成功
使用pageshow和pagehide來輔助定時器做更詳細的判斷
定時器中如果有alert可能不會被彈出,這一點很吃驚!後面的dom竟然執行了,但是alert沒彈出,可能跟alert的實現有關系吧
在實驗中我使用了兩個定時器,是因為切回浏覽器之後,有時候timeout觸發要在pagehide和pageshow之前
計算timer實際執行時間差,也是不靠譜的
<p><button id="btn">點我點我啊!alert,不會彈出</button></p>
<p><button id="btn2">點我點我啊!alert2,雖然有alert和info,info執行,但是alert不彈出</button></p>
<p><button id="btninfo">點我點我啊!info可以</button></p>
$(function(){
var $info = $('#info');
function info(msg){
var p = $('<p>'+msg+'</p>');
$info.append(p);
}
$('#btn').on('click', function(){
openIos('baiduboxapp://', function(t){
if(t){
alert('timeout or no baidu APP');
}else{
alert('invoke success');
}
});
});
$('#btn2').on('click', function(){
openIos('baiduboxapp://', function(t){
if(t){
info('timeout or no baidu APP2');
alert('timeout or no baidu APP2');
}else{
info('invoke success2');
alert('invoke success2');
}
});
});
$('#btninfo').on('click', function(){
openIos('baiduboxapp://', function(t){
if(t){
info('timeout or no baidu APP');
}else{
info('invoke success');
}
});
});
});
function openIos(url, callback) {
if (!url) {
return;
}
var node = document.createElement('iframe');
node.style.display = 'none';
var body = document.body;
var timer;
var clear = function(evt, isTimeout) {
(typeof callback==='function') && callback(isTimeout);
window.removeEventListener('pagehide', hide, true);
window.removeEventListener('pageshow', hide, true);
if (!node) {
return;
}
node.onload = null;
body.removeChild(node);
node = null;
};
var hide = function(e){
clearTimeout(timer);
clear(e, false);
};
window.addEventListener('pagehide', hide, true);
window.addEventListener('pageshow', hide, true);
node.onload = clear;
node.src = url;
body.appendChild(node);
var now = +new Date();
//如果事件失敗,則1秒設置為空
timer = setTimeout(function(){
timer = setTimeout(function(){
var newTime = +new Date();
if(now-newTime>1300){
clear(null, false);
}else{
clear(null, true);
}
}, 1200);
}, 60);
}