iOS中使用瀏覽器打開APP的方法介紹

2020-02-19 15:55:11

字體：大中小

來源：轉載

供稿：網友

在iOS中需要調用一個應用程序來使用，iOS系統不能使用自己的瀏覽器，這與Android系統是不一樣的哦，Android可以做自己的內核，而iOS則不能，那么iOS中使用瀏覽器打開APP的方法介紹大家都清楚嗎？一起跟著武林技術頻道小編來了解一下吧！

在iOS中提供了兩種在瀏覽器中打開APP的方法：Smart App Banner和schema協議。

Smart App Banner

即通過一個meta 標簽，在標簽上帶上app的信息，和打開后的行為，例如：app-id之類的，代碼形如：

具體可以看下開發文檔：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中這樣寫：

打開我的app

當用戶點擊鏈接的時候就可以打開對應的app。

綁定click事件

但是實際中我們更多的情況是綁定事件，比如做個彈層啥的，不能一味的用a標簽啊，所以可以通過兩種方式來解決：location.href和iframe。

iframe的方式是開發中常用的，但是他也有一些問題：

1.我們沒很好的方式來判斷是否打開了app
2.會引起history變化
3.因為引起history變化，所以一些webview會有問題，比如：我查查，打開一個頁面，如果有iframe，選擇在safari中打開，實際打開的是iframe的頁面
4.如果頁面暴漏給了android系統，那么也會出現頁面打不開，之類的問題
5.如果沒有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中可以的。

結論：

1.使用iframe調用schema URL
2.使用定時器判斷在一段時間內是否調起成功
3.使用pageshow和pagehide來輔助定時器做更詳細的判斷
4.定時器中如果有alert可能不會被彈出，這一點很吃驚！后面的dom竟然5.執行了，但是alert沒彈出，可能跟alert的實現有關系吧
6.在實驗中我使用了兩個定時器，是因為切回瀏覽器之后，有時候timeout觸發要在pagehide和pageshow之前
7.計算timer實際執行時間差，也是不靠譜的

最后附上研究的代碼，算是比較靠譜的方法了，雖然還是有一定的失敗（第三方瀏覽器pagehide和pageshow不觸發）：

$(function(){

? var $info = $('#info');

? function info(msg){
??? var p = $('

'+msg+'

');
??? $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);
????????? }