移动端判断用户是否安装客户端

由于看到不少人在问关于页面怎么查询用户安装了什么软件，而且调用它，我有可能说的也不是很正确，但愿读者多多指教。

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

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上调开百度贴吧了。