由于经常需要在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 |
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种方法
- 根据userAgent包含网页排版引擎区分:Internet Explorer核心(Trident)及Mozilla Firefox核心(Gecko)。代码如下:
function isIE() {
return navigator.userAgent.toLowerCase().indexOf('trident')>-1?true:false;
}
- 如果仅仅是区分IE和其他主流浏览器,其实除了userAgent字段外,也可以使用ActiveXObject对象来进行判断。代码如下:
function isIE(){
if(!!window.ActiveXObject || "ActiveXObject" in window){
return true;
}else{
return false;
}
}
一些说明如下:
- IE早些版本时,IE10及以下,
window.ActiveXObject
返回一个对象,!window.ActiveXObject
则变为false,!!window.ActiveXObject
则为true,因为是或||符号后续无需再判断,返回true。 - E11中,
window.ActiveXObject
返回undefine,!window.ActiveXObject
则变成了true,!!window.ActiveXObject
则变成了false,进入"window.ActiveXObject" in window
判断,该判断条件在IE11下返回true。 - 其他非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浏览器
}
}