JS 取得浏览器范例和版本

2024年3月9日 230次阅读 来源: songjz

近来碰到了一个题目，推断浏览器的范例，我们熟知的 IE, Firefox, Opera, Safari, Chrome 五款比较著名的浏览器，有时候须要斟酌兼容性题目，固然，即使是统一款浏览器，差别的 version 也会带来许多贫苦。

在 Chrome 没有出来之前，IE 一向都是浏览器行业的首脑和规范，然则 IE 的难用简直了。Chrome 的中心是 Webkit，它开源了一套浏览器引擎 chromium，然后如今很多浏览器都采纳多核，这给推断浏览器的范例带来不少贫苦。

js 推断浏览器的范例，运用的是 JavaScript Navigator 对象的，说白了照样经由过程正则表达式去婚配字段。固然这里也有许多大牛总结的履历，传送门1，传送门2，传送门3。

各大浏览器的 userAgent 值

起首须要晓得 navigator 接口对象的值示意哪些意义，Navigator MDN。

作为一个前端，常备种种浏览器，用来调试浏览器的兼容。下面是各大浏览器输出 navigator.userAgent 的值：

  1. 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)

  2. 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

  3. 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

  4. FireFox：Mozilla/5.0 (Windows NT 10.0; WOW64; rv:49.0) Gecko/20100101 Firefox/49.0

  5. Chrome：Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/54.0.2840.71 Safari/537.36

  6. 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

  7. Safari：mozilla/5.0 (windows; u; windows nt 5.1; zh-cn) applewebkit/533.16 (khtml, like gecko) version/5.0 safari/533.16

  8. 360平安浏览器：Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/45.0.2454.101 Safari/537.36

  9. 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 11 版本比之前版本的 userAgent 发作很大的变化，你如今从网上搜的话，发明许多代码都没法支撑 ie 11 的推断，上限是 ie 10。

下面针对列表中的浏览器，总结了一下：

  1. IE 10 之前的版本，婚配关键字 MSIE 8.0；

  2. IE 11 要经由过程 rv:11.0) like Gecko 来婚配；

  3. EDGE 经由过程 Edge/12.10240；

  4. Firefox 经由过程 Firefox/49.0；

  5. Chrome 经由过程 Chrome/54.0.2840.71，然则会发明，背面的浏览器都是基于 Chrome 内核（safari 除外），然则 Chrome 又是基于 safari 内核的。。

  6. Opera 经由过程 OPR/41.0.2353.56，然则网上广泛是经由过程 opera 字段，我这款浏览器没有 opera 字段，岂非是盗版？

  7. Safari 经由过程 safari/533.16 来婚配；

  8. 360 和 QQ 都是基于 Chrome 内核的，固然 QQ 还能经由过程 QQBrowser/9.5.9635.400，假如你愉快去婚配的话。

猎取浏览器范例和版本

引见完浏览器的 userAgent 信息，下面就是写正则来推断了：

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';
  }
}

一样，推断递次很主要。

window 用户能够经由过程修正注册表来变动 userAgent 内容，会对推断形成影响，不晓得另有没有其他的更好的要领来推断。

一些其他手腕

假如只是单单推断是不是是 IE 浏览器，那就好办了，能够经由过程一些特有函数来推断。

比方 window.attachEvent 在 IE<=10 是有定义的，其他浏览器是 underfined。

if(window.attachEvent){
  console.log('IE <= 10');
}else{
  console.log('not IE or IE >=11');
}

总结

近来在弄一个异常有意义的烟花殊效，基于 canvas，然则有一个异常严峻的题目是在 Chrome 内核的浏览器下运转很流通，在 Firefox 或 Safari 下面就很卡，IE 下面也是惨绝人寰，这让我对 Chrome 又有了一个新的熟悉。项目地点，DEMO 地点。

参考

js/jquery推断浏览器的要领总结
JavaScript推断浏览器范例及版本（新增IE11）
JS推断浏览器范例的要领总结

迎接接见我的博客。

    原文作者：songjz
    原文地址: https://segmentfault.com/a/1190000007640795
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