Rumah > hujung hadapan web > tutorial js > js中有关IE版本检测_javascript技巧

js中有关IE版本检测_javascript技巧

WBOY
Lepaskan: 2016-05-16 17:57:45
asal
1068 orang telah melayarinya

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

另外一种就是IE的条件注释,这篇有个比较详细的说明 http://www.jb51.net/article/29336.htm

复制代码 代码如下:



我测试的结果是这种形式是可用的。唯一需要注意的是


复制代码 代码如下:

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

以此类推,可以获得各个版本的信息,甚至可以添加gt,gte等,从而一次判定一类版本。
关于这种写法,有个例子就是:
复制代码 代码如下:






于是在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片段,用样式值来判定版本。
下面是最容易想到的形式,我测试发现这么确实可以,不过也发现了一个问题,看下面的一段代码:
复制代码 代码如下:

测试



在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兼容模式的问题还是别的什么原因,知道的请指教。
确认代码:
复制代码 代码如下:

原始

<script> <BR>var test = document.createElement('div'); <BR>test.innerHTML = '<span style="*color:red; _color:blue;">动态生成'; <BR>document.body.appendChild(test); <BR></script>

IE7结果:

IE6结果:

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

测试



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

按理来说,对于FF,Chrome/Safari、opera都可以利用-moz、-webkit、-o等私有前缀来辨别,不过对于属性的选取要斟酌,类似color是不行的。
这个检测方法旁门左道而已,未来版本或者其他浏览器是不是有这个bug也不确定,而且IE7的那个bug我还没有弄清楚,所以也就暂时知道可以这么做就可以了。
Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan