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 相关文章推荐
Javascript学习笔记 delete运算符
Sep 13 Javascript
Javascript基础教程之比较操作符
Jan 18 Javascript
JavaScript中定义类的方式详解
Jan 07 Javascript
如何用angularjs制作一个完整的表格
Jan 21 Javascript
浅谈angular懒加载的一些坑
Aug 20 Javascript
用js实现简单算法的实例代码
Sep 24 Javascript
原生js实现弹出层登录拖拽功能
Dec 05 Javascript
JS实现滑动门效果的方法详解
Dec 19 Javascript
Vue匿名插槽与作用域插槽的合并和覆盖行为
Apr 22 Javascript
微信小程序页面滚动到指定位置代码实例
Sep 07 Javascript
基于Nuxt.js项目的服务端性能优化与错误检测(容错处理)
Oct 23 Javascript
几款主流好用的富文本编辑器(所见即所得常用编辑器)介绍
Mar 17 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
让你同时上传 1000 个文件 (一)
2006/10/09 PHP
PHP-MySQL教程归纳总结
2008/06/07 PHP
php根据日期判断星座的函数分享
2014/02/13 PHP
PHP 搜索查询功能实现
2016/11/29 PHP
jquery BS,dialog控件自适应大小
2009/07/06 Javascript
验证javascript中Object和Function的关系的三段简单代码
2010/06/27 Javascript
jquery插件之easing使用
2010/08/19 Javascript
Js 时间函数getYear()的使用问题探讨
2013/04/01 Javascript
js的toLowerCase方法用法实例
2015/01/27 Javascript
js禁止页面刷新与后退的方法
2015/06/08 Javascript
谈谈我对JavaScript原型和闭包系列理解(随手笔记6)
2015/12/20 Javascript
js当前页面登录注册框,固定div,底层阴影的实例代码
2016/10/04 Javascript
node+express制作爬虫教程
2016/11/11 Javascript
浅谈Javascript事件对象
2017/02/05 Javascript
详解用vue编写弹出框组件
2017/07/04 Javascript
三分钟学会用ES7中的Async/Await进行异步编程
2018/06/14 Javascript
Vue.js中的extend绑定节点并显示的方法
2019/06/20 Javascript
Vue Extends 扩展选项用法完整实例
2019/09/17 Javascript
python的mysqldb安装步骤详解
2017/08/14 Python
Python语言生成水仙花数代码示例
2017/12/18 Python
pandas 小数位数 精度的处理方法
2018/06/09 Python
Python3非对称加密算法RSA实例详解
2018/12/06 Python
python实现批量视频分帧、保存视频帧
2019/05/31 Python
PyQt5 closeEvent关闭事件退出提示框原理解析
2020/01/08 Python
python使用多线程+socket实现端口扫描
2020/05/28 Python
css3中单位px,em,rem,vh,vw,vmin,vmax的区别及浏览器支持情况
2016/12/06 HTML / CSS
h5使用canvas画布实现手势解锁
2019/01/04 HTML / CSS
携程旅行网:中国领先的在线旅行服务公司
2017/02/17 全球购物
Bibloo匈牙利:女装、男装、童装及鞋子和配饰
2019/04/14 全球购物
美国Jeep配件购物网站:Morris 4×4 Center
2019/05/01 全球购物
《望洞庭》教学反思
2014/02/16 职场文书
水电维修专业推荐信
2014/09/06 职场文书
2015年家长学校工作总结
2015/04/22 职场文书
可怜妈妈观后感
2015/06/09 职场文书
2016五四青年节活动总结范文
2016/04/06 职场文书
Linux中Nginx的防盗链和优化的实现代码
2021/06/20 Servers