用JS識別各版本瀏覽器

寫着寫着卻發現不少坑爹的地方，好比IE10-的版本是依循常規支持attachEvent，但到了IE11，卻只支持addEventListener而再也不支持attachEvent。光是這一點就能夠判斷IE是個大坑，IE11的存在可能會致使以前你寫過的代碼出現錯亂。另如本來可用

var ieVersion = eval("''+/*@cc_on"+" @_jscript_version@*/-0")*1

的嗅探腳原本判斷是否IE，若是值非0則表示爲IE瀏覽器，但到了IE11，也直接返回0了（即IE11再也不識別@cc_on這個IE獨有的條件編譯語句）。。。。

還有就是上篇文章提到的Opera自從去年就拋棄了自家的Presto內核，轉而跟進使用Chrome內核，致使的結果是，新版Opera再也不支持window.opera，並且跟隨Chrome瀏覽器支持window.chrome等系列Chrome特性，就連userAgent字樣也去了「opera」並直接套用Chromium/Blink內核的userAgent信息（好事是在尾部仍是保留了一句OPR/XX.0）

不過琢磨琢磨，問題總會獲得解決的。首先解決下比較容易解決的Firefox，其userAgent信息以下：

對比其它瀏覽器內核的ua信息它獨有「Firefox/XX.0」字樣，故咱們能夠這樣判斷：

rFirefox = /(firefox)\/([\w.]+)/;
matchBS = rFirefox.exec(ua);
if ((matchBS != null)&&(!(window.attachEvent))&&(!(window.chrome))&&(!(window.opera))) {
    //codes...
}

這裏還判斷了是否支持window.attachEvent 和 window.chrome、window.opera事件，是爲了防止其它非Firefox瀏覽器的假裝ua信息，但我認可這點很難作到盡善盡美。

接着是Safari，雖然Safari的ua信息含有safari字樣，但因爲谷歌的瀏覽器是蘋果瀏覽器內核WebKit的分支，致使Chrome的ua信息也含有safari字樣：

這種狀況只能「找不一樣」了，能夠看到Safari的ua信息在「Safari/...」以前連着一個「Version/...」，而Chrome的ua信息是沒有的，因此能夠這樣寫：

rSafari = /version\/([\w.]+).*(safari)/;
matchBS = rSafari.exec(ua);
if ((matchBS != null)&&(!(window.attachEvent))&&(!(window.chrome))&&(!(window.opera))) {
     //....
}

接着說Chrome和Opera，這裏比較頭疼的一點。。。。是Chrome的好基友Opera也開始使用了Chromium或Blink引擎，致使兩者ua信息以及對BOM的支持幾乎一致（這不廢話麼，內核都同樣了），但仍是能夠從ua找不一樣：

因而咱們能夠這樣寫（注意Opera也要兼顧舊版本，也就是使用Presto內核的狀況）：

rOpera = /(opera).+version\/([\w.]+)/; 
rNewOpera = /(opr)\/(.+)/;
rChrome = /(chrome)\/([\w.]+)/;
matchBS = rOpera.exec(ua);
if ((matchBS != null)&&(!(window.attachEvent))) {               //舊Opera識別
return { browser : matchBS[1] || "", version : matchBS[2] || "0" };
}
matchBS = rChrome.exec(ua);                   
if ((matchBS != null)&&(!!(window.chrome))&&(!(window.attachEvent))) {          //Chrome識別
   matchBS2 = rNewOpera.exec(ua);
   if(matchBS2 == null)                           //新Opera識別
   return { browser : matchBS[1] || "", version : matchBS[2] || "0" };
   else
   return { browser : "Opera", version : matchBS2[2] || "0" };
}

最後說下IE的識別吧，IE是個大坑（紅框部分是建議用於判斷的地方）：

由上圖可知，IE6/7從MSIE版本號直接判斷便可，從IE8開始多了個Trident信息，則IE8-IE11只需判斷Trident版本號。那麼咱們就能夠自行寫兩個判斷，先判斷是否IE——即ua信息是否包含了MSIE信息或者Trident信息（注意IE11已經移除了MSIE信息），接着再判斷是否IE7-或者IE8+ ：

