js判断主流浏览器版本

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

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

浏览器 userAgent信息
IE7 Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.1; WOW64;Trident/7.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C; .NET4.0E)
IE 8 Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; Trident/7.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729;Media Center PC 6.0; .NET4.0C; .NET4.0E)
IE 9 Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; WOW64; Trident/7.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729;Media Center PC 6.0; .NET4.0C; .NET4.0E)
IE 10 Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.1; WOW64; Trident/7.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C; .NET4.0E)
IE 11 Mozilla/5.0 (Windows NT 6.1; WOW64; Trident/7.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C; .NET4.0E; rv:11.0) like Gecko
Edge 17 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
Chrome 69 Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/69.0.3497.81 Safari/537.36
Firefox 62 Mozilla/5.0 (Windows NT 6.1; Win64; x64; rv:62.0) Gecko/20100101 Firefox/62.0
Safari 60 Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_6) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/12.0.1 Safari/605.1.15
Opera 56 Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/69.0.3497.100 Safari/537.36 OPR/56.0.3051.88

如果表格信息不方便浏览,也可以直接看下图:
浏览器信息对比图.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;
}
  1. 如果仅仅是区分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浏览器
            }
        }

参考

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,098评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,213评论 2 380
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 149,960评论 0 336
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,519评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,512评论 5 364
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,533评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,914评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,574评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,804评论 1 296
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,563评论 2 319
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,644评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,350评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,933评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,908评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,146评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,847评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,361评论 2 342

推荐阅读更多精彩内容