預備知識:NodeList的實時性
通過 document.getElementsByTagName,document.forms ,document.images 等方法獲取到nodelist以后 里面的內容會適時的更新 這一點區別與array
我們利用它和條件注釋來檢測oldIE的版本
我認為 這是最靠譜的方法
--------------------------------華麗的分割線 請聽我娓娓道來------------------------------------
搞前端的一大痛苦就是要搞定各個瀏覽器. 在這個問題上最牛逼最煩最裝逼最可惡的要是ie大哥了.
不是ie的manager吃白飯,ie受制於操作系統的限制,不能隨便升級 . ie永遠做不了”版本帝”
但是ie9以后速度就很快了. win8.1上ie啟動速度不亞於chrome
"瀏覽器能力檢測優於瀏覽器檢測”
if(!!document.addEventListener)//能力檢測 { alert('我可以通過document.addEventListener添加事件') }
業界公認的觀點.
但是有時候還是避免不了瀏覽器的檢測 今天咱來說說ie大哥的檢測
普遍的檢測方法有以下幾種
- userAgent
你的代碼里 是不是有這樣一句
var isIE6 = window.navigator.userAgent.indexOf('IE 6') > 0; // O(∩_∩)O哈哈~
我感覺這種方法最萌了
通常情況下 他不會有什么問題 但是看上去非常的屌絲(個人意見)
而且userAgent 這個屬性我們可以更改的 百度一下 “更改useragent”
2. 怪癖檢測
var isIE=!!window.ActiveXObject;
var isIE6=isIE&&!window.XMLHttpRequest;
var isIE8=isIE&&!!document.documentMode;
var isIE7=isIE&&!isIE6&&!isIE8;
通常我們僅支持到ie6 這樣的代碼到ie5下妥妥的掛掉
3.條件注釋
varisIE6=false;
document.write("<!--[iflte IE6]><script>isIE6=true;</scr"+"ipt><![endif]-->");
if(isIE6){
alert('你當前的瀏覽器是IE6或者以下');
}
這樣的方法很穩定 但是不優雅 而且寫入了dom元素
小弟提供一種方法大家參考一下
咔咔上代碼:
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>IEVersion</title> <script> var IEVersion = (function () { //返回結果 var result = { isIE: false, //是否ie version: -1 //版本號 } //#region ie4_9 var _version = 3;//ie版本號 臨時的 var ie4_9 = false; var odiv = document.createElement('div'); /* 目標元素 這個元素不需要append 在這個元素內插入ie條件注釋 注釋內包含一個標簽 inner_element */ var inner_element = odiv.getElementsByTagName('i'); while (odiv.innerHTML = '<!--[if gt IE ' + (++_version) + ']><i></i><![endif]-->', inner_element[0]) { ie4_9 = true; } //#endregion if (ie4_9 && (_version > 3 && _version <= 9)) { result = { isIE: true, version: _version }; } else if (document.all) { result = { isIE: true, version: 10 }; } else if ("ActiveXObject" in window) { result = { isIE: true, version: 11 }; } return result; })(); </script> <script> if (IEVersion.isIE) { alert(IEVersion.version); } </script> </head> <body> <!--[if IE 7]>所謂的雙核瀏覽器的兼容模式會顯示這個 因為他們跑的是ie7模式<![endif]--> </body> </html>
ps :
ie4-9 用條件注釋來檢測 新建的dom元素不需要插入到頁面中
ie10不支持條件注釋 但是ie10 支持document.all
ie11 就用("ActiveXObject" in window)來檢測一下吧
有么問題歡迎大家討論 O(∩_∩)O哈哈~