前端开发中常常会和IE打交道,本文将介绍如何使用javascript来检测IE浏览器的每个版本,包括IE11、IE10、IE9、IE8、IE7、IE6等更旧浏览器,并且还可以叠加,如IE10及以下,IE8及以下,IE6及以下,IE11或者非IE浏览器。文章来自国外文章。
一般来说,我们是建议使用条件注释来替换浏览器检测的方法。本文所讲的技术仅仅在条件注释无法实现,或者需要检测一个bug。
IE条件注释:
<!--[if lt IE 7 ]> <html class="ie6"> <![endif]--><!--[if IE 7 ]> <html class="ie7"> <![endif]--><!--[if IE 8 ]> <html class="ie8"> <![endif]--><!--[if IE 9 ]> <html class="ie9"> <![endif]--><!--[if (gt IE 9)|!(IE)]><!--> <html class=""> <!--<![endif]-->
IE10及其以下的浏览器可以通过检测存在非标准的 document.all 对象来区分。
除了上面的特性外,每个IE浏览器还有各自的支持对象
IE版本 | 支持的标准对象 |
---|---|
10+ | window.atob |
9+ | document.addEventListener |
8+ | document.querySelector |
7+ | window.XMLHttpRequest |
6+ | document.compatMode |
通过上面列出的这些不同IE浏览器版本的检测特性,我们可以组合得到某个特定的IE版本
例如下面的这些组合
IE版本 | 支持的状态 |
---|---|
10及以下 | document.all |
9及以下 | document.all && !window.atob |
8及以下 | document.all && !document.addEventListener |
7及以下 | document.all && !document.querySelector |
6及以下 | document.all && !window.XMLHttpRequest |
5.x | document.all && !document.compatMode |
下面的条件代码只会在IE7及一下浏览器中运行
if (document.all && !document.querySelector) {alert('IE7 or lower');}
下面这一个只会运行在IE8中,并且不支持IE7或者IE9:
if (document.all && document.querySelector && !document.addEventListener) {alert('IE8');}
下面的条件代码当浏览器为IE11+ 或者非IE时为真
if (!document.all) {alert('IE11+ or not IE');}
由于IE11并不再支持条件注释了
检测不同的IE版本对应不同的javascript引擎
IE版本 | 10 | 9 | 8 | 7 | 6 |
---|---|---|---|---|---|
JavaScript引擎版本 | 10 | 9 | 5.8 | 5.7 | 5.6 |
条件注释
例如下面的代码结合条件注释和JS代码:
html代码:
<script>var ie = false;</script><!--[if lte IE 7]><script>ie = 7;</script><![endif]-->
在JavaScript文件中:
if (7 === ie) {alert('IE7 or lower');}
或者是:
var test = document.createElement('div');test.innerHTML = '<!--[if lte IE 7]>1<![endif]-->';if ('1' === test.innerHTML) {alert('IE7 or lower');}
相比较使用全局方法,这种方法可能就不优雅并且速度也不是很快。
IE11或者非IE
if (!document.all) {alert('IE11+ or not IE');}
IE10
if (document.all && document.addEventListener && window.atob) {alert('IE10');}
IE9
if (document.all && document.addEventListener && !window.atob) {alert('IE9');}
IE8上面已经给出
if (document.all && document.querySelector && !document.addEventListener) {alert('IE8');}
IE7
if (document.all && window.XMLHttpRequest && !document.querySelector) {alert('IE7');}
IE6
if (document.all && document.compatMode && !window.XMLHttpRequest) {alert('IE6');}
一起学吧部分文章转载自互联网,供读者交流和学习,若有涉及作者版权等问题请及时与我们联系,以便更正、删除或按规定办理。感谢所有提供资讯的网站,欢迎各类媒体与一起学吧进行文章共享合作。