用JavaScript检测IE浏览器版本
前端开发中常常会和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');
}
其他方法检测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');
}
相比较使用全局方法,这种方法可能就不优雅并且速度也不是很快。
更进一步
还可以进一步将版本号提取成参数,就能生成一个通用的检测IE版本的函数了:
var isIE = function(ver){var b = document.createElement('b')b.innerHTML = '<!--[if IE ' + ver + ']>1<![endif]-->'return b.innerHTML === 1 } if(isIE(6)){// IE 6 } // ... if(isIE(9)){// IE 9 }
这样想检测哪个版本都毫无压力。但是,如果只想检测是不是IE,而不关心浏览器版本,那只需要在调用函数的时候,不传递参数即可。
var ie = isIE()
最后依次贴下在各大浏览器里测试代码的截图。
alert('ie6:' + isIE(6) + '\n' + 'ie7:' + isIE(7) + '\n' + 'ie8:' + isIE(8) + '\n' + 'ie9:' + isIE(9) + '\n' + 'ie:' + isIE())
PS:这样性感的写法让其他又要检测userAgent又要匹配版本号的方法黯然失色。
IE版本代码总结
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');
}
检测IE版本
var win = window;
var doc = win.document;
var input = doc.createElement ("input");var ie = (function (){
//"!win.ActiveXObject" is evaluated to true in IE11
if (win.ActiveXObject === undefined) return null;
if (!win.XMLHttpRequest) return 6;
if (!doc.querySelector) return 7;
if (!doc.addEventListener) return 8;
if (!win.atob) return 9;
//"!doc.body.dataset" is faster but the body is null when the DOM is not
//ready. Anyway, an input tag needs to be created to check if IE is being
//emulated
if (!input.dataset) return 10;
return 11;
})();
用JavaScript检测IE浏览器版本相关推荐
- vue项目检测IE浏览器版本,版本太低给出提示
在index.html 文件的header标签内加入: <script type="text/javascript">(function(window) {var th ...
- javascript检测各种浏览器型号和版本、检测是否支持flash并显示版本
对于前端来说浏览器的型号版本,各个浏览器的兼容是一个不可忽视的问题.下面本人详细罗列了测试方法.请复制代码新建html文件复制后访问.一目了然. 最后富有罗列的一些各个不同浏览器的版本号,用于数据参考 ...
- javascript判断常用浏览器版本和类型兼容处理
根据项目需求具体设置,仅做参考 <!DOCTYPE html> <html><head><title>请升级您的浏览器</title>< ...
- javascript 判断当前浏览器版本
var xmlhttp; if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safarialert(" ...
- 如何查看IE浏览器版本?在线检测IE版本号
虽然IE浏览器在全球使用率是最高的,但是仍然有部分用户并不知道IE浏览器是什么?所以对于自己使用的桌面上那个 e 图标的软件也不知道是什么版本的.当然,大部分情况我们也没有必要去知道自己使用的IE浏览 ...
- javascript检测浏览器是否需要升级版本和提示
以vue3+elementPlus为例,可能涉及低版本浏览器的检测和提示 1.获取浏览器版本Func function getBrowserVersion(browserType, UserAgent ...
- userAgent,JS用户代理检测——判断浏览器内核、浏览器、浏览器平台、windows操作系统版本、移动设备、游戏系统
1.识别浏览器呈现引擎 为了不在全局作用域中添加多余变量,这里使用单例模式(什么是单例模式?)来封装检测脚本.检测脚本的基本代码如下所示: 1 var client = function() { 2 ...
- 如何用JavaScript判断客户端浏览器是否安装了Flash插件,及其版本
注:后来知道有个swfobject的东西专门做这件事情! <SCRIPT LANGUAGE="JavaScript"> <!-- var swf = n ...
- 检测浏览器版本并升级jQuery插件
2019独角兽企业重金招聘Python工程师标准>>> 前言 因为项目使用的是angular.js1.4,但从1.2开始angular对IE9以下的内核不再支持了.而国内还有需要用户 ...
- 检测浏览器版本(综合整理)
浏览器版本号检测 本文检测部分来自于Missyouzhang的专栏 浏览器的navigator.userAgent来自于网络 完整的用户代理字符串检测脚本来自于高程3P242 浏览器的navigato ...
最新文章
- 5.3Role和Claims授权「深入浅出ASP.NET Core系列」
- 超哥笔记--linux准备知识(1)
- PHP学习笔记(一):理解匿名函数与Closure
- win7远程桌面连接不上,解决办法
- 报表怎样实现滚动的公告效果?
- socket网络编程--epoll小结
- php mysql博客构架_微博项目总结数据表
- 如何在ps中调整文字的行距和间距_Wps如何调整文字字符的间距
- Java并发笔记-未完待续待详解
- android5.1蓝牙反向控制(Avrcp协议)流程
- 系统学习机器学习之神经网络(五) --ART
- H3C 路由过滤与路由引入
- 网页设计中常用的HTML代码
- linux device or,Linux rm -rf 之rm: cannot remove `linux': Device or resource busy
- 暴力解决注册表删不掉的问题
- android 静默安装实现,Android 中静默安装实现详解
- 如何批量识别二维码图片信息?
- 老板开会要用Word文档?立马做了一款无限次且免费的PDF转Word小程序。
- SAP Exchange Rate 外币汇率的设置
- 【架构师面试-JVM原理-3】-JVM垃圾回收