用JS識別各版本瀏覽器

標籤：des   style   class   blog   c   code   

自昨天發了各瀏覽器核心介紹的隨筆，就閑不住了，想直接寫個JS來識別使用者所用瀏覽器版本。

寫著寫著卻發現很多坑爹的地方，比如IE10-的版本是依循常規只支援attachEvent而不支援addEventListener，但到了IE11，卻反過來只支援addEventListener而不支援attachEvent。光是這一點就可以判斷IE是個大坑，IE11的存在可能會導致之前你寫過的代碼出現錯亂。另如原本可用

var ieVersion = eval("‘‘+/*@cc_on"+" @[email protected]*/-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字樣，但由於Google的瀏覽器是蘋果瀏覽器核心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>

View Code

不過還是得說，識別各種版本的瀏覽器是項非常麻煩的事情，以上代碼能幫你順利應付大部分的情況，但如果遇到某些特殊情景（比如瀏覽器偽裝ua資訊），就無法識別瀏覽器具體版本了。

歡迎交流和探討~