js中有關IE版本檢測

更新時間：2012年01月04日 16:54:04 作者：

javascript中經常用到IE版本的判定，實現(xiàn)特定需求的代碼。檢測瀏覽器雖然不是一個什么好的做法，但是有時候還是很必要的

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

另外一種就是IE的條件注釋，這篇有個比較詳細的說明 http://www.fzitv.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="6" /> 
<![endif]--> 
<!--[if IE 7]> 
<input type="hidden" id="ieVersion" value="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來動態(tài)生成。我google了一把，發(fā)現(xiàn)還真有人這么做的。
文章地址如下：http://www.fzitv.net/article/29337.htm，寫得還比較詳細，原理也很簡單。
不過這樣的缺憾就是把條件注釋限定到JS上了，于CSS就是雞肋了。
繼續(xù)，既然可以動態(tài)生成條件注釋來辨明IE版本，基于IE的CSS hack，應該也可以動態(tài)生成一段html片段，用樣式值來判定版本。
下面是最容易想到的形式，我測試發(fā)現(xiàn)這么確實可以，不過也發(fā)現(xiàn)了一個問題，看下面的一段代碼：

復制代碼代碼如下:

 
<div id="test_1"><span style="color: red; color: #ff6600\0; color: yellow\9\0; *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: #ff6600\\0; color: yellow\\9\\0; *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兼容模式的問題還是別的什么原因，知道的請指教。
確認代碼：

復制代碼代碼如下:

 
<div><span style="*color:red; _color:blue;">原始</span></div> 
<script> 
var test = document.createElement('div'); 
test.innerHTML = '<span style="*color:red; _color:blue;">動態(tài)生成</span>'; 
document.body.appendChild(test); 
</script> 

IE7結果：

IE6結果：

基本原理和IE的條件注釋差不多，我們一次檢測color值就可以了，所以改變一下上面的例子就是：

復制代碼代碼如下:

 
<div id="test_1"><span style="color: red; color: #ff6600\0; color: yellow\9\0; *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: #ff6600\\0; color: yellow\\9\\0; *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我還沒有弄清楚，所以也就暫時知道可以這么做就可以了。

您可能感興趣的文章: