js中有关IE版本检测


Posted in Javascript onJanuary 04, 2012

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

另外一种就是IE的条件注释,这篇有个比较详细的说明 https://3water.com/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" id="ieVersion" value="6" /> 
<![endif]--> 
<!--[if IE 7]> 
<input type="hidden" id="ieVersion" value="7" /> 
<![endif]-->

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

以此类推,可以获得各个版本的信息,甚至可以添加gt,gte等,从而一次判定一类版本。
关于这种写法,有个例子就是:
<!--[if IE 6]> 
<html class="ie6"> 
<![endif]--> 
<!--[if IE 7]> 
<html class="ie7"> 
<![endif]--> 
<!--[if !IE]><!--> 
<html><!--<![endif]-->

于是在CSS里面就可以不用别的hack了,从而避免在IE里面多加载一次CSS,
直接
.ie6 xx{} 
.ie7 xx{} 
.ie8 xx{} 
xx{}

第二、既然可以写在页面内,当然也可以JS来动态生成。我google了一把,发现还真有人这么做的。
文章地址如下:https://3water.com/article/29337.htm,写得还比较详细,原理也很简单。
不过这样的缺憾就是把条件注释限定到JS上了,于CSS就是鸡肋了。
继续,既然可以动态生成条件注释来辨明IE版本,基于IE的CSS hack,应该也可以动态生成一段html片段,用样式值来判定版本。
下面是最容易想到的形式,我测试发现这么确实可以,不过也发现了一个问题,看下面的一段代码:
<div id="test_1"><span style="color: red; color: #ff6600\0; color: yellow\9\0; *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: #ff6600\\0; color: yellow\\9\\0; *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兼容模式的问题还是别的什么原因,知道的请指教。
确认代码:

<div><span 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\0; color: yellow\9\0; *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: #ff6600\\0; color: yellow\\9\\0; *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我还没有弄清楚,所以也就暂时知道可以这么做就可以了。

Javascript 相关文章推荐
在线编辑器中换行与内容自动提取
Apr 24 Javascript
javascript中的prototype属性使用说明(函数功能扩展)
Aug 16 Javascript
JQuery触发radio或checkbox的change事件
Dec 18 Javascript
时间戳转换为时间 年月日时间的JS函数
Aug 19 Javascript
JqueryMobile动态生成listView并实现刷新的两种方法
Mar 05 Javascript
javascript算法题:求任意一个1-9位不重复的N位数在该组合中的大小排列序号
Apr 01 Javascript
JS+CSS实现带有碰撞缓冲效果的竖向导航条代码
Sep 15 Javascript
JS组件Bootstrap按钮组与下拉按钮详解
May 10 Javascript
Spring MVC中Ajax实现二级联动的简单实例
Jul 06 Javascript
BootStrap Validator 版本差异问题导致的submitHandler失效问题的解决方法
Dec 01 Javascript
D3.js实现拓扑图的示例代码
Jun 30 Javascript
javascript全局自定义鼠标右键菜单
Dec 08 Javascript
国外大牛IE版本检测!现在IE都到9了,IE检测代码
Jan 04 #Javascript
IE的有条件注释判定IE版本详解(附实例代码)
Jan 04 #Javascript
js变量以及其作用域详解
Jul 18 #Javascript
分享一个asp.net pager分页控件
Jan 04 #Javascript
调试Node.JS的辅助工具(NodeWatcher)
Jan 04 #Javascript
DOM和XMLHttpRequest对象的属性和方法整理
Jan 04 #Javascript
40个有创意的jQuery图片和内容滑动及弹出插件收藏集之三
Jan 03 #Javascript
You might like
PHP 双链表(SplDoublyLinkedList)简介和使用实例
2015/05/12 PHP
php简单备份与还原MySql的方法
2016/05/09 PHP
CentOS7编译安装php7.1的教程详解
2019/04/18 PHP
javascript打开新窗口同时关闭旧窗口
2009/01/16 Javascript
JQuery动态给table添加、删除行 改进版
2011/01/19 Javascript
仿猪八戒网左下角的文字滚动效果
2011/10/28 Javascript
14款NodeJS Web框架推荐
2014/07/11 NodeJs
jQuery实现径向动画菜单效果
2015/07/17 Javascript
分享一道关于闭包、bind和this的面试题
2017/02/20 Javascript
利用jQuery解析获取JSON数据
2017/04/08 jQuery
angularJS自定义directive之带参方法传递详解
2018/10/09 Javascript
vue中 v-for循环的用法详解
2020/02/19 Javascript
js验证密码强度解析
2020/03/18 Javascript
[47:08]OG vs INfamous 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
教你用Python脚本快速为iOS10生成图标和截屏
2016/09/22 Python
python中正则表达式 re.findall 用法
2018/10/23 Python
如何利用Python模拟GitHub登录详解
2019/07/15 Python
python实时检测键盘输入函数的示例
2019/07/17 Python
使用python计算三角形的斜边例子
2020/04/15 Python
浅谈keras通过model.fit_generator训练模型(节省内存)
2020/06/17 Python
CSS+jQuery实现的在线答题功能
2015/04/25 HTML / CSS
CSS3实现点击放大的动画实例代码
2017/02/27 HTML / CSS
你可能不熟练的十个前端HTML5经典面试题
2018/07/03 HTML / CSS
利用html5 canvas破解简单验证码及getImageData接口应用
2013/01/25 HTML / CSS
使用HTML5 Canvas为图片填充颜色和纹理的教程
2016/03/21 HTML / CSS
德国鞋子网上商店:Omoda.de
2017/03/31 全球购物
捷克家居装饰及图书音像购物网站:Velký košík
2018/04/16 全球购物
DERMAdoctor官网:美国著名皮肤护理品牌
2019/07/06 全球购物
个人自我鉴定写法
2013/11/30 职场文书
2014年五四青年节演讲稿范文
2014/04/22 职场文书
初中重阳节活动总结
2015/05/05 职场文书
严以用权专题学习研讨会发言材料
2015/11/09 职场文书
医学生自荐信范文(2016精选篇)
2016/01/28 职场文书
解决golang结构体tag编译错误的问题
2021/05/02 Golang
使用springboot暴露oracle数据接口的问题
2021/05/07 Oracle
Python中文分词库jieba(结巴分词)详细使用介绍
2022/04/07 Python