超屌的js判斷ie版本方法

近有一個(gè)項(xiàng)目是以華為的響應(yīng)式效果為參考的，為了把項(xiàng)目做好，必然要把華為的源代碼重頭到尾過(guò)一遍，在切圖工作這已是家常便飯，當(dāng)中有幾點(diǎn)發(fā)現(xiàn)，華為是基于bootstrap布局，運(yùn)用了bootstrap的幻燈片組件，又進(jìn)行了一些二次方法添加改造，而這次個(gè)過(guò)程中又碰觸到了另外一個(gè)超屌的js判斷ie版本的解決方案，決定將它分享：

jQuery在1.9版本之前，提供了一個(gè)瀏覽器對(duì)象檢測(cè)的屬性$.browser，使用率極高。但是在1.9版本發(fā)布之后，大家鐘愛(ài)的這個(gè)屬性被jQuery無(wú)情的拋棄了。大家開(kāi)始著手尋找$.browser的替代方案。于是各種利用IE bug的檢測(cè)方法被搜了出來(lái)：

// shortest from a Russianvar ie=!-[1,]// Option from Dean Edwards:var ie=/*@cc_on!@*/false// Use the commented line:var ie//@cc_on=1// Variation (shorter variable):var ie='\v'=='v'// Option to Gareth Hayes (former record-holder):var ie=!+"\v1"

還有一些讀取navigator.userAgent的方式，在蘋(píng)果看來(lái)這些寫(xiě)法都不夠友好，也不容易記憶，在搜索和挑選之后，終于找到了一個(gè)容易理解且友好方便的寫(xiě)法！

解決方案

IE知道自身毛病很多，于是提供的一套官方的HTML hack方式：

<!--[if IE]>

// 全部IE版本可見(jiàn)

<![endif]-->

<!--[if IE 6]>

// IE6可見(jiàn)

<![endif]-->

依次等等。

這樣的寫(xiě)法在其它瀏覽器里，完全就是一坨注釋而直接遭到無(wú)視，但在IE里卻不會(huì)。IE會(huì)分析里面的提到的版本號(hào)，并根據(jù)版本號(hào)確定要不要解析里面的DOM元素和文本內(nèi)容。等一下！DOM元素？那豈不是可以使用js來(lái)獲取里面的DOM元素？反正誰(shuí)看到了，誰(shuí)就是IE！于是，國(guó)外大神就有了下面的寫(xiě)法：

var isIE=function(){ var b=document.createElement('b')

b.innerHTML=''

return b.getElementsByTagName('i').length===1}

這也太巧妙了！首先生成了一個(gè)b元素，設(shè)置它的innerHTML為一坨只有IE才認(rèn)識(shí)的注釋?zhuān)⑨尷镏挥幸粋€(gè)空的標(biāo)簽，然后讀取里面的出現(xiàn)的元素i的個(gè)數(shù)是不是等于1，是不是等于1，是不是等于1。。。。

在大蘋(píng)果看來(lái)，這樣的寫(xiě)法比其它任何一種都要好。至于為什么生成一個(gè)b元素并且里面寫(xiě)一個(gè)i元素而不是div或者strong，更多是考慮到前者字節(jié)量更小。

檢測(cè)各個(gè)IE版本的方法也就順理成章了：

var isIE6=function(){ var b=document.createElement('b')

b.innerHTML=''

return b.getElementsByTagName('i').length===1}// var isIE7// ...

更進(jìn)一步

在蘋(píng)果看來(lái)，還可以進(jìn)一步將版本號(hào)提取成參數(shù)，就能生成一個(gè)通用的檢測(cè)IE版本的函數(shù)了：

