【js】手機瀏覽器端喚起app，沒有app就去下載app 的方法

這種功能的做用：

1.通常公司有本身的app，而app是須要不斷有新用戶涌入才能持續運營，達到不錯的收入。就須要使用這種方式進行引入新的用戶。

2.一些內容在網頁端體驗很差，或者一些功能須要app內才能實現，就須要將用戶引入app中。打開app並自動跳到相應頁面。

 

首先，這個方法僅適用於移動端h5頁面，通常的智能機都是可使用的。這裏使用的是es5的代碼模式，容易理解。

知道了需求，咱們看看如何實現：

1.首先要經過UA判斷當前瀏覽器UA 並轉大寫。用來分別針對安卓和ios機型作2種不同的處理。

var UA=navigator.userAgent.toUpperCase();

2.根據UA判斷的安卓仍是ios機型，分別作處理。

安卓設備：

經過隱藏iframe方式實現。iframe中請求協議啓動地址，建立iframe須要時間，延遲一點時間，將iframe加入dom，產生請求。

若是app已安裝，瀏覽器就會彈出一個提示框，問用戶是否啓動app。

若是未安裝，瀏覽器等待一秒後就會去下載。

之因此使用iframe，爲了防止location跳轉後，js請求中斷，跳入空白頁。

代碼中的Data.now()-t < 1200，只因此是1200，其實也是一個估計值，爲了大部分解決一些已經安裝的app，1秒後仍是會跳轉下載。由於打開app的瞬間，瀏覽器可能會卡一下js的執行致使延遲時間變長。超出1200ms就能夠不用去下載了。

//若是是安卓瀏覽器(自帶瀏覽器、UA瀏覽器、QQ瀏覽器等)
if(UA.indexOf("ANDROID")!=-1){
    //建立iframe
    var ifr=document.createElement("iframe");
    //iframe設置爲app的協議打開方式地址
    ifr.src="cmread://cmread.com/client?url=wap.cmread.com/rbc/402310056/index.htm";//安卓協議啓動地址
    ifr.style.display="none";//隱藏
    var t=Date.now();//取當前時間戳
    //延遲執行iframe 實現訪問app協議打開app
    setTimeout(function(){
        document.body.appendChild(ifr);
    },96);
    //延遲執行 若是1s沒響應，就表示你手機中沒有該app。就能夠去下載了
    setTimeout(function(){
        if(Date.now() - t < 1200){
            document.body.appendChild(ifr);
            location.href="http://wap.cmread.com/r/p/pg/212/CMREADBC_Android/CMREADBC_Android.apk";//安卓下載地址
        }
    },1001);
}

IOS設備：

首先，ios瀏覽器已經不支持再使用iframe了，因此上面的方式不適合用在ios上。

所以，這裏只能採用location的方式。

若是安裝了app，ios瀏覽器打開app協議前就會彈出個框，提示是否打開。

若是沒有安裝，就不會彈出這個提示。

//若是是ios瀏覽器(safari、UA瀏覽器、QQ瀏覽器等)
else if(UA.indexOf("IOS")!=-1 || UA.indexOf("IPHONE")!=-1){
    var t=Date.now();//取當前時間戳
    //延遲直接跳轉喚起app協議地址
    setTimeout(function(){
        location.href='cmread://cmread.com/clientjson={"activity":{"url":"http://wap.cmread.com/rbc/402310056/index.htm"}}&contentId=1004';//ios協議啓動地址
    },96);
    //延遲執行 若是1s沒響應，就表示你手機中沒有該app。就能夠去下載了
    setTimeout(function(){
        if(Date.now() - t < 1200){
            location.href="https://itunes.apple.com/cn/app/he-yue-du/id863837323?mt=8&uo=4&at=10lM6r";//ios下載地址
        }
    },1001);
}