js中有關IE版本檢測

見得最多的就是檢測navigator.userAgent(這個可以面向所有瀏覽器,略過) 。

另外一種就是IE的條件注釋,這篇有個比較詳細的說明 http://www.jb51.net/article/29336.htm

復制代碼 代碼如下:
!--[if !IE]!--
script type="text/javascript"
alert(’非IE’)
/ script
!--![endif]--

我測試的結果是這種形式是可用的 。唯一需要注意的是!-- [if IE 8] 中’IE’和’8’中間的這個空白符是必須的,掉了就悲劇了 。

基于IE的條件注釋,變種版本就有幾種,
第一、類似下面的形式:
復制代碼 代碼如下:
!--[if IE 6]
input type="hidden" id="ieVersion" value="https://www.questions.com.cn/dnjc/6" /
![endif]--
!--[if IE 7]
input type="hidden" id="ieVersion" value="https://www.questions.com.cn/dnjc/7" /
![endif]--

復制代碼 代碼如下:
var ieVersion = (function(){ return document.getElementById(’ieVersion’)})();

以此類推,可以獲得各個版本的信息,甚至可以添加gt,gte等,從而一次判定一類版本 。
關于這種寫法,有個例子就是:
復制代碼 代碼如下:
!--[if IE 6]
html class="ie6"
![endif]--
!--[if IE 7]
html class="ie7"
![endif]--
!--[if !IE]!--
html!--![endif]--

于是在CSS里面就可以不用別的hack了,從而避免在IE里面多加載一次CSS ,
直接
復制代碼 代碼如下:
.ie6 xx{}
.ie7 xx{}
.ie8 xx{}
xx{}

第二、既然可以寫在頁面內,當然也可以JS來動態生成 。我google了一把 , 發現還真有人這么做的 。
文章地址如下:http://www.jb51.net/article/29337.htm,寫得還比較詳細,原理也很簡單 。
不過這樣的缺憾就是把條件注釋限定到JS上了,于CSS就是雞肋了 。
繼續,既然可以動態生成條件注釋來辨明IE版本,基于IE的CSS hack , 應該也可以動態生成一段html片段,用樣式值來判定版本 。
下面是最容易想到的形式,我測試發現這么確實可以,不過也發現了一個問題,看下面的一段代碼:
復制代碼 代碼如下:
div id="test_1"span style="color: red; color: #ff6600; color: yellow9; *color:green; _color:blue;"測試/span/div
script type="text/javascript"
var test_1 = document.getElementById(’test_1’);
var test_2 = document.createElement(’div’);
test_2.innerHTML = ’span style="color: red; color: #ff66000; color: yellow90; *color:green; _color:blue;"測試/span’;
console.log(’test_1:’test_1.firstChild.style.color’----’’test_2:’test_2.firstChild.style.color);
/script

在IE9下結果:LOG: test_1:yellow----test_2:yellow
在IE8下結果:LOG: test_1:#ff6600----test_2:#ff6600
在IE7下結果:LOG: test_1:green----test_2:blue
在IE6下結果:test_1:blue ----test_2:blue (IE6沒有console.log , 所以上面的console.log需要換成alert)

上面的問題大家應該看出來了,IE7下兩種情況不一致,不知道是我的IE7兼容模式的問題還是別的什么原因,知道的請指教 。
確認代碼:
復制代碼 代碼如下:
divspan style="*color:red; _color:blue;"原始/span/div
script
var test = document.createElement(’div’);
test.innerHTML = ’span style="*color:red; _color:blue;"動態生成/span’;
document.body.appendChild(test);
/script

IE7結果:
【js中有關IE版本檢測】

js中有關IE版本檢測

IE6結果:
js中有關IE版本檢測

基本原理和IE的條件注釋差不多,我們一次檢測color值就可以了,所以改變一下上面的例子就是:
復制代碼 代碼如下:
div id="test_1"span style="color: red; color: #ff6600; color: yellow9; *color:green; _color:blue;"測試/span/div
script type="text/javascript"
var test_1 = document.getElementById(’test_1’);
//var test_2 = document.createElement(’div’);
//test_2.innerHTML = ’span style="color: red; color: #ff66000; color: yellow90; *color:green; _color:blue;"測試/span’;
var c = test_1.firstChild.style.color;
alert(c==’red’?’other’:c==’yellow’?’IE9’:c==’#ff6600’?’IE8’:c==’green’?’IE7’:’IE6’);
/script

在IE9下結果:IE9
在IE8下結果:IE8
在IE7下結果:IE7
在IE6下結果:IE6

按理來說,對于FF,Chrome/Safari、opera都可以利用-moz、-webkit、-o等私有前綴來辨別 , 不過對于屬性的選取要斟酌,類似color是不行的 。
這個檢測方法旁門左道而已 , 未來版本或者其他瀏覽器是不是有這個bug也不確定,而且IE7的那個bug我還沒有弄清楚,所以也就暫時知道可以這么做就可以了 。您可能感興趣的文章:js:日期正則表達式及檢測檢測jQuery.js是否已加載的判斷代碼Js檢測判斷URL網址輸入是否正確JavaScript檢測上傳文件大小的方法javascript 檢測瀏覽器類型和版本的代碼javascript檢測瀏覽器的縮放狀態實現代碼javascript檢測對象中是否存在某個屬性判斷方法小結JavaScript快速檢測瀏覽器對CSS3特性的支持情況使用js檢測瀏覽器是否支持html5中的video標簽的方法Javascript中常用的檢測方法小結

相關經驗推薦