var isIE=function(ver){ var b=document.createElement('b')

b.innerHTML=''

return b.getElementsByTagName('i').length===1}if(isIE(6)){ // IE 6}// ...if(isIE(9)){ // IE 9}

這樣想檢測(cè)哪個(gè)版本都毫無(wú)壓力。但是，如果只想檢測(cè)是不是IE，而不關(guān)心瀏覽器版本，那只需要在調(diào)用函數(shù)的時(shí)候，不傳遞參數(shù)即可。

var ie=isIE()

最后依次貼下在各大瀏覽器里測(cè)試代碼的截圖。

alert('ie6:' + isIE(6) + '\n' + 'ie7:' + isIE(7) + '\n' + 'ie8:' + isIE(8) + '\n' + 'ie9:' + isIE(9) + '\n' + 'ie:' + isIE())

切圖網(wǎng)常年專(zhuān)注h5前端開(kāi)發(fā)技術(shù)，關(guān)注用戶體驗(yàn)，如果你對(duì)h5前端，響應(yīng)式，微場(chǎng)景等該興趣請(qǐng)加公眾微信賬號(hào)：qietuwang

釋不同的瀏覽器版本

(1)、支持所有的IE瀏覽器（不包括IE10標(biāo)準(zhǔn)模式）

<!--[if IE]>只有IE6,7,8,9瀏覽器顯示(IE10標(biāo)準(zhǔn)模式不支持)<![endif]-->

(2)、所有非IE瀏覽器（不包括IE10標(biāo)準(zhǔn)模式）

<!--[if !IE]>只有非IE瀏覽器顯示(不包括IE10)<![endif]-->

(3)、IE10瀏覽器

目前還沒(méi)有找到該版本瀏覽器的像<!--[if IE 9]>似的單獨(dú)注釋?zhuān)獻(xiàn)E10做得很不錯(cuò)了，就單單布局而言，頁(yè)面在IE10、FireFox、Chrome上的表現(xiàn)已經(jīng)沒(méi)有什么區(qū)別了。

(4)、IE9瀏覽器

<!--[if IE 9]>IE9瀏覽器顯示<hr/><![endif]-->

(5)、IE8瀏覽器

<!--[if IE 8]>IE8瀏覽器顯示<hr/><![endif]-->

(6)、IE7瀏覽器

<!--[if IE 7]>IE7瀏覽器顯示<hr/><![endif]-->

(7)、IE6瀏覽器

<!--[if IE 6]>IE6瀏覽器顯示<hr/><![endif]-->

(8)、IE10以下版本瀏覽器(不包括IE10)

<!--[if lt IE 10]>IE10以下版本瀏覽器顯示(不包括IE10)<hr/><![endif]-->

(9)、IE9及IE9以下版本瀏覽器(包括IE9)

<!--[if lte IE 9]>IE9及IE9以下版本瀏覽器顯示(包括IE9)<hr/><![endif]-->

(10)、IE6以上版本瀏覽器(不含IE6)

<!--[if gt IE 6]>IE6以上版本瀏覽器顯示(不含IE6)<hr/><![endif]-->

(11)、IE7及IE7以上版本瀏覽器

<!--[if gte IE 7]>IE7及IE7以上版本瀏覽器顯示(包含IE7)<hr/><![endif]-->

我們不可能為了兼容像上面那么寫(xiě)，把整頁(yè)的內(nèi)容分別寫(xiě)在不同的注釋塊內(nèi)。其實(shí)這里有兩種方法：

方法1：根據(jù)不同的瀏覽器版本，載入不同的css

如我們需要分別兼容IE6、7、8，我們可以這樣做

<!--[if IE 8]>
<link rel="stylesheet" type="text/css" href="ie8.cdd">
<![endif]-->
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="ie7.cdd">
<![endif]-->
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="ie6.cdd">
<![endif]-->

方法2：根據(jù)不同的瀏覽器版本，給html或body掛載不同的類(lèi)如

<!--[if lt IE 7 ]><html class="ie6" lang="zh-cn"><![endif]-->
<!--[if IE 7 ]><html class="ie7" lang="zh-cn"><![endif]-->
<!--[if IE 8 ]><html class="ie8" lang="zh-cn"><![endif]-->
<!--[if IE 9 ]><html class="ie9" lang="zh-cn"><![endif]-->

lt，lte，gt，gte 分別表示什么意思：

lt：小于當(dāng)前版本

lte：小于或等于當(dāng)前版本，包括本身

gt：大于當(dāng)前版本

gte：大于或等于當(dāng)前版本，包括本身

言

在前端開(kāi)發(fā)編寫(xiě)Javascript代碼的過(guò)程中，經(jīng)常要考慮不同瀏覽器之間的差異，找出兼容性方案。

今天這篇文章我們來(lái)看看兩個(gè)有意思的問(wèn)題，都是因?yàn)闉g覽器不同帶給我們理解上的差異。

本篇文章的測(cè)試主要以最新Chrome，F(xiàn)irefox和IE8為代表。

Javascript

函數(shù)聲明與函數(shù)表達(dá)式

函數(shù)標(biāo)識(shí)符

根據(jù)ECMAScript標(biāo)準(zhǔn)，變量名，函數(shù)方法名等標(biāo)識(shí)符只能包含數(shù)字，字母，'$'，'_'等，是不能包含點(diǎn)運(yùn)算符('.')的。

