js 不一樣瀏覽器的類型判斷 navigator.userAgent

時間 2019-11-12

標籤不一樣瀏覽器類型判斷 navigator.useragent navigator useragent 欄目 JavaScript 简体版

原文原文鏈接

1、經過navigator.userAgent來進行瀏覽器類型判斷html

// 判斷瀏覽器內核、手機系統等，使用 browser.userAgent.mobile
var browser = {
    userAgent: function () {
        var ua = navigator.userAgent;
        var ualower = navigator.userAgent.toLocaleLowerCase();
        return {
            trident: ua.indexOf('Trident') > -1, // IE內核
            presto: ua.indexOf('Presto') > -1, // opera內核
            webKit: ua.indexOf('AppleWebKit') > -1, //蘋果、谷歌內核
            gecko: ua.indexOf('Gecko') > -1 && ua.indexOf('KHTML') == -1, // 火狐內核
            mobile: !!ua.match(/AppleWebKit.*Mobile.*/) || !!ua.match(/AppleWebKit/), // 是否爲移動終端
            ios: !!ua.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), // IOS終端
            android: ua.indexOf('Android') > -1 || ua.indexOf('Mac') > -1, // 安卓終端
            iPhone: ua.indexOf('iPhone') > -1 || ua.indexOf('Mac') > -1, // 是否爲iphone或QQHD瀏覽器
            iPad: ua.indexOf('iPad') > -1, // 是否爲iPad
            webApp: ua.indexOf('Safari') == -1, // 是否web應用程序，沒有頭部與底部
            QQbrw: ua.indexOf('MQQBrowser') > -1, // QQ瀏覽器(手機上的)
            weiXin: ua.indexOf('MicroMessenger') > -1, // 微信
            QQ: ualower.match(/\sQQ/i) == " qq", // QQ App內置瀏覽器（須要配合使用）
            weiBo: ualower.match(/WeiBo/i) == "weibo", // 微博
            ucLowEnd: ua.indexOf('UCWEB7.') > -1, //
            ucSpecial: ua.indexOf('rv:1.2.3.4') > -1,
            webview: !(ua.match(/Chrome\/([\d.]+)/) || ua.match(/CriOS\/([\d.]+)/)) && ua.match(/(iPhone|iPod|iPad).*AppleWebKit(?!.*Safari)/),
            ucweb: function () {
                try {
                    return parseFloat(ua.match(/ucweb\d+\.\d+/gi).toString().match(/\d+\.\d+/).toString()) >= 8.2
                } catch (e) {
                    if (ua.indexOf('UC') > -1) {
                        return true;
                    }
                    return false;
                }
            }(),
            Symbian: ua.indexOf('Symbian') > -1,
            ucSB: ua.indexOf('Firofox/1.') > -1
        };
    }()
};

2、注意事項及補充點：

1. 注意大小寫 toLowerCase()、toLocaleLowerCase()、toUpperCase()和toLocaleUpperCase()

toLocaleLowerCase() 方法按照本地方式把字符串轉換爲小寫。

只有幾種語言（如土耳其語）具備地方特有的大小寫映射，全部該方法的返回值一般與 toLowerCase() 同樣。

2. match 和 indexOf的區別

match() 方法可在字符串內檢索指定的值，或找到一個或多個正則表達式的匹配。

該方法相似 indexOf() 和 lastIndexOf()，可是它返回指定的值，而不是字符串的位置。

match()返回值：存放匹配結果的數組。該數組的內容依賴於 regexp 是否具備全局標誌 g（正則表達式）。

3. str.match().toLowerCase() 錯誤：

str.match()的返回值是數組

4. match正則理解 ua.match(/\sQQ/i) == ' qq'，注意 \s 和 i 以及 ' qq' 的問題，注意' qq' 有空格：

\s 匹配任何空白字符，包括空格、製表符、換頁符等等。等價於 [ \f\n\r\t\v]。注意 Unicode 正則表達式會匹配全角空格符。

//i 不區分(ignore)大小寫；
//例如: /abc/i 能夠匹配 abc、aBC、Abc 

//g 全局(global)匹配 
//若是不帶g，正則過程當中字符串從左到右匹配，找到第一個符合條件的即匹配成功，返回
//若是帶g，則字符串從左到右，找到每一個符合條件的都記錄下來，知道字符串結尾位置
//例如: 
var str = 'aaaaaaaa'
var reg1 = /a/;  str.match(reg1)  // 結果爲：["a", index: 0, input: "aaaaaaaa"]
var reg2 = /a/g; str.match(reg2)  // 結果爲：["a", "a", "a", "a", "a", "a", "a", "a"]

5. 判斷QQ瀏覽器、QQ APP內置瀏覽器和微信 APP內置瀏覽器

// 判斷android手機的 QQ瀏覽器、QQ APP內置瀏覽器、微信 APP內置瀏覽器
var ua = navigator.userAgent.toLowerCase(),
    isWx = false, isQQ = false, isQQInstalled = false;
