寫(xiě)著寫(xiě)著卻發(fā)現(xiàn)很多坑爹的地方,比如IE10-的版本是依循常規(guī)只支持attachEvent而不支持addEventListener,但到了IE11,
卻反過(guò)來(lái)只支持addEventListener而不支持attachEvent。光是這一點(diǎn)就可以判斷IE是個(gè)大坑,IE11的存在可能會(huì)導(dǎo)致之前你
寫(xiě)過(guò)的代碼出現(xiàn)錯(cuò)亂。另如原本可用
var ieVersion = eval("''+/*@cc_on"+" @_jscript_version@*/-0")*1
的嗅探腳本來(lái)判斷是否IE,如果值非0則表示為IE
瀏覽器,但到了IE11,也直接返回0了(即IE11不再識(shí)別@cc_on這個(gè)IE獨(dú)有
的條件編譯語(yǔ)句)。。。。
還有就是上篇文章提到的Opera自從去年就拋棄了自家的Presto內(nèi)核,轉(zhuǎn)而跟進(jìn)使用Chrome內(nèi)核,導(dǎo)致的結(jié)果是,新版
Opera不再支持window.opera,而且跟隨Chrome瀏覽器支持window.chrome等系列Chrome特性,就連userAgent字樣也去了“
opera”并直接套用Chromium/Blink內(nèi)核的userAgent信息(好事是在尾部還是保留了一句OPR/XX.0)
不過(guò)琢磨琢磨,問(wèn)題總會(huì)得到解決的。首先解決下比較容易解決的Firefox,其userAgent信息如下:
對(duì)比其它瀏覽器內(nèi)核的ua信息它獨(dú)有“Firefox/XX.0”字樣,故我們可以這樣判斷:
復(fù)制代碼
rFirefox = /(firefox)\/([\w.]+)/;
matchBS = rFirefox.exec(ua);
if ((matchBS != null)&&(!(window.attachEvent))&&(!(window.chrome))&&(!(window.opera))) {
//codes...
}
復(fù)制代碼
這里還判斷了是否支持window.attachEvent 和 window.chrome、window.opera事件,是為了防止其它非Firefox瀏覽器的偽裝
ua信息,但我承認(rèn)這點(diǎn)很難做到盡善盡美。
接著是Safari,雖然Safari的ua信息含有safari字樣,但由于谷歌的瀏覽器是蘋(píng)果瀏覽器內(nèi)核WebKit的分支,導(dǎo)致Chrome的
ua信息也含有safari字樣:
這種情況只能“找不同”了,可以看到Safari的ua信息在“Safari/...”之前連著一個(gè)“Version/...”,而Chrome的ua信息是沒(méi)有的,所
以可以這樣寫(xiě):
復(fù)制代碼
rSafari = /version\/([\w.]+).*(safari)/;
matchBS = rSafari.exec(ua);
if ((matchBS != null)&&(!(window.attachEvent))&&(!(window.chrome))&&(!(window.opera))) {
//....
}
復(fù)制代碼
接著說(shuō)Chrome和Opera,這里比較頭疼的一點(diǎn)。。。。是Chrome的好基友Opera也開(kāi)始使用了Chromium或Blink引擎,導(dǎo)致
二者ua信息以及對(duì)BOM的支持幾乎一致(這不廢話么,內(nèi)核都一樣了),但還是可以從ua找不同:
于是我們可以這樣寫(xiě)(注意Opera也要兼顧舊版本,也就是使用Presto內(nèi)核的情況):
復(fù)制代碼
rOpera = /(opera).+version\/([\w.]+)/;
rNewOpera = /(opr)\/(.+)/;
rChrome = /(chrome)\/([\w.]+)/;
matchBS = rOpera.exec(ua);
if ((matchBS != null)&&(!(window.attachEvent))) { //舊Opera識(shí)別
return { browser : matchBS[1] || "", version : matchBS[2] || "0" };
}
matchBS = rChrome.exec(ua);
if ((matchBS != null)&&(!!(window.chrome))&&(!(window.attachEvent))) { //Chrome識(shí)別
matchBS2 = rNewOpera.exec(ua);
if(matchBS2 == null) //新Opera識(shí)別
return { browser : matchBS[1] || "", version : matchBS[2] || "0" };
else
return { browser : "Opera", version : matchBS2[2] || "0" };
}
復(fù)制代碼
最后說(shuō)下IE的識(shí)別吧,IE是個(gè)大坑(紅框部分是建議用于判斷的地方):
由上圖可知,IE6/7從MSIE版本號(hào)直接判斷即可,從IE8開(kāi)始多了個(gè)Trident信息,則IE8-IE11只需判斷Trident版本號(hào)。那么我
們就可以自行寫(xiě)兩個(gè)判斷,先判斷是否IE——即ua信息是否包含了MSIE信息或者Trident信息(注意IE11已經(jīng)移除了MSIE信
息),接著再判斷是否IE7-或者IE8+ :
復(fù)制代碼
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" };
}
復(fù)制代碼
下面貼下全部代碼,可供參考:
<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>