標題這樣子,是為了吸引眼球,至于是不是 James?Padolsey原創的方法,網上是這么流傳的就是了。菜鳥習作,寫的不好,請輕拍。如果錯誤,請指出,感謝。
正題:
IE瀏覽器釘子戶不斷,IE 6像個老不死的一樣存活在世界上,有人說:主要是因為chinese多。
我們現在開發網站都不針對IE6,需要針對的話得增加項目經費,畢竟IE6及其以下的css變現比較坑爹。
因此,多了下面這個函數,提醒客戶不要在IE6及其以下版本進行瀏覽網站。
請看
< html > < head > < script type ="text/javascript" > 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 }()); function is_ie(){ if ( ! ie) alert( " 您當前使用非Microsoft Internet Explorer. " ); else if (ie <= 6 ) alert( " 您當前使用的瀏覽器版本過低。為獲取良好的用戶體驗,\n請選擇 IE 7.0 及其以上版本的Microsoft Internet Explorer. " );
}//一樓 Jefft ? 評論說漏了一半大括號,現在補充了,多謝了。
</ script >
</ head > < body onload ="is_ie()" > </ body > </ html >
這算是最簡單又最高高效的IE判別方法了。不過,大部分人看不懂。
下面解析下為什么這樣子:我的理解,如有錯誤,敬請指出,共同學習,多謝。
首先怎么調用,我就不講了,如果不是IE,直接將ie賦值為undef的值,就是undefined,現在直接講講這貨的代碼塊里面這個吧。
while ( div.innerHTML = ' <!-- [if gt IE ' + (++v) + ']><i></i><![endif] --> ', all[0] ) ;
這段代碼。聽巧妙的用到了逗號表達式,逗號表達式就是在表達式中,無論什么情況,返回最后一個子表達式的值,在這里就是返回all[0]的值了。
前面的div的賦值,為什么要放在這里,是因為這樣子才能保證每次循環都能賦值,原創者這樣寫的話,是為了精簡,這段代碼,已經不能再精簡了。
其實,能改成另外一種符合常人思維的形式。如下
do { div.innerHTML = ' <!-- [if gt IE ' + (++v) + ']><i></i><![endif] --> '; }while(all[0])
改成這樣子,while循環應該能看懂了吧?
其實不然,畢竟控制循環的變量很難理解對吧。
首先我們測試一下,就在這個while循環的下面,寫上 alert(all[0]),
如
do { div.innerHTML = ' <!-- [if gt IE ' + (++v) + ']><i></i><![endif] --> '; }while(all[0]) alert(all[0])
你會發現,警告都是 undefined 。
但是,如果將這個寫在while循環里面,你會發現,最后的那次警告必然是undefined ,之前的都是object(IEtester下面),非IE瀏覽器的話,只有一個警告,為undefined。代碼如下,
do { div.innerHTML = ' <!-- [if gt IE ' + (++v) + ']><i></i><![endif] --> '; alert(all[0]) }while(all[0])
說道這里,大家應該知道用什么變量控制while循環的吧。
然后講講為什么all[0]會被賦值成為這樣。下面根據w3c標準來講講看。
因為
getElementsByTagName這個函數返回的是一個指向
NodeList類型,請看
getElementsByTagName
而當
div進行了重新賦值之后,應為NodeList 是活動的(目測這么翻譯,摘自?
NodeList
?objects in the DOM are?
live
. 摘自
Interface NodeList
),所以整個NodeList的對象集合也就發生改變。請看
live
?。
因此,all每次指向的東西都是不變的,變的是NodeList,all[0]指向的是NodeList的第一個 i 元素,也因此發生改變。
然后講講,為什么通過這樣子的判斷能判斷出all[0]到底是object還是undefined呢?
原因很簡單,就是,非IE瀏覽器不認識這樣的條件注釋。IE瀏覽器也不認不能相對應的那些條件注釋。
下面是部分條件注釋寫法。
<!-- [if IE]><i>您使用的是IE瀏覽器。</i><![endif] --> <!-- [if IE 6]><i>歡迎使用Internet Explorer 6</i><![endif] --> <!-- [if !(IE 6)]><i>您正在使用的不是 IE6。</i><![endif] -->
太多,我就不寫出來,詳細規則請看 微軟官方 。
到了這里,大家應該大概了解了吧。
估計現在大家看我這篇文章的時候,用的都不是IE,那就舉一個是IE的例子。
<!-- [if IE]><i>您使用的不是IE瀏覽器。</i><![endif] -->
如果是IE瀏覽器,那么這段東西里面的<i></i>標簽就能被 IE瀏覽器當正常的DOM元素。
如果不是IE瀏覽器,那么“[if IE]><i>您使用的不是IE瀏覽器。</i><![endif]”整一句都會被當場注釋掉了。至于 [if !IE],目前來說,還是不能被非IE正確判別。
講到這里,大家還不懂的話,那么我這篇文章寫得不好。抱歉浪費您的時間來看了。
更多文章、技術交流、商務合作、聯系博主
微信掃碼或搜索:z360901061

微信掃一掃加我為好友
QQ號聯系: 360901061
您的支持是博主寫作最大的動力,如果您喜歡我的文章,感覺我的文章對您有幫助,請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧,狠狠點擊下面給點支持吧,站長非常感激您!手機微信長按不能支付解決辦法:請將微信支付二維碼保存到相冊,切換到微信,然后點擊微信右上角掃一掃功能,選擇支付二維碼完成支付。
【本文對您有幫助就好】元
