js判断主流浏览器版本

由于经常需要在js里判断是否是IE浏览器，在IE11出现前，基本都是使用 MSIE 来判断，但是IE11出现后就不同了，废止的方法不少，有兴趣可以参考深入解析IE11中废止的方法和IE11兼容问题及修正-4Fang，此文关注判断主流浏览器版本。

首先，看看主流浏览器纵向（自身不同版本）和横向（不同款浏览器）的navigator.userAgent信息对比表(注：下面测试的是PC端的浏览器，移动端的浏览器可能有些出入)：

浏览器信息对比图.png

navigator.userAgent主要包含浏览器版本，型号，内核，甚至安装的插件等等。

网页排版引擎大致有2个系列：Internet Explorer核心（Trident）及Mozilla Firefox核心（Gecko）。

之所以有Gecko标识，跟HTML5规定有关。

navigator.appName 值为 “Netscape”，

navigator.product 值为 “Gecko”。

在 HTML5 中要求这两个属性必须返回上述对应的值，这是一个很奇怪的规定的。IE系列中只有Internet Explorer 11遵守了这个规定。我测试了上面列表的浏览器，发现其他主流浏览器（Edge，Chrome，Firefox，Safari，Opera）都遵守了这个规定。

区分IE和其他主流浏览器2种方法

1. 根据userAgent包含网页排版引擎区分：Internet Explorer核心（Trident）及Mozilla Firefox核心（Gecko）。代码如下：

function isIE() {
           return navigator.userAgent.toLowerCase().indexOf('trident')>-1?true:false;
}

2. 如果仅仅是区分IE和其他主流浏览器，其实除了userAgent字段外，也可以使用ActiveXObject对象来进行判断。代码如下：

function isIE(){
    if(!!window.ActiveXObject || "ActiveXObject" in window){
        return true;
    }else{
        return false;
    }
}

一些说明如下：

1. IE早些版本时，IE10及以下，window.ActiveXObject 返回一个对象，!window.ActiveXObject则变为false，!!window.ActiveXObject则为true，因为是或||符号后续无需再判断，返回true。
2. E11中，window.ActiveXObject返回undefine，!window.ActiveXObject则变成了true，!!window.ActiveXObject则变成了false，进入 "window.ActiveXObject" in window判断，该判断条件在IE11下返回true。
3. 其他非IE浏览器，如chrome，firefox，window.ActiveXObject都是undefine，!!window.ActiveXObject都是返回的false，而 "window.ActiveXObject" in window也是返回false，因此上述判断函数在非IE浏览器中返回的都是false。

判断是否是IE浏览器且给出IE版本

代码如下：

        function IEVersion() {
            var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串
            var isIE = userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1; //判断是否IE<11浏览器
            var isEdge = userAgent.indexOf("Edge") > -1 && !isIE; //判断是否IE的Edge浏览器
            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 fIEVersion = parseFloat(RegExp["$1"]);
                if(fIEVersion == 7) {
                    return 7;
                } else if(fIEVersion == 8) {
                    return 8;
                } else if(fIEVersion == 9) {
                    return 9;
                } else if(fIEVersion == 10) {
                    return 10;
                } else {
                    return 6;//IE版本<=7
                }
            } else if(isEdge) {
                return 'edge';//edge
            } else if(isIE11) {
                return 11; //IE11
            }else{
                return -1;//不是ie浏览器
            }
        }

判断主流浏览器版本

判断非IE类浏览器时，Chrome浏览器，不能直接用navigator.userAgent.indexOf('Chrome')>-1直接判断，你看看上面的对比表下面的截图中的绿色方框，就会发现，Edge和Opera的浏览器信息都含有Chrome字符。代码如下：

        function browserVersion() {
            var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串
            var isIE = userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1; //判断是否IE<11浏览器
            var isIE11 = userAgent.indexOf('Trident') > -1 && userAgent.indexOf("rv:11.0") > -1;
            var isEdge = userAgent.indexOf("Edge") > -1 && !isIE; //Edge浏览器
            var isFirefox = userAgent.indexOf("Firefox") > -1; //Firefox浏览器
            var isOpera = userAgent.indexOf("Opera")>-1 || userAgent.indexOf("OPR")>-1 ; //Opera浏览器
            var isChrome = userAgent.indexOf("Chrome")>-1 && userAgent.indexOf("Safari")>-1 && userAgent.indexOf("Edge")==-1 && userAgent.indexOf("OPR")==-1; //Chrome浏览器
            var isSafari = userAgent.indexOf("Safari")>-1 && userAgent.indexOf("Chrome")==-1 && userAgent.indexOf("Edge")==-1 && userAgent.indexOf("OPR")==-1; //Safari浏览器
            if(isIE) {
                var reIE = new RegExp("MSIE (\\d+\\.\\d+);");
                reIE.test(userAgent);
                var fIEVersion = parseFloat(RegExp["$1"]);
                if(fIEVersion == 7) {
                    return 'IE7';
                } else if(fIEVersion == 8) {
                    return 'IE8';
                } else if(fIEVersion == 9) {
                    return 'IE9';
                } else if(fIEVersion == 10) {
                    return 'IE10';
                } else {
                    return 'IE6';//IE版本<7
                }
            } else if(isIE11) {
                return 'IE11';
            } else if(isEdge) {
                return 'Edge'+userAgent.split('Edge/')[1].split('.')[0];
            } else if(isFirefox) {
                return 'Firefox'+userAgent.split('Firefox/')[1].split('.')[0];
            } else if(isOpera) {
                return 'Opera'+userAgent.split('OPR/')[1].split('.')[0];
            } else if(isChrome) {
                return 'Chrome'+userAgent.split('Chrome/')[1].split('.')[0];
            } else if(isSafari) {
                return 'Safari';+userAgent.split('Safari/')[1].split('.')[0];
            } else{
                return -1;//不是ie浏览器
            }
        }

参考

• 深入解析IE11中废止的方法

• IE11兼容问题及修正-4Fang

• js判断IE浏览器（包括IE11）

• JS判断浏览器版本（已解决IE11版本为Mozilla问题）

• js判断是否是ie浏览器且给出ie版本