移動端判斷用戶是否安裝客戶端

由於看到不少人在問關於頁面怎麼查詢用戶安裝了什麼軟件，而且調用它，我有可能說的也不是很正確，但願讀者多多指教。

以下是我本身在項目中的解決方案和思路。

ios沒法用這段判斷，至於緣由，尚未查明，安卓能夠用。（查找到一種解決ios沒法調開客戶端的方案，可是有點治標不治本，但願大牛能夠指導一下。我已經在最下面追加上了。）

標註：感謝王鐵手童靴幫忙指出問題。

雙方協議

這個須要提早跟客戶端開發人員商定協議名稱，用URI Scheme做爲頁面與客戶端的通信協議（這個很重要）。這裏的URI Scheme前綴不是通常的http://，而是由客戶端開發者定義的，通常在寫程序的時候就會設置的了。而後剩下的部分就像普通的 URL 地址同樣，須要你們來約定 URI Scheme 具體如何，例如參數是什麼等等。

比如微信客戶端的是以 weixin:// 爲前綴：<a href="weixin://">打開微信客戶端</a>。用手機瀏覽器，就能夠打開微信客戶端，前提是你須要安裝微信客戶端。

如今已經能夠調用到客戶端了，可是我們好像拉了一個問題，若是用戶沒有須要調開的客戶端怎麼辦，總不能讓用戶傻傻的在當前頁面等待，那麼我們就須要作一個判斷，來判斷用戶是否有此軟件。

判斷客戶端

如今大致的思路有了，我們如今須要明確的是，怎麼作到判斷是否有軟件而且怎麼下載。

這裏我是經過一個隱藏的iframe作到的。由於iframe既能夠判斷用戶是否安裝客戶端，也能夠停留在當前頁面。
具體代碼以下：

document.getElementById('openApp').onclick = function(e) {
        // 經過iframe的方式試圖打開APP，若是能正常打開，會直接切換到APP，並自動阻止a標籤的默認行爲
        // 不然打開a標籤的href連接
        var ifrSrc = 'weixin://';
        if (!ifrSrc) {
            return;
        }
        var ifr = document.createElement('iframe');
        ifr.src = ifrSrc;
        ifr.style.display = 'none';
        document.body.appendChild(ifr);
        setTimeout(function() {
            document.body.removeChild(ifr);
        }, 1000);

    };
    if (document.all) {
        document.getElementById('openApp').click();
    }
    // 其它瀏覽器
    else {
        var e = document.createEvent("MouseEvents");
        e.initEvent("click", true, true);
        document.getElementById("openApp").dispatchEvent(e);
    }

如今就大功告成啦！~

不對還有一個問題，若是是在微信端打開的頁面怎麼辦呢？微信禁止除應用寶之外的下載連接，若是是這樣的話我們還須要一個引導圖，來引導用戶怎麼在微信端打開瀏覽器，而且針對這個問題又延伸出另一個問題，就是安卓版和蘋果版界面不同，真坑，這樣又要區分系統，好吧，接着搞。

區分手機系統

獲取瀏覽器的報文，查看navigator.userAgent裏面的參數。比較詳細的判斷以下：（這個是我在網上查找的，你們以爲少能夠補充）

原文連接：http://caibaojian.com/browser-ios-or-android.html
trident: u.indexOf('Trident') > -1, //IE內核 
presto: u.indexOf('Presto') > -1, //opera內核 
webKit: u.indexOf('AppleWebKit') > -1, //蘋果、谷歌內核 
gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1,//火狐內核 
mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否爲移動終端 
ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios終端 
android: u.indexOf('Android') > -1 || u.indexOf('Adr') > -1, //android終端 
iPhone: u.indexOf('iPhone') > -1 , //是否爲iPhone或者QQHD瀏覽器 
iPad: u.indexOf('iPad') > -1, //是否iPad 
webApp: u.indexOf('Safari') == -1, //是否web應該程序，沒有頭部與底部 
weixin: u.indexOf('MicroMessenger') > -1, //是否微信 （2015-01-22新增） 
qq: u.match(/\sQQ/i) == " qq" //是否QQ

