欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

iOS中使用schema協(xié)議調(diào)用APP和使用iframe打開APP的例子

 更新時間:2014年08月28日 08:48:54   投稿:junjie  
這篇文章主要介紹了iOS中使用schema協(xié)議調(diào)用APP和使用iframe打開APP的例子,用在瀏覽器中打開APP,需要的朋友可以參考下

在iOS中,需要調(diào)起一個app可以使用schema協(xié)議,這是iOS原生支持的,并且因?yàn)閕OS系統(tǒng)中都不能使用自己的瀏覽器內(nèi)核,所以所有的瀏覽器都支持,這跟android生態(tài)不一樣,android是可以自己搞內(nèi)核的,但是iOS不行。

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

Smart App Banner

即通過一個meta 標(biāo)簽,在標(biāo)簽上帶上app的信息,和打開后的行為,例如:app-id之類的,代碼形如:

復(fù)制代碼 代碼如下:
<meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL">

具體可以看下開發(fā)文檔:https://developer.apple.com/library/ios/documentation/AppleApplications/Reference/SafariWebContent/PromotingAppswithAppBanners/PromotingAppswithAppBanners.html
今天Smart APP Banner不是我們的主角,我們說的是schema

使用schema URL來打開iOS APP

schema類似自定義url協(xié)議,我們可以通過自定義的協(xié)議來打開自己的應(yīng)用,形如:

復(fù)制代碼 代碼如下:

myapplink://
# 例如 facebook的
fb://
# itunes的
itms-apps://
# 還有短信也是類似的
sms://

如果要打開一個app,最簡單的方式是通過一個鏈接,如我們在html中這樣寫:
復(fù)制代碼 代碼如下:

<a href="myapplink://">打開我的app</a>

當(dāng)用戶點(diǎn)擊鏈接的時候就可以打開對應(yīng)的app。

綁定click事件

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

iframe的方式是開發(fā)中常用的,但是他也有一些問題:

1.我們沒很好的方式來判斷是否打開了app
2.會引起history變化
3.因?yàn)橐餳istory變化,所以一些webview會有問題,比如:我查查,打開一個頁面,如果有iframe,選擇在safari中打開,實(shí)際打開的是iframe的頁面
4.如果頁面暴漏給了android系統(tǒng),那么也會出現(xiàn)頁面打不開,之類的問題
5.如果沒有app,調(diào)起不成功,ios的safari會自己彈出一個對話框:打不開網(wǎng)址之類的提示

所以現(xiàn)在的問題是:如何知道iframe已經(jīng)打開了某個app,即解決iframe打開app回調(diào)。

使用iframe在iOS系統(tǒng)中打開app

聰明的你可能想到了,iframe的onload事件啊,可是遺憾的說,無效!所以我們找到了定時器(setTimeout),通過一個定時器,如果在一段時間內(nèi)(比如500ms),當(dāng)點(diǎn)擊了按鈕(記錄time1),頁面沒有切走(調(diào)起app之后,頁面進(jìn)程會被中斷),進(jìn)程中斷,那么計(jì)時器也會中斷,這時候應(yīng)該不會觸發(fā)timer,如果調(diào)起失敗,那么timer會就觸發(fā),我們判斷下在一定時間內(nèi)如果頁面沒有被切走,就認(rèn)為調(diào)起失敗。

另外通過timer觸發(fā)時候的timer2,做差,判斷是否太離譜了(切走了之后的時間應(yīng)該比timer實(shí)際定時的500ms要長):

復(fù)制代碼 代碼如下:

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秒設(shè)置為空
    timer = setTimeout(function(){
        var newTime = +new Date();
          if(now-newTime>600){
            //因?yàn)榍凶吡?,在切回來需要消耗時間
            //所以timer即使執(zhí)行了,但是兩者的時間差應(yīng)該跟500ms有較大的出入
            //但是實(shí)際并不是這樣的!
            clear(null, false);
          }else{
            clear(null, true);
          }
    }, 500);
}

看上去方法很靠譜,但是現(xiàn)實(shí)總是那么的殘酷!

不同的瀏覽器app(包括webview),都有自己在后臺的常駐時間,即:假如一個瀏覽器他在被切走之后,后臺常駐10s,那么我們設(shè)置定時器5s過期就是徒勞的,而且5s的定時器,用戶要空等5s!交互也不讓你這樣干??!

最后我們想到了pageshow和pagehide事件,即如果瀏覽器被切走到了要打開的app,應(yīng)該會觸發(fā)瀏覽器的pagehide事件,而從app重新返回到瀏覽器,就會觸發(fā)pageshow方法。

但是經(jīng)過代碼測試發(fā)現(xiàn),在uc、chrome中,不會觸發(fā)pagehide和pageshow的方法,而在safari中可以的。

結(jié)論:

