JS識別IE瀏覽器的各種版本的教程

2014/5/19 21:16:58  出處：本站整理   人氣：198次    字號：小  中  大

如IE10-的版本是依循常規只支持attachEvent而不支持addEventListener，但到了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.]+)/= /(opr)\/(.+)/= /(chrome)\/([\w.]+)/= ((matchBS != )&&(! { browser : matchBS[1] || "", version : matchBS[2] || "0"= ((matchBS != )&&(!!(window.chrome))&&(!=(matchBS2 ==  { browser : matchBS[1] || "", version : matchBS[2] || "0" { 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" }; }

 

 

擴展知識