挪动端推断用户是不是装置客户端

由于看到许多人在问关于页面怎样查询用户装置了什么软件,而且调用它,我有能够说的也不是很准确,愿望读者多多指教。

以下是我本身在项目中的处理计划和思绪。

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

    原文作者:丶小猴子偷桃子
    原文地址: https://segmentfault.com/a/1190000006758319
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