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

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

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

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

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

　　

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

 1 if(/(iPhone|iPad|iPod|iOS|Android)/i.test(navigator.userAgent)) {
 2 //移动端打开
 3 console.log("手机端打开执行")
 4 
 5 } else {
 6 
 7 //pc端打开
 8 console.log("PC端打开执行")
 9 
10 }

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

 1 function is_weixn_qq() {
 2 
 3     var ua = navigator.userAgent.toLowerCase();
 4 
 5     if(ua.match(ua.match(/MicroMessenger/i) == "micromessenger")) {
 6         // 下面是我在网上复制别人的代码，其中的展示引导图根据自己项目需求做就可以（下面三者都可）
 7         $('#weixin-tip').show();//微信引导图（点击右上角按钮选择浏览器打开）；
 8 
 9         return true;
10 
11     }
12 
13     if(ua.match(/QQ\/[0-9]/i)) {
14 
15         $('#weixin-tip').show();//qq引导图（点击右上角按钮选择浏览器打开）；
16 
17         return true;
18 
19     }
20 
21      if (ua.match(/WeiBo/i) == "weibo") {
22 
23          //在新浪微博客户端打开
24 
25          return true;
26 
27      }
28 
29     return false;
30 
31 }

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

 1 获取当前url通用方法：
 2 
 3 function getQueryString(name) {
 4 
 5     var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
 6 
 7     var r = window.location.search.substr(1).match(reg);
 8 
 9     if(r != null)
10 
11     return decodeURIComponent(r[2]);
12 
13     return null;
14 
15 }
16 
17 var a = getQueryString('a') ? getQueryString('a') : ''; //a为拼接的参数名
18 
19 if(a == 1) {
20 
21     $('.myfooter').show();
22 
23     $('.box').css('padding-bottom', '1.4rem');
24 
25 } else {
26 
27     $('.myfooter').hide();
28 
29     $('.box').css('padding-bottom', '0');
30 
31 }

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

 1 var getUrlParams = function(){
 2        //因为对于内嵌页面来说，基本上传参都是拼接url，所以这里直接获取url，query的参数
 3        //获取url参数
 4        var query = window.location.search.substring(1);
 5        //每个参数键值对
 6        var vars = query.split("&");
 7        //创建一个对象来接收这些键值对
 8        var json = {}
 9 
10        for (var i=0;i<vars.length;i++) {
11                // 循环中，以“=”来截断键与值
12                var pair = vars[i].split("=");
13                // 赋值
14                json[pair[0]] = pair[1]
15        }
16        //返回
17        return json;
18 }

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

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

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