js中有關(guān)IE版本檢測
更新時間:2012年01月04日 16:54:04 作者:
javascript中經(jīng)常用到IE版本的判定,實現(xiàn)特定需求的代碼。檢測瀏覽器雖然不是一個什么好的做法,但是有時候還是很必要的
見得最多的就是檢測navigator.userAgent(這個可以面向所有瀏覽器,略過)。
另外一種就是IE的條件注釋,這篇有個比較詳細的說明 http://chabaoo.cn/article/29336.htm
<!--[if !IE]><!-->
<script type="text/javascript">
alert('非IE')
</ script>
<!--<![endif]-->
我測試的結(jié)果是這種形式是可用的。唯一需要注意的是<!-- [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等,從而一次判定一類版本。
關(guān)于這種寫法,有個例子就是:
<!--[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{}
第二、既然可以寫在頁面內(nèi),當然也可以JS來動態(tài)生成。我google了一把,發(fā)現(xiàn)還真有人這么做的。
文章地址如下:http://chabaoo.cn/article/29337.htm,寫得還比較詳細,原理也很簡單。
不過這樣的缺憾就是把條件注釋限定到JS上了,于CSS就是雞肋了。
繼續(xù),既然可以動態(tài)生成條件注釋來辨明IE版本,基于IE的CSS hack,應(yīng)該也可以動態(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下結(jié)果:LOG: test_1:yellow----test_2:yellow
在IE8下結(jié)果:LOG: test_1:#ff6600----test_2:#ff6600
在IE7下結(jié)果:LOG: test_1:green----test_2:blue
在IE6下結(jié)果:test_1:blue ----test_2:blue (IE6沒有console.log,所以上面的console.log需要換成alert)
上面的問題大家應(yīng)該看出來了,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>
<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下結(jié)果:IE9
在IE8下結(jié)果:IE8
在IE7下結(jié)果:IE7
在IE6下結(jié)果:IE6
按理來說,對于FF,Chrome/Safari、opera都可以利用-moz、-webkit、-o等私有前綴來辨別,不過對于屬性的選取要斟酌,類似color是不行的。
這個檢測方法旁門左道而已,未來版本或者其他瀏覽器是不是有這個bug也不確定,而且IE7的那個bug我還沒有弄清楚,所以也就暫時知道可以這么做就可以了。
另外一種就是IE的條件注釋,這篇有個比較詳細的說明 http://chabaoo.cn/article/29336.htm
復制代碼 代碼如下:
<!--[if !IE]><!-->
<script type="text/javascript">
alert('非IE')
</ script>
<!--<![endif]-->
我測試的結(jié)果是這種形式是可用的。唯一需要注意的是<!-- [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等,從而一次判定一類版本。
關(guān)于這種寫法,有個例子就是:
復制代碼 代碼如下:
<!--[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{}
第二、既然可以寫在頁面內(nèi),當然也可以JS來動態(tài)生成。我google了一把,發(fā)現(xiàn)還真有人這么做的。
文章地址如下:http://chabaoo.cn/article/29337.htm,寫得還比較詳細,原理也很簡單。
不過這樣的缺憾就是把條件注釋限定到JS上了,于CSS就是雞肋了。
繼續(xù),既然可以動態(tài)生成條件注釋來辨明IE版本,基于IE的CSS hack,應(yīng)該也可以動態(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下結(jié)果:LOG: test_1:yellow----test_2:yellow
在IE8下結(jié)果:LOG: test_1:#ff6600----test_2:#ff6600
在IE7下結(jié)果:LOG: test_1:green----test_2:blue
在IE6下結(jié)果:test_1:blue ----test_2:blue (IE6沒有console.log,所以上面的console.log需要換成alert)
上面的問題大家應(yīng)該看出來了,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結(jié)果:
IE6結(jié)果:
復制代碼 代碼如下:
<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下結(jié)果:IE9
在IE8下結(jié)果:IE8
在IE7下結(jié)果:IE7
在IE6下結(jié)果:IE6
按理來說,對于FF,Chrome/Safari、opera都可以利用-moz、-webkit、-o等私有前綴來辨別,不過對于屬性的選取要斟酌,類似color是不行的。
這個檢測方法旁門左道而已,未來版本或者其他瀏覽器是不是有這個bug也不確定,而且IE7的那個bug我還沒有弄清楚,所以也就暫時知道可以這么做就可以了。
相關(guān)文章
JavaScript架構(gòu)前端不能沒有監(jiān)控系統(tǒng)原因
這篇文章主要為大家介紹了為什么前端不能沒有監(jiān)控系統(tǒng)的原因,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2022-06-06詳解js對象中屬性的兩種類型之數(shù)據(jù)屬性和訪問器屬性
在理解vue底層響應(yīng)式原理時,了解到,原來對象中的屬性,不單單從表面看起來那么簡單是key:value形式,而是還有隱藏的內(nèi)部特性,其中對象內(nèi)的屬性分為兩種類型的屬性:數(shù)據(jù)屬性和訪問器屬性,本文將給大家詳細介紹一下數(shù)據(jù)屬性和訪問器屬性,需要的朋友可以參考下2023-05-05js復制網(wǎng)頁內(nèi)容并兼容各主流瀏覽器的代碼
js 復制網(wǎng)頁內(nèi)容的方法代碼有很多不過要兼容各瀏覽器就不多了,下面有個不錯的方法,大家可以嘗試操作下2013-12-12