JS 得到瀏覽器類型和版本

最近碰到了一個問題，判斷瀏覽器的類型，咱們熟知的 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判斷瀏覽器類型的方法總結

歡迎訪問個人博客。