JS如何判断浏览器类型，如何模拟浏览器类型（模拟微信浏览器）

1、前言

　　在编写前端代码时，为了页面兼容性，咱们每每须要考虑不一样的浏览器类型

　　而这就须要在前端代码中进行识别和区分

　　接下来就来谈谈对浏览器类型的识别

 

2、正文

（一）、查看浏览器类型的核心代码

var u = navigator.userAgent;

在浏览器的控制台中输入navigator.userAgent便可查看当前浏览器的信息

以此，咱们能够经过navigator.userAgent来进行简单初步的浏览器信息查询

 

（二）、经过代码进行系统的浏览器识别

var browser = { ua: function () { var u = navigator.userAgent; var u2 = navigator.userAgent.toLowerCase(); var isChrome = u.match(/Chrome\/([\d.]+)/) || u.match(/CriOS\/([\d.]+)/); var isAndroid = u.match(/(Android);?[\s\/]+([\d.]+)?/); var iosVersion = function () { if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) { var v = (navigator.appVersion).match(/OS (\d+)_(\d+)_?(\d+)?/); return [parseInt(v[1], 10), parseInt(v[2], 10), parseInt(v[3] || 0, 10)]; } }(); var chromeVersion = function () { var chrome = (navigator.userAgent).match(/Chrome\/(\d+)\./); if (chrome) { return parseInt(chrome[1], 10); } }(); return { //移动终端浏览器版本信息
            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('Linux') > -1, //android终端或uc浏览器
            iPhone: u.indexOf('iPhone') > -1, //是否为iPhone或者QQHD浏览器
            iPad: u.indexOf('iPad') > -1, //是否iPad
            webApp: u.indexOf('Safari') == -1, //是否web应该程序，没有头部与底部
            weixin: u2.match(/MicroMessenger/i) == "micromessenger",//是否微信
            UC: u.indexOf('UCBrowser'), chrome: u.indexOf('Chrome') > -1, windowsPhone: u.indexOf('Windows Phone') > -1, samsung: u.indexOf('Samsung') > -1, QQ: u.match(/\sQQ/i) != null ? u.match(/\sQQ/i).toLowerCase() == "qq" : false, isChrome: isChrome, isAndroid: isAndroid, iosVersion: iosVersion, chromeVersion: chromeVersion }; }() }

下面来测试一下：

注意： QQ浏览器和QQAPP内置浏览器判断有问题，具体看本文http://www.javashuo.com/article/p-cbcbvavk-gd.html 

另外： u.match(/\sQQ/i).toLowerCase() == "qq" 有误，不能再match()后使用toLowerCase()，由于match()返回的是数组

 

（三）、在chrome上模拟其余的浏览器（以微信为例）

一、先了解安卓微信和Ios微信的userAgent（User agent：用户代理）

安卓微信UA： mozilla/5.0 (linux; u; android 4.1.2; zh-cn; mi-one plus build/jzo54k) applewebkit/534.30 (khtml, like gecko) version/4.0 mobile safari/534.30 micromessenger/5.0.1.352  

Ios微信UA：  mozilla/5.0 (iphone; cpu iphone os 5_1_1 like mac os x) applewebkit/534.46 (khtml, like gecko) mobile/9b206 micromessenger/5.0 

 

 二、打开chrome的调试工具，点击右上角的菜单按钮——More Tools——Network condition打开Network condition窗口（会显示在下方的控制台（console）旁边）

 

三、 User agent选项，勾掉Select automatically，选择Custom（自定义），而后在下面的文本框中输入Android或者ios的用户代理（User Agent）就能够了

 

四、下面来测试一下

//判断是否在微信中
var u = navigator.userAgent.toLowerCase(); u.match(/Micromessenger/i) == "micromessager";

综上所述，便可完成对不一样浏览器类型的模拟，这种方式多用于微信。。。

 

 3、结语

。。。