js中有关IE版本检测

【字号: 日期:2024-05-27浏览:10作者:雯心
见得最多的就是检测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' value='6' / ![endif]-- !--[if IE 7] input type='hidden' value='7' / ![endif]-- 复制代码 代码如下: var ieVersion = (function(){ return document.getElementById(’ieVersion’)})(); 以此类推,可以获得各个版本的信息,甚至可以添加gt,gte等,从而一次判定一类版本。 关于这种写法,有个例子就是: 复制代码 代码如下: !--[if IE 6] html ![endif]-- !--[if IE 7] html ![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版本检测

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中常用的检测方法小结
标签: JavaScript
相关文章: