浏览器嗅探
瀏覽器的嗅探主要基于Window對象的Navigator屬性對瀏覽器的類型、名稱、廠商以及運行環(huán)境等作出判斷，滿足不同生產(chǎn)環(huán)境的需求。
常見的微信瀏覽器環(huán)境的判斷：
<!DOCTYPE html> <html><head><meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0"></head><body><script type="text/javascript">var ua = navigator.userAgent.toLowerCase();var isWeixin = ua.indexOf('micromessenger') != -1;var isAndroid = ua.indexOf('android') != -1;var isIos = (ua.indexOf('iphone') != -1) || (ua.indexOf('ipad') != -1);if (!isWeixin) {document.head.innerHTML = '<title>抱歉，出錯了</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0"><link rel="stylesheet" type="text/css" href="https://res.wx.qq.com/open/libs/weui/0.4.1/weui.css">';document.body.innerHTML = '<div class="weui_msg"><div class="weui_icon_area"><i class="weui_icon_info weui_icon_msg"></i></div><div class="weui_text_area"><h4 class="weui_msg_title">請在微信客戶端打開鏈接</h4></div></div>';}</script></body> </html>以上代碼js部分基本可以直接截取出作為微信瀏覽器運行環(huán)境下的判斷，并提供了錯誤頁內(nèi)容。
值得一提的是，我在微信windows版本中測試其內(nèi)置瀏覽器識別結果是Chrome，并不是微信環(huán)境MicroMessageer。
Navigator對象
可以直接在瀏覽器命令行下使用window.navigator查看其包含的各種屬性內(nèi)容（取常用屬性解釋）：
- appName
返回瀏覽器的名稱。在IE中，就是“Microsoft Internet Explorer”;在FireFox以及其他瀏覽器中，就是“Netscape”。 - appVersion
返回瀏覽器的平臺和版本信息（通常以數(shù)字開始）。 - platform
返回運行瀏覽器的操作系統(tǒng)平臺。 - onLine
返回指明系統(tǒng)是否處于脫機模式的布爾值。 - userAgent！！！
返回由客戶機發(fā)送服務器的 user-agent 頭部的值。
userAgent 屬性是一個只讀的字符串，聲明了瀏覽器用于 HTTP 請求的用戶代理頭的值。
一般來講，它是在 navigator.appCodeName 的值之后加上斜線和 navigator.appVersion 的值構成的。
例如：Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.2; SV1; .NET CLR 1.1.4322)。
注：用戶代理頭：user-agent header。
總結的瀏覽器嗅探插件
;var _BROWSER = (function() {function detect() {// start browser detectvar nVer = navigator.appVersion,nAgt = navigator.userAgent,browser = navigator.appName,version = '' + parseFloat(navigator.appVersion),majorVersion, nameOffset, verOffset, ix, network = 'unknown';// Operaif ((verOffset = nAgt.indexOf('Opera')) != -1) {browser = 'Opera';version = nAgt.substring(verOffset + 6);if ((verOffset = nAgt.indexOf('Version')) != -1) {version = nAgt.substring(verOffset + 8);}}// Opera Nextif ((verOffset = nAgt.indexOf('OPR')) != -1) {browser = 'Opera';version = nAgt.substring(verOffset + 4);}// MSIEif ((verOffset = nAgt.indexOf('MSIE')) != -1) {browser = 'Microsoft Internet Explorer';version = nAgt.substring(verOffset + 5);}// Chromeif ((verOffset = nAgt.indexOf('Chrome')) != -1) {browser = 'Chrome';version = nAgt.substring(verOffset + 7);}// Safariif ((verOffset = nAgt.indexOf('Safari')) != -1) {browser = 'Safari';version = nAgt.substring(verOffset + 7);if ((verOffset = nAgt.indexOf('Version')) != -1) {version = nAgt.substring(verOffset + 8);}}// Firefoxif ((verOffset = nAgt.indexOf('Firefox')) != -1) {browser = 'Firefox';version = nAgt.substring(verOffset + 8);}// MSIE 11+if (nAgt.indexOf('Trident/') != -1) {browser = 'Microsoft Internet Explorer 11+';version = nAgt.substring(nAgt.indexOf('rv:') + 3);}// WeiXinif (nAgt.toLowerCase().indexOf('micromessenger') != -1) {browser = 'WeiXin';if (nAgt.indexOf('NetType/WIFI') != -1) {network = 'WIFI';} else if (nAgt.indexOf('NetType/2G') != -1) {network = '2G';} else if (nAgt.indexOf('NetType/3G+') != -1) {network = '3G+';} else if (nAgt.indexOf('NetType/4G') != -1) {network = '4G';}verOffset = nAgt.lastIndexOf('/')version = nAgt.substring(verOffset + 1);// if (browser.toLowerCase() == browser.toUpperCase()) {// browser = navigator.appName;// }}// Other browserselse if ((nameOffset = nAgt.lastIndexOf(' ') + 1) < (verOffset = nAgt.lastIndexOf('/'))) {browser = nAgt.substring(nameOffset, verOffset);version = nAgt.substring(verOffset + 1);if (browser.toLowerCase() == browser.toUpperCase()) {browser = navigator.appName;}}// trim the version stringif ((ix = version.indexOf(';')) != -1) version = version.substring(0, ix);if ((ix = version.indexOf(' ')) != -1) version = version.substring(0, ix);if ((ix = version.indexOf(')')) != -1) version = version.substring(0, ix);majorVersion = parseInt('' + version, 10);if (isNaN(majorVersion)) {version = '' + parseFloat(navigator.appVersion);majorVersion = parseInt(navigator.appVersion, 10);}// mobile versionvar mobile = /Mobile|mini|Fennec|Android|iP(ad|od|hone)/.test(nVer);// start system detectvar os = '';var clientStrings = [{s: 'Windows 10',r: /(Windows 10.0|Windows NT 10.0)/}, {s: 'Windows 8.1',r: /(Windows 8.1|Windows NT 6.3)/}, {s: 'Windows 8',r: /(Windows 8|Windows NT 6.2)/}, {s: 'Windows 7',r: /(Windows 7|Windows NT 6.1)/}, {s: 'Windows Vista',r: /Windows NT 6.0/}, {s: 'Windows Server 2003',r: /Windows NT 5.2/}, {s: 'Windows XP',r: /(Windows NT 5.1|Windows XP)/}, {s: 'Windows 2000',r: /(Windows NT 5.0|Windows 2000)/}, {s: 'Windows ME',r: /(Win 9x 4.90|Windows ME)/}, {s: 'Windows 98',r: /(Windows 98|Win98)/}, {s: 'Windows 95',r: /(Windows 95|Win95|Windows_95)/}, {s: 'Windows NT 4.0',r: /(Windows NT 4.0|WinNT4.0|WinNT|Windows NT)/}, {s: 'Windows CE',r: /Windows CE/}, {s: 'Windows 3.11',r: /Win16/}, {s: 'Android',r: /Android/}, {s: 'Open BSD',r: /OpenBSD/}, {s: 'Sun OS',r: /SunOS/}, {s: 'Linux',r: /(Linux|X11)/}, {s: 'iOS',r: /(iPhone|iPad|iPod)/}, {s: 'Mac OS X',r: /Mac OS X/}, {s: 'Mac OS',r: /(MacPPC|MacIntel|Mac_PowerPC|Macintosh)/}, {s: 'QNX',r: /QNX/}, {s: 'UNIX',r: /UNIX/}, {s: 'BeOS',r: /BeOS/}, {s: 'OS/2',r: /OS\/2/}, {s: 'Search Bot',r: /(nuhk|Googlebot|Yammybot|Openbot|Slurp|MSNBot|Ask Jeeves\/Teoma|ia_archiver)/}];for (var id in clientStrings) {var cs = clientStrings[id];if (cs.r.test(nAgt)) {os = cs.s;break;}}var osVersion = '';if (/Windows/.test(os)) {osVersion = /Windows (.*)/.exec(os)[1];os = 'Windows';}switch (os) {case 'Mac OS X':osVersion = /Mac OS X (10[\.\_\d]+)/.exec(nAgt)[1];break;case 'Android':osVersion = /Android ([\.\_\d]+)/.exec(nAgt)[1];break;case 'iOS':osVersion = /OS (\d+)_(\d+)_?(\d+)?/.exec(nVer);osVersion = osVersion[1] + '.' + osVersion[2] + '.' + (osVersion[3] | 0);break;}//detect datavar params = {};params.os = os; //操作系統(tǒng)params.osVersion = osVersion ? osVersion : 'unknown'; //操作系統(tǒng)版本params.mobile = mobile; //是否移動端訪問params.browser = browser; //瀏覽器params.browserVersion = version; //瀏覽器版本params.browserMajorVersion = majorVersion; //瀏覽器major版本//輸出對象return params;}return {detect: detect}})();借鑒了https://segmentfault.com/q/10...，但其代碼有嚴重漏洞，尤其在檢測是否在微信環(huán)境居然以網(wǎng)絡類型為條件，坑死我了。在此將其封裝為插件。
調(diào)用方法
BROSWER.detect()返回結果示例
{"os":"Windows","osVersion":"7","mobile":false,"browser":"Chrome","browserVersion":"59.0.3071.115","browserMajorVersion":59 }總結
- 上一篇： angular HttpClient 配
- 下一篇： 2017年html5行业报告,云适配发布