1.使用iframe調(diào)用schema URL
2.使用定時器判斷在一段時間內(nèi)是否調(diào)起成功
3.使用pageshow和pagehide來輔助定時器做更詳細(xì)的判斷
4.定時器中如果有alert可能不會被彈出,這一點(diǎn)很吃驚!后面的dom竟然5.執(zhí)行了,但是alert沒彈出,可能跟alert的實(shí)現(xiàn)有關(guān)系吧
6.在實(shí)驗(yàn)中我使用了兩個定時器,是因?yàn)榍谢貫g覽器之后,有時候timeout觸發(fā)要在pagehide和pageshow之前
7.計(jì)算timer實(shí)際執(zhí)行時間差,也是不靠譜的

最后附上研究的代碼,算是比較靠譜的方法了,雖然還是有一定的失?。ǖ谌綖g覽器pagehide和pageshow不觸發(fā)):

復(fù)制代碼 代碼如下:

<p><button id="btn">點(diǎn)我點(diǎn)我??!alert,不會彈出</button></p>
<p><button id="btn2">點(diǎn)我點(diǎn)我??!alert2,雖然有alert和info,info執(zhí)行,但是alert不彈出</button></p>
<p><button id="btninfo">點(diǎn)我點(diǎn)我??!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秒設(shè)置為空
    timer = setTimeout(function(){
        timer = setTimeout(function(){
          var newTime = +new Date();
          if(now-newTime>1300){
            clear(null, false);
          }else{
            clear(null, true);
          }

        }, 1200);
    }, 60);
}

相關(guān)文章

  • iOS開發(fā)中的幾個手勢操作實(shí)例分享

    iOS開發(fā)中的幾個手勢操作實(shí)例分享

    這篇文章主要介紹了iOS開發(fā)中的幾個手勢操作實(shí)例分享,編寫代碼為傳統(tǒng)的Objective-C,需要的朋友可以參考下
    2015-09-09
  • 3分鐘實(shí)現(xiàn)iOS語言本地化/國際化(圖文教程)

    3分鐘實(shí)現(xiàn)iOS語言本地化/國際化(圖文教程)

    這篇文章主要介紹了3分鐘實(shí)現(xiàn)iOS語言本地化/國際化,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2020-02-02
  • iOS開發(fā)中一些手寫控件及其相關(guān)屬性的使用

    iOS開發(fā)中一些手寫控件及其相關(guān)屬性的使用

    這篇文章主要介紹了iOS開發(fā)中一些手寫控件及其相關(guān)屬性的使用,代碼基于傳統(tǒng)的Objective-C,需要的朋友可以參考下
    2015-12-12
  • iOS 彈幕功能的實(shí)現(xiàn)思路圖解

    iOS 彈幕功能的實(shí)現(xiàn)思路圖解

    這篇文章主要介紹了iOS 彈幕功能的實(shí)現(xiàn)思路圖文詳解,本文給大家介紹的非常詳細(xì),具有一定的參考借鑒價值,需要的朋友可以參考下
    2019-07-07
  • 淺析IOS開發(fā)TouchID指紋解鎖功能

    淺析IOS開發(fā)TouchID指紋解鎖功能

    TouchID指紋解鎖功能現(xiàn)在在app中已經(jīng)很常見,其實(shí)這個功能實(shí)現(xiàn)起來是很簡單的,因?yàn)樘O果都已經(jīng)幫我們封裝好了,只需要實(shí)現(xiàn)幾個方法就可以了。下面來一起看看。
    2016-09-09
  • iOS開發(fā)檢測是否開啟定位、是否允許消息推送等權(quán)限的實(shí)例

    iOS開發(fā)檢測是否開啟定位、是否允許消息推送等權(quán)限的實(shí)例

    下面小編就為大家分享一篇iOS開發(fā)檢測是否開啟定位、是否允許消息推送等權(quán)限的實(shí)例,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-01-01
  • iOS利用UIBezierPath + CAAnimation實(shí)現(xiàn)路徑動畫效果

    iOS利用UIBezierPath + CAAnimation實(shí)現(xiàn)路徑動畫效果

    在iOS開發(fā)中,制作動畫效果是最讓開發(fā)者享受的環(huán)節(jié)之一,這篇文章主要給大家介紹了關(guān)于iOS利用UIBezierPath + CAAnimation實(shí)現(xiàn)路徑動畫效果的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考借鑒,下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。
    2017-10-10
  • iOS開發(fā)支付寶支付成功返回字符串的處理操作

    iOS開發(fā)支付寶支付成功返回字符串的處理操作

    很多朋友在做ios開發(fā)項(xiàng)目時,遇到支付寶支付成功返回字符串的處理操作不知道該怎么辦,今天小編給大家分享實(shí)例代碼,需要的朋友參考下
    2017-02-02
  • iOS中Runtime的幾種基本用法記錄

    iOS中Runtime的幾種基本用法記錄

    RunTime顧名思義運(yùn)行時,就是系統(tǒng)在運(yùn)行的時候的一些機(jī)制,最主要的是消息機(jī)制。下面這篇文章主要給大家介紹了關(guān)于iOS中Runtime的幾種基本用法,文中通過示例代碼介紹的非常詳細(xì),需要的朋友下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2018-07-07
  • iOS讀寫json文件的方法示例

    iOS讀寫json文件的方法示例

    這篇文章主要給大家介紹了關(guān)于iOS讀寫json文件的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2019-01-01

最新評論