快捷導(dǎo)航

國(guó)外大牛IE版本檢測(cè)！現(xiàn)在IE都到9了，IE檢測(cè)代碼

更新時(shí)間：2012年01月04日 16:46:59 作者：

有時(shí)會(huì)去看看國(guó)外大牛的一些代碼，并學(xué)習(xí)，引用，并感嘆大牛就是大牛，差距不是一點(diǎn)點(diǎn)，也在一點(diǎn)點(diǎn)的感嘆中慢慢拉進(jìn)和大牛的距離

其實(shí)學(xué)習(xí)大牛源代碼是一種很好的進(jìn)步，可以給你一種新的視野。
看到這篇大牛的IE版本檢測(cè)，只能是驚嘆加驚嘆。短短的代碼中所包含的內(nèi)容實(shí)在是太多了。
所以在這里決定來(lái)解讀大牛的源代碼，讓準(zhǔn)備向大?？拷⑦€在努力的IT同人們從中學(xué)習(xí)到更多的知識(shí)。

我們先來(lái)看看一個(gè)世界最短ie檢測(cè)代碼：

復(fù)制代碼代碼如下:

var isIE = !-[1,];

是不是很熟悉，但是有bug，就是不能檢測(cè)ie9，為什么呢？那是因?yàn)檫@是國(guó)外大牛在ie9出來(lái)之前利用ie對(duì)數(shù)組轉(zhuǎn)換的特性來(lái)完成的。ie9中已經(jīng)進(jìn)行了修復(fù)，所以在ie9中失效了，但是作為當(dāng)時(shí)的我，還是感嘆+感嘆，大牛們對(duì)細(xì)節(jié)的研究和如此的深入（當(dāng)時(shí)我也沉迷在如何用最短的代碼來(lái)實(shí)現(xiàn)一個(gè)功能和方法，不斷的修改+修改，可還是....這就是差距，差距）。
這段世界最短ie檢測(cè)的代碼我就不解讀和分析了，畢竟對(duì)于現(xiàn)在有bug了，不能向后兼容，我的重點(diǎn)是下面的ie完美檢測(cè)，理論上是向后兼容的，例如出來(lái)IE10，ok，用它，沒問題，再一次提現(xiàn)差距。

下面來(lái)看看源代碼先（我會(huì)在后面解讀大牛思想和代碼中的難點(diǎn)講解）

復(fù)制代碼代碼如下:

 
// ---------------------------------------------------------- 
// A short snippet for detecting versions of IE in JavaScript 
// without resorting to user-agent sniffing 
// ---------------------------------------------------------- 
// If you're not in IE (or IE version is less than 5) then: 
// ie === undefined 
// If you're in IE (>=5) then you can determine which version: 
// ie === 7; // IE7 
// Thus, to detect IE: 
// if (ie) {} 
// And to detect the version: 
// ie === 6 // IE6 
// ie > 7 // IE8, IE9 ... 
// ie < 9 // Anything less than IE9 
// ---------------------------------------------------------- 
// UPDATE: Now using Live NodeList idea from @jdalton 
var ie = (function(){ 
var undef, 
v = 3, 
div = document.createElement('div'), 
all = div.getElementsByTagName('i'); 
while ( 
div.innerHTML = '<!--[if gt IE ' + (++v) + ']><i></i><![endif]-->', 
all[0] 
); 
return v > 4 ? v : undef; 
}()); 

一個(gè)很精辟的代碼，但可以完美檢測(cè)出ie的各個(gè)版，還可以一次按范圍檢測(cè)，在源碼的注釋中教練你怎么使用。
原理：
動(dòng)態(tài)創(chuàng)建一個(gè)div，利用ie條件注釋來(lái)往里面插入一個(gè)i標(biāo)簽，在來(lái)檢測(cè)i標(biāo)簽是否添加來(lái)判斷是否是ie瀏覽器。在while中不斷循環(huán)來(lái)比對(duì)ie的版本。
下面我們來(lái)理解這段代碼：

復(fù)制代碼代碼如下:

 
var undef, 
v = 3, 
div = document.createElement('div'), 
all = div.getElementsByTagName('i'); 
//這段好理解，聲明變量和創(chuàng)建一個(gè)div，獲取div中的i 
div.innerHTML = '<!--[if gt IE ' + (++v) + ']><i></i><![endif]-->', 
//這個(gè)就是核心，利用的ie條件注釋來(lái)完成，ie的條件注釋是向后兼容的，所以可以用這檢測(cè)以后出的ie10，如果下一個(gè)版本叫ie10的話。 

關(guān)于ie條件注釋，大家可以自己在網(wǎng)上查找，很容易找到的。[if IE 7][if gt IE 7]有很多模式的，我這里就不講解這個(gè)條件注釋，做過web前端兼容的應(yīng)該對(duì)這還是比較了解的。

難點(diǎn)：

復(fù)制代碼代碼如下:

 
while ( 
div.innerHTML = '<!--[if gt IE ' + (++v) + ']><i></i><![endif]-->', 
all[0] 
); 

what?while（表達(dá)式1，表達(dá)式2）這是what？和我們學(xué)的while（表達(dá)式）不一樣？
小技巧，while中如果有多個(gè)表達(dá)式，以最后一個(gè)表達(dá)式作為跳出的判斷，前面的表達(dá)式，不管有多少個(gè)，都不會(huì)作為跳出的判斷，而是執(zhí)行里面的代碼。
例如：while（表達(dá)是1，表達(dá)是2，表達(dá)式3，表達(dá)式4）只以表達(dá)式4的true或者false作為跳出判斷。
額滴神，還可以這樣，長(zhǎng)見識(shí)了吧，趕快去試試，這就是大牛的代碼，只能驚嘆+驚嘆！
到這里就完了，短短幾行的代碼，是多么的優(yōu)雅。希望大家能從中學(xué)習(xí)到想要的知識(shí)和開闊你的視野。

您可能感興趣的文章: