瀏覽器嗅探

時間 2019-12-05

原文原文鏈接

瀏覽器的嗅探主要基於Window對象的Navigator屬性對瀏覽器的類型、名稱、廠商以及運行環境等做出判斷，知足不一樣生產環境的需求。javascript

常見的微信瀏覽器環境的判斷：css

<!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部分基本能夠直接截取出做爲微信瀏覽器運行環境下的判斷，並提供了錯誤頁內容。html

值得一提的是，我在微信windows版本中測試其內置瀏覽器識別結果是Chrome，並非微信環境MicroMessageer。java

Navigator對象

能夠直接在瀏覽器命令行下使用window.navigator查看其包含的各類屬性內容（取經常使用屬性解釋）：android

appName
返回瀏覽器的名稱。在IE中，就是「Microsoft Internet Explorer」;在FireFox以及其餘瀏覽器中，就是「Netscape」。
appVersion
返回瀏覽器的平臺和版本信息（一般以數字開始）。
platform
返回運行瀏覽器的操做系統平臺。
onLine
返回指明系統是否處於脫機模式的布爾值。
userAgent！！！
返回由客戶機發送服務器的 user-agent 頭部的值。

userAgent 屬性是一個只讀的字符串，聲明瞭瀏覽器用於 HTTP 請求的用戶代理頭的值。segmentfault

通常來說，它是在 navigator.appCodeName 的值以後加上斜線和 navigator.appVersion 的值構成的。
例如：Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.2; SV1; .NET CLR 1.1.4322)。windows

注：用戶代理頭：user-agent header。瀏覽器

總結的瀏覽器嗅探插件

;
    var _BROWSER = (function() {
        function detect() {
            // start browser detect
            var nVer = navigator.appVersion,
                nAgt = navigator.userAgent,
                browser = navigator.appName,
                version = '' + parseFloat(navigator.appVersion),
                majorVersion, nameOffset, verOffset, ix, network = 'unknown';
            // Opera
            if ((verOffset = nAgt.indexOf('Opera')) != -1) {
                browser = 'Opera';
                version = nAgt.substring(verOffset + 6);
                if ((verOffset = nAgt.indexOf('Version')) != -1) {
                    version = nAgt.substring(verOffset + 8);
                }
            }
            // Opera Next
            if ((verOffset = nAgt.indexOf('OPR')) != -1) {
                browser = 'Opera';
                version = nAgt.substring(verOffset + 4);
            }
            // MSIE
            if ((verOffset = nAgt.indexOf('MSIE')) != -1) {
                browser = 'Microsoft Internet Explorer';
                version = nAgt.substring(verOffset + 5);
            }
            // Chrome
            if ((verOffset = nAgt.indexOf('Chrome')) != -1) {
                browser = 'Chrome';
                version = nAgt.substring(verOffset + 7);
            }
            // Safari
            if ((verOffset = nAgt.indexOf('Safari')) != -1) {
                browser = 'Safari';
                version = nAgt.substring(verOffset + 7);
                if ((verOffset = nAgt.indexOf('Version')) != -1) {
                    version = nAgt.substring(verOffset + 8);
                }
            }
            // Firefox
            if ((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);
            }
            // WeiXin
            if (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 browsers
            else 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 string
            if ((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 version
            var mobile = /Mobile|mini|Fennec|Android|iP(ad|od|hone)/.test(nVer);
    
            // start system detect
            var 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 data
            var params = {};
            params.os = os; //操做系統
            params.osVersion = osVersion ? osVersion : 'unknown'; //操做系統版本
            params.mobile = mobile; //是否移動端訪問
            params.browser = browser; //瀏覽器
            params.browserVersion = version; //瀏覽器版本
            params.browserMajorVersion = majorVersion; //瀏覽器major版本
    
            //輸出對象
            return params;
    
        }
        return {
            detect: detect
        }
    })();

借鑑了https://segmentfault.com/q/10...，但其代碼有嚴重漏洞，尤爲在檢測是否在微信環境竟然以網絡類型爲條件，坑死我了。在此將其封裝爲插件。服務器

調用方法

BROSWER.detect()

返回結果示例

{
    "os":"Windows",
    "osVersion":"7",
    "mobile":false,
    "browser":"Chrome",
    "browserVersion":"59.0.3071.115",
    "browserMajorVersion":59
}

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。