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、結語

。。。