检测浏览器类型&判断 IE 版本

发表于 | 分类于 | 评论数： | 阅读次数：

JS 获取浏览器信息

浏览器代码名称：navigator.appCodeName
浏览器名称：navigator.appName
浏览器版本号：navigator.appVersion
对Java的支持：navigator.javaEnabled()
MIME类型（数组）：navigator.mimeTypes
系统平台：navigator.platform
插件（数组）：navigator.plugins
用户代理：navigator.userAgent

各大浏览器的 userAgent 值

各大浏览器输出 navigator.userAgent 的值：

  • IE 8：Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 10.0; WOW64; Trident/8.0; .NET4.0C; .NET4.0E; InfoPath.3; .NET CLR 2.0.50727; .NET CLR 3.0.30729; .NET CLR 3.5.30729)
  • IE 11：Mozilla/5.0 (Windows NT 10.0; WOW64; Trident/7.0; .NET4.0C; .NET4.0E; InfoPath.3; .NET CLR 2.0.50727; .NET CLR 3.0.30729; .NET CLR 3.5.30729; rv:11.0)like Gecko
  • win EDGE：Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/42.0.2311.135 Safari/537.36 Edge/12.10240
  • FireFox：Mozilla/5.0 (Windows NT 10.0; WOW64; rv:49.0) Gecko/20100101 Firefox/49.0
  • Chrome：Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/54.0.2840.71 Safari/537.36
  • Opera：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 (windows; u; windows nt 5.1; zh-cn) applewebkit/533.16 (khtml, like gecko) version/5.0 safari/533.16
  • 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

总结:

  • IE 10 之前的版本，匹配关键字 MSIE 8.0；
  • IE 11 要通过 rv:11.0) like Gecko 来匹配；
  • EDGE 通过 Edge/12.10240；
  • Firefox 通过 Firefox/49.0；
  • Chrome 通过 Chrome/54.0.2840.71，但是会发现，后面的浏览器都是基于 Chrome 内核（safari 除外），但是 Chrome 又是基于 safari 内核的。。
  • Opera 通过 OPR/41.0.2353.56，但是网上普遍是通过 opera 字段.
  • Safari 通过 safari/533.16 来匹配；
  • 360 和 QQ 都是基于 Chrome 内核的，当然 QQ 还能通过 QQBrowser/9.5.9635.400，如果你高兴去匹配的话。

获取浏览器类型和版本

function getExplore(){
  var Sys = {};  
  var ua = navigator.userAgent.toLowerCase();  
  var s;  
  (s = ua.match(/rv:([\d.]+)\) like gecko/)) ? Sys.ie = s[1] :
  (s = ua.match(/msie ([\d\.]+)/)) ? Sys.ie = s[1] :  
  (s = ua.match(/edge\/([\d\.]+)/)) ? Sys.edge = s[1] :
  (s = ua.match(/firefox\/([\d\.]+)/)) ? Sys.firefox = s[1] :  
  (s = ua.match(/(?:opera|opr).([\d\.]+)/)) ? Sys.opera = s[1] :  
  (s = ua.match(/chrome\/([\d\.]+)/)) ? Sys.chrome = s[1] :  
  (s = ua.match(/version\/([\d\.]+).*safari/)) ? Sys.safari = s[1] : 0;  
  // 根据关系进行判断
  if (Sys.ie) return ('IE: ' + Sys.ie);  
  if (Sys.edge) return ('EDGE: ' + Sys.edge);
  if (Sys.firefox) return ('Firefox: ' + Sys.firefox);  
  if (Sys.chrome) return ('Chrome: ' + Sys.chrome);  
  if (Sys.opera) return ('Opera: ' + Sys.opera);  
  if (Sys.safari) return ('Safari: ' + Sys.safari);
  return 'Unkonwn';
}

判断的顺序很重要,因为很多浏览器是多核的.

简单判断浏览器类型,不需要版本号:

function getExploreName(){
  var userAgent = navigator.userAgent;
  if(userAgent.indexOf("Opera") > -1 || userAgent.indexOf("OPR") > -1){
    return 'Opera';
  }else if(userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1){
    return 'IE';
  }else if(userAgent.indexOf("Edge") > -1){
    return 'Edge';
  }else if(userAgent.indexOf("Firefox") > -1){
    return 'Firefox';
  }else if(userAgent.indexOf("Safari") > -1 && userAgent.indexOf("Chrome") == -1){
    return 'Safari';
  }else if(userAgent.indexOf("Chrome") > -1 && userAgent.indexOf("Safari") > -1){
    return 'Chrome';
  }else if(!!window.ActiveXObject || "ActiveXObject" in window){
    return 'IE>=11';
  }else{
    return 'Unkonwn';
  }
}

判断 IE 的方法

1.

if(window.addEventListener){ 
alert("not ie"); 
}else if(window.attachEvent){ 
alert("is ie"); 
}else{ 
alert("这种情况发生在不支持DHTML的老版本浏览器（现在一般都支持）") 
}

2.

if(document.all){ 
alert("IE"); 
}else{ 
alert("not ie"); 
}

3.

var navigatorName = "Microsoft Internet Explorer"; 
if( navigator.appName == navigatorName ){ 
alert("ie") 
}else{
alert("not ie") 
}

4.

if(!+[1,])alert("这是ie浏览器"); 
else alert("这不是ie浏览器");

IE 条件注释

关键词释义

lt ：就是Less than的简写，也就是小于的意思。

lte ：就是Less than or equal to的简写，也就是小于或等于的意思。

gt ：就是Greater than的简写，也就是大于的意思。

gte：就是Greater than or equal to的简写，也就是大于或等于的意思。

!：就是不等于的意思，跟javascript里的不等于判断符相同。

例如

  • 1.只有 IE 可以识别

    <!--[if IE]>
 <link type="text/css" rel="stylesheet" href="my.css" />
<![endif]-->

  • 2.只有特定版本才能识别

    <!--[if IE 8]> 
<link type="text/css" rel="stylesheet" href="my.css" />   
<![endif]-->

  • 3.等于或者高于特定版本才能识别

    <!--[if gte IE 7]> 
<link type="text/css" rel="stylesheet" href="my.css" />   
<![endif]-->
thank u !