目前最新的Chrome，F(xiàn)irefox，Safari等瀏覽器都遵循這一原則，但是IE6，IE7，IE8卻不一樣，它們支持點(diǎn)運(yùn)算符來(lái)進(jìn)行函數(shù)方法命名。

我們將下面一段代碼在不同的瀏覽器中運(yùn)行測(cè)試。這段代碼是定義一個(gè)對(duì)象A，然后在prototype上定義一個(gè)變量b，b為一個(gè)Function，然后生成一個(gè)A的實(shí)例a，最后返回a.b的類(lèi)型。

測(cè)試代碼

首先是在Chrome瀏覽器中。

Chrome瀏覽器運(yùn)行結(jié)果

通過(guò)報(bào)的錯(cuò)誤，我們發(fā)現(xiàn)不支持點(diǎn)運(yùn)算符'.'操作。

然后在IE8中測(cè)試。

IE8測(cè)試結(jié)果

在IE8中測(cè)試后發(fā)現(xiàn)，輸出了function，證明b已經(jīng)明確定義為了對(duì)象A的一個(gè)屬性。

（吐槽一下：IE8的調(diào)試真的是相當(dāng)麻煩?。。。?/p>

函數(shù)表達(dá)式標(biāo)識(shí)符

根據(jù)ECMAScript標(biāo)準(zhǔn)，函數(shù)表達(dá)式的標(biāo)識(shí)符只能在函數(shù)體內(nèi)部訪問(wèn)，它的作用域只存在于該函數(shù)體內(nèi)部。

代碼

以上代碼中，b就是函數(shù)表達(dá)式的標(biāo)識(shí)符。

在Chrome等高級(jí)瀏覽器中，在外部是無(wú)法訪問(wèn)到b的，以下為測(cè)試結(jié)果。

Chrome測(cè)試結(jié)果

返回undefined，證明Chrome瀏覽器是遵循了ECMAScript規(guī)則的。

而在IE8中測(cè)試結(jié)果如下所示。

IE8測(cè)試結(jié)果

最后返回的結(jié)果是function，就證明IE8并沒(méi)有遵循ECMAScript規(guī)則。

解決方案

為了防止上述的問(wèn)題發(fā)生，請(qǐng)避免使用IE的這些不遵循規(guī)則的特性，保證瀏覽器的兼容性。

塊級(jí)函數(shù)聲明處理

什么是塊級(jí)函數(shù)聲明呢？我們先來(lái)看看下面這段代碼。

塊級(jí)函數(shù)聲明

就是在一段判斷語(yǔ)句中，滿足條件后才去定義函數(shù)，不滿足條件就不去定義函數(shù)。

如果在這段代碼后再去執(zhí)行zero方法，結(jié)果會(huì)有什么差異呢？

首先來(lái)看看在Chrome瀏覽器下的運(yùn)行結(jié)果。

Chrome運(yùn)行結(jié)果

從運(yùn)行結(jié)果來(lái)看，zero不是一個(gè)函數(shù)，說(shuō)明zero的聲明為生效。

然后看看IE8的運(yùn)行結(jié)果。

IE8運(yùn)行結(jié)果

通過(guò)運(yùn)行結(jié)果可以看出，在IE8中，即使變量variable不為true，方法zero仍然被成功定義。

對(duì)于塊級(jí)函數(shù)聲明問(wèn)題，是在ES6中新增的標(biāo)準(zhǔn)，在早期不支持ES6標(biāo)準(zhǔn)的瀏覽器中和IE8中都一樣，包括早期的Chrome和Firefox等高級(jí)瀏覽器。

解決方案

遇到IE8級(jí)以下版本的瀏覽器，就避免使用塊級(jí)函數(shù)聲明的處理。

結(jié)束語(yǔ)

今天這篇文章總結(jié)了兩個(gè)與函數(shù)聲明和函數(shù)表達(dá)式有關(guān)的瀏覽器兼容性問(wèn)題。在測(cè)試過(guò)程中發(fā)現(xiàn)IE瀏覽器真的是超級(jí)難用啊，而且有很多兼容性的問(wèn)題都是來(lái)自于IE，所以大家盡可能的遠(yuǎn)離IE吧。

在線咨詢

上一篇：Axure RP軟件怎么查看頁(yè)面源代碼教你兩種方法
下一篇：梅姨一個(gè)屈膝禮被瘋狂吐槽…… 皇室貴族的講究，真是很

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷(xiāo)服務(wù)商

超屌的js判斷ie版本方法

言

函數(shù)聲明與函數(shù)表達(dá)式

塊級(jí)函數(shù)聲明處理

結(jié)束語(yǔ)

您的項(xiàng)目需求