app内嵌h5页面：判断客户端

在web前端开发中，很多时候都需要和原生app开发人员来交互，或者有很多需要兼容的地方，甚至为了规避移动端各种无端报错，或者其中一端报错等等问题：

　　首先就是最常用遇到app开发中的安卓与iOS：

　　（1）安卓与iOS因为操作系统不同，从调用其中的方法就需要知道h5页面到底位于哪一端，下面就是判断操作系统来分辨两者：

var u = navigator.userAgent;

var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
    if(isAndroid){
               console.log("调用Android方法")
           window.android.function();
    }else if(isiOS){
               console.log("调用iOS方法")
               window.webkit.messageHandlers.***.function();
    }

　　

　　（2）判断是移动端浏览器打开还是PC端浏览器打开：

if(/(iPhone|iPad|iPod|iOS|Android)/i.test(navigator.userAgent)) {
//移动端打开
console.log("手机端打开执行")

} else {

//pc端打开
console.log("PC端打开执行")

}

　　（3）判断微信、qq、还是微博内部打开（微信内置浏览器与qq内置浏览器 与微博内置浏览器 ）：

function is_weixn_qq() {

    var ua = navigator.userAgent.toLowerCase();

    if(ua.match(ua.match(/MicroMessenger/i) == "micromessenger")) {
        // 下面是我在网上复制别人的代码，其中的展示引导图根据自己项目需求做就可以（下面三者都可）
        $('#weixin-tip').show();//微信引导图（点击右上角按钮选择浏览器打开）；

        return true;

    }

    if(ua.match(/QQ\/[0-9]/i)) {

        $('#weixin-tip').show();//qq引导图（点击右上角按钮选择浏览器打开）；

        return true;

    }

     if (ua.match(/WeiBo/i) == "weibo") {

         //在新浪微博客户端打开

         return true;

     }

    return false;

}

　　（4）日常功能的实现：进入页面时，根据不同情景后端会在当前页面url后面拼接参数，利用获取不同参数实现不同前端展示或逻辑：

获取当前url通用方法：

function getQueryString(name) {

    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");

    var r = window.location.search.substr(1).match(reg);

    if(r != null)

    return decodeURIComponent(r[2]);

    return null;

}

var a = getQueryString('a') ? getQueryString('a') : ''; //a为拼接的参数名

if(a == 1) {

    $('.myfooter').show();

    $('.box').css('padding-bottom', '1.4rem');

} else {

    $('.myfooter').hide();

    $('.box').css('padding-bottom', '0');

}

　　关于第四点，因为本人对于正则并不懂，所以就封装了一个获取url参数js：

var getUrlParams = function(){
       //因为对于内嵌页面来说，基本上传参都是拼接url，所以这里直接获取url，query的参数
       //获取url参数
       var query = window.location.search.substring(1);
       //每个参数键值对
       var vars = query.split("&");
       //创建一个对象来接收这些键值对
       var json = {}

       for (var i=0;i<vars.length;i++) {
               // 循环中，以“=”来截断键与值
               var pair = vars[i].split("=");
               // 赋值
               json[pair[0]] = pair[1]
       }
       //返回
       return json;
}

　　这样就清楚多了，根据自己的喜好来。

　　　参考链接：https://www.jianshu.com/p/6a43508957d2

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　字太难看，不想动笔，此章为印，加深记忆，往后若遇，来此考古。