國外大牛IE版本檢測!現(xiàn)在IE都到9了,IE檢測代碼
更新時間:2012年01月04日 16:46:59 作者:
有時會去看看國外大牛的一些代碼,并學習,引用,并感嘆大牛就是大牛,差距不是一點點,也在一點點的感嘆中慢慢拉進和大牛的距離
其實學習大牛源代碼是一種很好的進步,可以給你一種新的視野。
看到這篇大牛的IE版本檢測,只能是驚嘆加驚嘆。短短的代碼中所包含的內(nèi)容實在是太多了。
所以在這里決定來解讀大牛的源代碼,讓準備向大牛靠近并還在努力的IT同人們從中學習到更多的知識。
我們先來看看一個世界最短ie檢測代碼:
var isIE = !-[1,];
是不是很熟悉,但是有bug,就是不能檢測ie9,為什么呢?那是因為這是國外大牛在ie9出來之前利用ie對數(shù)組轉(zhuǎn)換的特性來完成的。ie9中已經(jīng)進行了修復(fù),所以在ie9中失效了,但是作為當時的我,還是感嘆+感嘆,大牛們對細節(jié)的研究和如此的深入(當時我也沉迷在如何用最短的代碼來實現(xiàn)一個功能和方法,不斷的修改+修改,可還是....這就是差距,差距)。
這段世界最短ie檢測的代碼我就不解讀和分析了,畢竟對于現(xiàn)在有bug了,不能向后兼容,我的重點是下面的ie完美檢測,理論上是向后兼容的,例如出來IE10,ok,用它,沒問題,再一次提現(xiàn)差距。
下面來看看源代碼先(我會在后面解讀大牛思想和代碼中的難點講解)
// ----------------------------------------------------------
// 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;
}());
一個很精辟的代碼,但可以完美檢測出ie的各個版,還可以一次按范圍檢測,在源碼的注釋中教練你怎么使用。
原理:
動態(tài)創(chuàng)建一個div,利用ie條件注釋來往里面插入一個i標簽,在來檢測i標簽是否添加來判斷是否是ie瀏覽器。在while中不斷循環(huán)來比對ie的版本。
下面我們來理解這段代碼:
var undef,
v = 3,
div = document.createElement('div'),
all = div.getElementsByTagName('i');
//這段好理解,聲明變量和創(chuàng)建一個div,獲取div中的i
div.innerHTML = '<!--[if gt IE ' + (++v) + ']><i></i><![endif]-->',
//這個就是核心,利用的ie條件注釋來完成,ie的條件注釋是向后兼容的,所以可以用這檢測以后出的ie10,如果下一個版本叫ie10的話。
關(guān)于ie條件注釋,大家可以自己在網(wǎng)上查找,很容易找到的。[if IE 7][if gt IE 7]有很多模式的,我這里就不講解這個條件注釋,做過web前端兼容的應(yīng)該對這還是比較了解的。
難點:
while (
div.innerHTML = '<!--[if gt IE ' + (++v) + ']><i></i><![endif]-->',
all[0]
);
what?while(表達式1,表達式2) 這是what?和我們學的while(表達式)不一樣?
小技巧,while中如果有多個表達式,以最后一個表達式作為跳出的判斷,前面的表達式,不管有多少個,都不會作為跳出的判斷,而是執(zhí)行里面的代碼。
例如:while(表達是1,表達是2,表達式3,表達式4) 只以表達式4的true或者false作為跳出判斷。
額滴神,還可以這樣,長見識了吧,趕快去試試,這就是大牛的代碼,只能驚嘆+驚嘆!
到這里就完了,短短幾行的代碼,是多么的優(yōu)雅。希望大家能從中學習到想要的知識和開闊你的視野。
看到這篇大牛的IE版本檢測,只能是驚嘆加驚嘆。短短的代碼中所包含的內(nèi)容實在是太多了。
所以在這里決定來解讀大牛的源代碼,讓準備向大牛靠近并還在努力的IT同人們從中學習到更多的知識。
我們先來看看一個世界最短ie檢測代碼:
復(fù)制代碼 代碼如下:
var isIE = !-[1,];
是不是很熟悉,但是有bug,就是不能檢測ie9,為什么呢?那是因為這是國外大牛在ie9出來之前利用ie對數(shù)組轉(zhuǎn)換的特性來完成的。ie9中已經(jīng)進行了修復(fù),所以在ie9中失效了,但是作為當時的我,還是感嘆+感嘆,大牛們對細節(jié)的研究和如此的深入(當時我也沉迷在如何用最短的代碼來實現(xiàn)一個功能和方法,不斷的修改+修改,可還是....這就是差距,差距)。
這段世界最短ie檢測的代碼我就不解讀和分析了,畢竟對于現(xiàn)在有bug了,不能向后兼容,我的重點是下面的ie完美檢測,理論上是向后兼容的,例如出來IE10,ok,用它,沒問題,再一次提現(xià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;
}());
一個很精辟的代碼,但可以完美檢測出ie的各個版,還可以一次按范圍檢測,在源碼的注釋中教練你怎么使用。
原理:
動態(tài)創(chuàng)建一個div,利用ie條件注釋來往里面插入一個i標簽,在來檢測i標簽是否添加來判斷是否是ie瀏覽器。在while中不斷循環(huán)來比對ie的版本。
下面我們來理解這段代碼:
復(fù)制代碼 代碼如下:
var undef,
v = 3,
div = document.createElement('div'),
all = div.getElementsByTagName('i');
//這段好理解,聲明變量和創(chuàng)建一個div,獲取div中的i
div.innerHTML = '<!--[if gt IE ' + (++v) + ']><i></i><![endif]-->',
//這個就是核心,利用的ie條件注釋來完成,ie的條件注釋是向后兼容的,所以可以用這檢測以后出的ie10,如果下一個版本叫ie10的話。
關(guān)于ie條件注釋,大家可以自己在網(wǎng)上查找,很容易找到的。[if IE 7][if gt IE 7]有很多模式的,我這里就不講解這個條件注釋,做過web前端兼容的應(yīng)該對這還是比較了解的。
難點:
復(fù)制代碼 代碼如下:
while (
div.innerHTML = '<!--[if gt IE ' + (++v) + ']><i></i><![endif]-->',
all[0]
);
what?while(表達式1,表達式2) 這是what?和我們學的while(表達式)不一樣?
小技巧,while中如果有多個表達式,以最后一個表達式作為跳出的判斷,前面的表達式,不管有多少個,都不會作為跳出的判斷,而是執(zhí)行里面的代碼。
例如:while(表達是1,表達是2,表達式3,表達式4) 只以表達式4的true或者false作為跳出判斷。
額滴神,還可以這樣,長見識了吧,趕快去試試,這就是大牛的代碼,只能驚嘆+驚嘆!
到這里就完了,短短幾行的代碼,是多么的優(yōu)雅。希望大家能從中學習到想要的知識和開闊你的視野。
您可能感興趣的文章:
相關(guān)文章
javascript document.referrer 用法
document對象的referrer屬性,返回導(dǎo)航到當前網(wǎng)頁的超鏈接所在網(wǎng)頁的URL。2009-04-04js實現(xiàn)字符串和數(shù)組之間相互轉(zhuǎn)換操作
這篇文章主要介紹了js實現(xiàn)字符串和數(shù)組之間相互轉(zhuǎn)換操作的相關(guān)資料,感興趣的小伙伴們可以參考一下2016-01-01如何利用微信小程序獲取OneNet平臺數(shù)據(jù)顯示溫濕度
最近在工作中遇到了一個需求,需要顯示溫濕度,網(wǎng)上找了一圈沒找到解決方法,所以只能自己寫一個,這篇文章主要給大家介紹了關(guān)于如何利用微信小程序獲取OneNet平臺數(shù)據(jù)顯示溫濕度的相關(guān)資料,需要的朋友可以參考下2022-03-03如何動態(tài)的導(dǎo)入js文件具體該怎么實現(xiàn)
如何需要進行動態(tài)的導(dǎo)入js文件,那么下面的方法或許可以幫助到大家2014-01-01