if (ua.indexOf(' qq') > -1 && ua.indexOf('mqqbrowser') < 0) {
    //qq內置瀏覽器
    isQQInstalled = true;
    return;
}
if (ua.indexOf('mqqbrowser') > -1 && ua.indexOf(" qq") < 0) {
    //qq瀏覽器
    isQQ = true;
    return;
}
if (ua.match(/MicroMessenger/i) == 'micromessenger') {
    //微信瀏覽器
    isWx = true;
    return;
}

使用上面的browser.userAgent，判斷QQ瀏覽器、QQ APP內置瀏覽器和微信 APP內置瀏覽器android

須要使用(browser.userAgent.QQ && !browser.userAgent.QQbrw)組合，來判斷是否是QQ app內置瀏覽器ios

// 使用上面的 browser.userAgent 判斷android手機的 QQ瀏覽器、QQ APP內置瀏覽器、微信 APP內置瀏覽器
if (browser.userAgent.weiXin) {
    // 微信 app 內置瀏覽器
} else if (browser.userAgent.QQbrw && !browser.userAgent.QQ) {
    //手機QQ瀏覽器
} else if (!browser.userAgent.QQbrw && browser.userAgent.QQ) {
    //手機QQ app 內置瀏覽器
}

3、不一樣瀏覽器的navigator.userAgentweb

// 部分瀏覽器格式以下（PC）：

// chrome瀏覽器：navigator.userAgent
"Mozilla/5.0 (Windows NT 6.3; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/74.0.3729.169 Safari/537.36"
// QQ瀏覽器 navigator.userAgent
"Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/63.0.3239.26 Safari/537.36 Core/1.63.5702.400 QQBrowser/10.2.1893.400"
// 搜狗瀏覽器 navigator.userAgent
"Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.110 Safari/537.36 SE 2.X MetaSr 1.0"
// 360瀏覽器：navigator.userAgent
"Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/63.0.3239.132 Safari/537.36"
// IE11瀏覽器：
"Mozilla/5.0 (Windows NT 10.0; WOW64; Trident/7.0; .NET4.0C; .NET4.0E; .NET CLR 2.0.50727; .NET CLR 3.0.30729; .NET CLR 3.5.30729; McAfee; rv:11.0) like Gecko"
// safari 5.1 – MAC：User-Agent:
"Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10_6_8; en-us) AppleWebKit/534.50 (KHTML, like Gecko) Version/5.1 Safari/534.50"
// safari 5.1 – Windows：User-Agent:
"Mozilla/5.0 (Windows; U; Windows NT 6.1; en-us) AppleWebKit/534.50 (KHTML, like Gecko) Version/5.1 Safari/534.50"
// Firefox 4.0.1 – MAC：User-Agent: 
"Mozilla/5.0 (Macintosh; Intel Mac OS X 10.6; rv:2.0.1) Gecko/20100101 Firefox/4.0.1"
// Firefox 4.0.1 – Windows：User-Agent:
"Mozilla/5.0 (Windows NT 6.1; rv:2.0.1) Gecko/20100101 Firefox/4.0.1"
// Opera 11.11 – MAC：User-Agent:
"Opera/9.80 (Macintosh; Intel Mac OS X 10.6.8; U; en) Presto/2.8.131 Version/11.11"
// Opera 11.11 – Windows：User-Agent:
"Opera/9.80 (Windows NT 6.1; U; en) Presto/2.8.131 Version/11.11"


// 部分瀏覽器格式以下（移動端）：

// iphone6：
"Mozilla/5.0 (iPhone; CPU iPhone OS 9_1 like Mac OS X) AppleWebKit/601.1.46 (KHTML, like Gecko) Version/9.0 Mobile/13B143 Safari/601.1"
// ipad：
"Mozilla/5.0 (iPad; CPU OS 9_1 like Mac OS X) AppleWebKit/601.1.46 (KHTML, like Gecko) Version/9.0 Mobile/13B143 Safari/601.1"
// Android QQ瀏覽器 For android：User-Agent: 
"MQQBrowser/26 Mozilla/5.0 (Linux; U; Android 2.3.7; zh-cn; MB200 Build/GRJ22; CyanogenMod-7) AppleWebKit/533.1 (KHTML, like Gecko) Version/4.0 Mobile Safari/533.1"
// Windows Phone：User-Agent: 
"Mozilla/5.0 (compatible; MSIE 9.0; Windows Phone OS 7.5; Trident/5.0; IEMobile/9.0; HTC; Titan)"
// BlackBerry：User-Agent: 
"Mozilla/5.0 (BlackBerry; U; BlackBerry 9800; en) AppleWebKit/534.1+ (KHTML, like Gecko) Version/6.0.0.337 Mobile Safari/534.1+"
// UC標準：User-Agent: 
"NOKIA5700/ UCWEB7.0.2.37/28/999"