java 检测ie版本更新_[Java教程]有关IE版本检测_星空网

有关IE版本检测

2012-01-01

0

PS:检测浏览器虽然不是一个什么好的做法,但是有时候还是很必要的。

见得最多的就是检测navigator.userAgent(这个可以面向所有浏览器,略过)。

另外一种就是IE的条件注释,这篇有个比较详细的说明

http://www.cnblogs.com/JustinYoung/archive/2009/03/02/ie-jiaojianzhushi.html,注意看它下面的回复

var ieVersion = (function(){ return document.getElementById('ieVersion')})();

以此类推,可以获得各个版本的信息,甚至可以添加gt,gte等,从而一次判定一类版本。

关于这种写法,有个例子就是:

于是在CSS里面就可以不用别的hack了,从而避免在IE里面多加载一次CSS,

直接.ie6 xx{}.ie7 xx{}.ie8 xx{}xx{}

第二、既然可以写在页面内,当然也可以JS来动态生成。我google了一把,发现还真有人这么做的。

文章地址如下:http://www.cnblogs.com/bruceli/archive/2011/04/11/2012470.html,写得还比较详细,原理也很简单。

不过这样的缺憾就是把条件注释限定到JS上了,于CSS就是鸡肋了。

继续,既然可以动态生成条件注释来辨明IE版本,基于IE的CSS hack,应该也可以动态生成一段html片段,用样式值来判定版本。

下面是最容易想到的形式,我测试发现这么确实可以,不过也发现了一个问题,看下面的一段代码:

测试

var test_1 = document.getElementById('test_1');

var test_2 = document.createElement('div');

test_2.innerHTML = '测试';

console.log('test_1:' + test_1.firstChild.style.color + '----' + 'test_2:' + test_2.firstChild.style.color);

在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兼容模式的问题还是别的什么原因,知道的请指教。

确认代码:

原始

var test = document.createElement('div');

test.innerHTML = '动态生成';

document.body.appendChild(test);

IE7结果:

bc91bb04e6e9c61e24c974e4440db8f2.gif

IE6结果:

bc91bb04e6e9c61e24c974e4440db8f2.gif

基本原理和IE的条件注释差不多,我们一次检测color值就可以了,所以改变一下上面的例子就是:

测试

var test_1 = document.getElementById('test_1');

//var test_2 = document.createElement('div');

//test_2.innerHTML = '测试';

var c = test_1.firstChild.style.color;

alert(c=='red'?'other':c=='yellow'?'IE9':c=='#ff6600'?'IE8':c=='green'?'IE7':'IE6');

在IE9下结果:IE9

在IE8下结果:IE8

在IE7下结果:IE7

在IE6下结果:IE6

按理来说,对于FF,Chrome/Safari、opera都可以利用-moz、-webkit、-o等私有前缀来辨别,不过对于属性的选取要斟酌,类似color是不行的。

这个检测方法旁门左道而已,未来版本或者其他浏览器是不是有这个bug也不确定,而且IE7的那个bug我还没有弄清楚,所以也就暂时知道可以这么做就可以了。

转载请注明来自小西山子【http://www.cnblogs.com/xesam/】

本文地址:http://www.cnblogs.com/xesam/archive/2012/01/01/2309483.html

0

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们:admin@shaoqun.com。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值