摘要：獲取瀏覽器類型和版本介紹完瀏覽器的信息，下面就是寫正則來判斷了根據(jù)關(guān)系進(jìn)行判斷從關(guān)系判斷中，我們會(huì)發(fā)現(xiàn)判斷的順序很重要，原因是很多瀏覽器都是多核的。參考判斷瀏覽器的方法總結(jié)判斷瀏覽器類型及版本新增判斷瀏覽器類型的方法總結(jié)歡迎訪問我的博客。

最近碰到了一個(gè)問題，判斷瀏覽器的類型，我們熟知的 IE, Firefox, Opera, Safari, Chrome 五款比較有名的瀏覽器，有時(shí)候需要考慮兼容性問題，當(dāng)然，即使是同一款瀏覽器，不同的 version 也會(huì)帶來很多麻煩。

在 Chrome 沒有出來之前，IE 一直都是瀏覽器行業(yè)的領(lǐng)袖和標(biāo)準(zhǔn)，但是 IE 的難用簡(jiǎn)直了。Chrome 的核心是 Webkit，它開源了一套瀏覽器引擎 chromium，然后現(xiàn)在好多瀏覽器都采用多核，這給判斷瀏覽器的類型帶來不少麻煩。

js 判斷瀏覽器的類型，使用的是 JavaScript Navigator 對(duì)象的，說白了還是通過正則表達(dá)式去匹配字段。當(dāng)然這里也有很多大牛總結(jié)的經(jīng)驗(yàn)，傳送門1，傳送門2，傳送門3。

首先需要知道 navigator 接口對(duì)象的值表示哪些意思，Navigator MDN。

作為一個(gè)前端，常備各種瀏覽器，用來調(diào)試瀏覽器的兼容。下面是各大瀏覽器輸出 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 11 版本比之前版本的 userAgent 發(fā)生很大的變化，你現(xiàn)在從網(wǎng)上搜的話，發(fā)現(xiàn)很多代碼都無法支持 ie 11 的判斷，上限是 ie 10。

下面針對(duì)列表中的瀏覽器，總結(jié)了一下：

IE 10 之前的版本，匹配關(guān)鍵字 MSIE 8.0；

IE 11 要通過 rv:11.0) like Gecko 來匹配；

EDGE 通過 Edge/12.10240；

Firefox 通過 Firefox/49.0；

Chrome 通過 Chrome/54.0.2840.71，但是會(huì)發(fā)現(xiàn)，后面的瀏覽器都是基于 Chrome 內(nèi)核（safari 除外），但是 Chrome 又是基于 safari 內(nèi)核的。。

Opera 通過 OPR/41.0.2353.56，但是網(wǎng)上普遍是通過 opera 字段，我這款瀏覽器沒有 opera 字段，難道是盜版？

Safari 通過 safari/533.16 來匹配；

360 和 QQ 都是基于 Chrome 內(nèi)核的，當(dāng)然 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;  
  // 根據(jù)關(guān)系進(jìn)行判斷
  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";
}

從關(guān)系判斷中，我們會(huì)發(fā)現(xiàn)判斷的順序很重要，原因是很多瀏覽器都是多核的。

如果只是簡(jiǎn)單判斷瀏覽器類型，不需要知道版本號(hào)，還可以通過下面的方法（此方法也可以用正則改成匹配版本號(hào)）：

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 用戶可以通過修改注冊(cè)表來更改 userAgent 內(nèi)容，會(huì)對(duì)判斷造成影響，不知道還有沒有其他的更好的方法來判斷。

如果只是單單判斷是否是 IE 瀏覽器，那就好辦了，可以通過一些特有函數(shù)來判斷。

比如 window.attachEvent 在 IE<=10 是有定義的，其他瀏覽器是 underfined。

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

最近在弄一個(gè)非常有意思的煙花特效，基于 canvas，但是有一個(gè)非常嚴(yán)重的問題是在 Chrome 內(nèi)核的瀏覽器下運(yùn)行很流暢，在 Firefox 或 Safari 下面就很卡，IE 下面也是慘不忍睹，這讓我對(duì) Chrome 又有了一個(gè)新的認(rèn)識(shí)。項(xiàng)目地址，DEMO 地址。

js/jquery判斷瀏覽器的方法總結(jié)
JavaScript判斷瀏覽器類型及版本（新增IE11）
JS判斷瀏覽器類型的方法總結(jié)

歡迎訪問我的博客。