以下是我本身的判斷：

var pattern = new RegExp(/iPad|iPod|iPhone/i);
var iosUserAgent = pattern.test(navigator.userAgent);
if(iosUserAgent){
    var ua = navigator.userAgent.toLowerCase();
    if(ua.match(/MicroMessenger/i)=="micromessenger"){
        //你用的是IOS的微信客戶端
    }else{
        //你用的是IOS客戶端
    }
}else if(navigator.userAgent.match(/Android/i)) {
    var ua = navigator.userAgent.toLowerCase();
    if(ua.match(/MicroMessenger/i)=="micromessenger"){
        //你用的是安卓的微信客戶端
    }else{    
        //你用的是安卓客戶端
    }
}
else {
    //其餘、widows phone、pc等之外的任何系統，我比較喜歡簡單粗暴。
}

這個判斷也搞定了，如今須要的就是把代碼整合在一塊兒。

代碼整合

<script>
$(document).ready(function(){
    var pattern = new RegExp(/iPad|iPod|iPhone/i);
    var iosUserAgent = pattern.test(navigator.userAgent);
    if(iosUserAgent){
        var ua = navigator.userAgent.toLowerCase();
        if(ua.match(/MicroMessenger/i)=="micromessenger"){
            //你用的是IOS的微信客戶端
            $("#ioshfImg").css("display","block");
        }else{
            //調開客戶端方法封裝
            openAapp();
        }
    }else if(navigator.userAgent.match(/Android/i)) {
        var ua = navigator.userAgent.toLowerCase();
        if(ua.match(/MicroMessenger/i)=="micromessenger"){
            //你用的是安卓的微信客戶端
            $("#andhfImg").css("display","block");
        }else{
            //調開客戶端方法封裝
            openAapp();
        }
    }
    else {
        //document.location.href = "http://m.30mifi.com/apk/llm.apk";    
    }
    function openAapp(){
        document.getElementById('openApp').onclick = function(e) {
            // 經過iframe的方式試圖打開APP，若是能正常打開，會直接切換到APP，並自動阻止a標籤的默認行爲
            // 不然打開a標籤的href連接
            var ifrSrc = 'weixin://';
            var ifr = document.createElement('iframe');
            ifr.src = ifrSrc;
            ifr.style.display = 'none';
            document.body.appendChild(ifr);
            setTimeout(function() {
                document.body.removeChild(ifr);
            }, 1000);

        };
        if (document.all) {
            document.getElementById('openApp').click();
        }
        // 其它瀏覽器
        else {
            var e = document.createEvent("MouseEvents");
            e.initEvent("click", true, true);
            document.getElementById("openApp").dispatchEvent(e);
        }
    }
});
</script>

總結

忘了補充一點，也能夠作一個判斷，判斷當前頁是否在客戶端調開，navigator.userAgent.toLowerCase()判斷裏面是否有跟客戶端開發人員擬定的協議和參數。

個人代碼以下：

// 判斷是否是客戶端  
// weixin只是作一個表明，本身開發的時候，須要把它變成你和客戶端開發人員擬定的參數。
function isClient() {
    var isClient = false;
    var ua = navigator.userAgent.toLowerCase();
    if ((ua.indexOf('weixin')) != -1) {
        isClient = true;
    }
    return isClient;
}

最後，但願讀者指教，我本身說的也不見得全對，有可能有更加優化的方案，思惟的碰撞才能讓技術提成。

追加

針對ios不起做用我進行了以下修改。
我修改了html中a標籤的連接，從原來的空連接直接修改成客戶端在AppStore中的連接地址。
拿百度貼吧舉例：https://itunes.apple.com/cn/a...

<a href="https://itunes.apple.com/cn/app/id477927812" id="openApp" style="display: none"></a>

原來的方法不改變，這樣就能夠在ios上調開百度貼吧了。