获取浏览器类型和版本

7,078 阅读3分钟

目前主流浏览器:IE,Edge,Chrome, Firefox,Opera,Safari。

Knowledge Base:

使用navigator.userAgent来获得以下浏览器类型和版本。

IE 11"Mozilla/5.0 (Windows NT 10.0; WOW64; Trident/7.0; .NET4.0C; .NET4.0E; wbx 1.0.0; Zoom 3.6.0; rv:11.0) like Gecko"
IE 10"Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 10.0; WOW64; Trident/7.0; .NET4.0C; .NET4.0E; wbx 1.0.0; Zoom 3.6.0)"
IE 9"Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 10.0; WOW64; Trident/7.0; .NET4.0C; .NET4.0E; wbx 1.0.0; Zoom 3.6.0)"
IE 8"Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 10.0; WOW64; Trident/7.0; .NET4.0C; .NET4.0E; wbx 1.0.0; Zoom 3.6.0)"
IE 7"Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 10.0; WOW64; Trident/7.0; .NET4.0C; .NET4.0E; wbx 1.0.0; Zoom 3.6.0)"
Edge"Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/64.0.3282.140 Safari/537.36 Edge/17.17134"
FireFox

"Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:68.0) Gecko/20100101 Firefox/68.0"

Chrome"Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/76.0.3809.100 Safari/537.36"
Opera

旧内核:"Opera/9.80 (Windows NT 6.2; U; en) Presto/2.10.229 Version/11.64"

新内核:"Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/54.0.2840.87 Safari/537.36 OPR/41.0.2353.56"

Safari"Mozilla/5.0 (iPad; CPU OS 5_0 like Mac OS X) AppleWebKit/537.36 (KHTML, like Gecko) Version/5.1 Mobile/9A334 Safari/7534.48.3"
360安全浏览器"Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/45.0.2454.101 Safari/537.36"
QQ浏览器"Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/53.0.2785.104 Safari/537.36 Core/1.53.1708.400 QQBrowser/9.5.9635.400"

详解:

Mozilla/5.0 | Mozilla/4.0

  • IE == 9-11: Mozilla/5.0 伪装成Mozilla排版引擎的浏览器以达到相容。
  • IE <= 8:Mozilla/4.0 伪装成Mozilla排版引擎的浏览器以达到相容。
Windows NT 10.0
  • windows NT 6.2:操作系统windows 8
  • windows10:操作系统windows 10
WOW64 | Win64; x64
  • WOW64: x86 版浏览器在 x64 版 Windows 上跑
  • Win64; x64:x64 版浏览器在 x64 版 Windows 上跑
MSIE 10.0 | rv:11.0
  • MSIE 10.0:IE 10.0
  • rv:11.0:如果返回信息中沒有 "FireFox",可能是 IE 11
compatible MSIE | Trident rv
  • 在IE <= 10,需要依靠关键字 compatible和MSIE来判断浏览器类型和版本。
  • 在IE 11版本中已经移除了compatible和MSIE,但是由Trident和rv字段来作为判断IE 11唯一依据。
  • Code
//判断是否IE <= 10
var isIE = userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1; 
//判断是否IE 11
var isIE11 = userAgent.indexOf('Trident') > -1 && userAgent.indexOf("rv:11.0") > -1;
if (isIE) {
              var reIE = new RegExp("MSIE (\\d+\\.\\d+);");
              reIE.test(userAgent);
              //$ 指的是与正则表达式匹配的第一个 子匹配(以括号为标志)字符串
              var ieVersion = parseFloat(RegExp[$1]); 
              switch(ieVersion) {
                    case 7: {return 7; break};
                    case 8: {return 8; break};
                    case 9: {return 9; break};
                    case 10: {return 10; break};
              }
} else if (isIE11) {
    return 11;
}
浏览器内核
  • 负责对网页语法的解释(如标准通用标记语言下的一个应用HTML、Javascript)并渲染(显示)网页。
  • 浏览器内核主要包括以下三个技术分支:排版渲染引擎、 JavaScript引擎,以及其他。
Trident又叫MSHTML/IE内核,Trident内核的常见浏览器有: IE6、IE7、IE8(Trident 4.0)、IE9(Trident 5.0)、IE10(Trident 6.0);360安全浏览器(1.0-5.0为Trident,6.0为Trident+Webkit,7.0为Trident+Blink).....
GeckoFirefox内核,Mozilla Firefox......
PrestoOpera前内核,Opera12.17及更早版本曾经采用的内核,现已停止开发并废弃,Opera现已改用Google Chrome的Blink内核
WebkitSafari内核,Chrome内核原型,Google Chrome、360极速浏览器,搜狗高速浏览器,Android 默认浏览器......
BlinkBlink是一个由Google和Opera Software开发的浏览器排版引擎

Code

从上面表格获取的浏览器类型来看,很多浏览器都是多核的,所以判断的顺序很重要。

    function getUserAgentInfo(){
        var userAgent = navigator.userAgent;
        var version;
        if(/opera/i.test(userAgent) || /OPR/i.test(userAgent)){
            version = getVersion(userAgent, "OPR/(\\d+\\.+\\d+)");
            return 'Opera' + version;
        }else if(/compatible/i.test(userAgent) && /MSIE/i.test(userAgent)){
            version = getVersion(userAgent, "MSIE (\\d+\\.+\\d+)");
            return 'IE' + version;
        }else if(/Edge/i.test(userAgent)){
            version = getVersion(userAgent, "Edge/(\\d+\\.+\\d+)");
            return 'Edge' + version;
        }else if(/Firefox/i.test(userAgent)){
            version = getVersion(userAgent, "Firefox/(\\d+\\.+\\d+)");
            return 'Firefox' + version;
        }else if(/Safari/i.test(userAgent) && !/Chrome/i.test(userAgent)){
            version = getVersion(userAgent, "Safari/(\\d+\\.+\\d+)");
            return 'Safari' + version;
        }else if(/Chrome/i.test(userAgent) && /Safari/i.test(userAgent)){
            version = getVersion(userAgent, "Chrome/(\\d+\\.+\\d+)");
            return 'Chrome' + version;
        }else if(!!window.ActiveXObject || "ActiveXObject" in window){
            version = 11;
            return 'IE' + version;
        }
    }
    
    function getVersion(userAgent, reg) {
        var reBrowser = new RegExp(reg);
        reBrowser.test(userAgent);
        return parseFloat(RegExp['$1']);
    }

Supplement

注意:用户可以修改userAgent的值,所以会对判断造成一定的影响。如果只是想判断是否为IE <=10,可以简单粗暴地用window.attachEvent方法来判断。

  • IE<=10

  • ​其他浏览器