rMsie = /(msie\s|trident\/7)([\w.]+)/;
rTrident = /(trident)\/([\w.]+)/;
matchBS = rMsie.exec(ua);
if (matchBS != null) {
matchBS2 = rTrident.exec(ua);
  if (matchBS2 != null){
  switch (matchBS2[2]){
  case "4.0": return { browser : "IE", version : "8" };break;
  case "5.0": return { browser : "IE", version : "9" };break;
  case "6.0": return { browser : "IE", version : "10" };break;
  case "7.0": return { browser : "IE", version : "11" };break;
  default:return { browser : "IE", version : "undefined" };
  }
  }
  else
  return { browser : "IE", version : matchBS[2] || "0" };
}

 

下面貼下所有代碼，可供參考：

<script type="text/javascript">
                var userAgent = navigator.userAgent, 
                rMsie = /(msie\s|trident\/7)([\w.]+)/, 
                rTrident = /(trident)\/([\w.]+)/, 
                rFirefox = /(firefox)\/([\w.]+)/, 
                rOpera = /(opera).+version\/([\w.]+)/, 
                rNewOpera = /(opr)\/(.+)/, 
                rChrome = /(chrome)\/([\w.]+)/, 
                rSafari = /version\/([\w.]+).*(safari)/;
                var matchBS,matchBS2;
                var browser;
                var version;
                var ua = userAgent.toLowerCase();
                var uaMatch = function(ua) {
                    matchBS = rMsie.exec(ua);
                    if (matchBS != null) {
                        matchBS2 = rTrident.exec(ua);
                        if (matchBS2 != null){
                            switch (matchBS2[2]){
                                case "4.0": return { browser : "IE", version : "8" };break;
                                case "5.0": return { browser : "IE", version : "9" };break;
                                case "6.0": return { browser : "IE", version : "10" };break;
                                case "7.0": return { browser : "IE", version : "11" };break;
                                default:return { browser : "IE", version : "undefined" };
                            }
                        }
                        else
                        return { browser : "IE", version : matchBS[2] || "0" };
                    }
                    matchBS = rFirefox.exec(ua);
                    if ((matchBS != null)&&(!(window.attachEvent))&&(!(window.chrome))&&(!(window.opera))) {
                        return { browser : matchBS[1] || "", version : matchBS[2] || "0" };
                    }
                    matchBS = rOpera.exec(ua);
                    if ((matchBS != null)&&(!(window.attachEvent))) {
                        return { browser : matchBS[1] || "", version : matchBS[2] || "0" };
                    }
                    matchBS = rChrome.exec(ua);
                    if ((matchBS != null)&&(!!(window.chrome))&&(!(window.attachEvent))) {
                        matchBS2 = rNewOpera.exec(ua);
                        if(matchBS2 == null)
                        return { browser : matchBS[1] || "", version : matchBS[2] || "0" };
                        else
                        return { browser : "Opera", version : matchBS2[2] || "0" };
                    }
                    matchBS = rSafari.exec(ua);
                    if ((matchBS != null)&&(!(window.attachEvent))&&(!(window.chrome))&&(!(window.opera))) {
                        return { browser : matchBS[2] || "", version : matchBS[1] || "0" };
                    }
                    if (matchBS != null) {
                        return { browser : "undefined", version : " browser" };
                    }
                }
                var browserMatch = uaMatch(userAgent.toLowerCase());
                if (browserMatch.browser) {
                    browser = browserMatch.browser;
                    version = browserMatch.version;
                }
                document.write(browser+version);        
</script>

不過仍是得說，識別各類版本的瀏覽器是項很是麻煩的事情，以上代碼能幫你順利應付大部分的狀況，但若是遇到某些特殊情景（好比瀏覽器假裝ua信息），就沒法識別瀏覽器具體版本了。