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 相关文章推荐
js弹出层之1:JQuery.Boxy (二)
Oct 06 Javascript
JS中Iframe之间传值及子页面与父页面应用
Mar 11 Javascript
判断是否安装flash player及当前版本的JS代码
Aug 08 Javascript
jQuery实现限制textarea文本框输入字符数量的方法
May 28 Javascript
浅谈JavaScript 执行环境、作用域及垃圾回收
May 31 Javascript
javascript实现的全国省市县无刷新多级关联菜单效果代码
Aug 01 Javascript
jQuery实现可展开折叠的导航效果示例
Sep 12 Javascript
NPM 安装cordova时警告:npm WARN deprecated minimatch@2.0.10: Please update to minimatch 3.0.2 or higher to
Dec 20 Javascript
vue2.0结合Element实现select动态控制input禁用实例
May 12 Javascript
JS中的Replace()传入函数时的用法详解
Sep 11 Javascript
JS实现多功能计算器
Oct 28 Javascript
JavaScript实现优先级队列
Dec 06 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与MySQL开发中页面出现乱码的一种解决方法
2007/07/29 PHP
一个图形显示IP的PHP程序代码
2007/10/19 PHP
php下清空字符串中的HTML标签的代码
2010/09/06 PHP
PHP动态输出JavaScript代码实例
2015/02/12 PHP
学习php设计模式 php实现适配器模式
2015/12/07 PHP
PHPCMS V9 添加二级导航的思路详解
2016/10/20 PHP
JavaScript中的prototype使用说明
2010/04/13 Javascript
jquery实现手机号码选号的方法
2015/07/31 Javascript
基于jquery实现简单的手风琴特效
2015/11/24 Javascript
jQuery中ajax错误调试分析
2016/12/01 Javascript
利用HTML5+Socket.io实现摇一摇控制PC端歌曲切换
2017/01/13 Javascript
Javascript DOM事件操作小结(监听鼠标点击、释放,悬停、离开等)
2017/01/20 Javascript
bootstrap fileinput 插件使用项目总结(经验)
2017/02/22 Javascript
js实现三级联动效果(简单易懂)
2017/03/27 Javascript
解读ES6中class关键字
2017/11/20 Javascript
微信小程序列表渲染功能之列表下拉刷新及上拉加载的实现方法分析
2017/11/27 Javascript
JS实现的计数排序与基数排序算法示例
2017/12/04 Javascript
Vue+iview+webpack ie浏览器兼容简单处理
2019/09/20 Javascript
vue移动端模态框(可传参)的实现
2019/11/20 Javascript
解决vue组件销毁之后计时器继续执行的问题
2020/07/21 Javascript
vue axios请求成功却进入catch的原因分析
2020/09/08 Javascript
[03:17]史诗级大片应援2018DOTA2国际邀请赛 致敬每一位坚守遗迹的勇士
2018/07/20 DOTA
用Python制作检测Linux运行信息的工具的教程
2015/04/01 Python
python绘制漏斗图步骤详解
2019/03/04 Python
mac系统下安装pycharm、永久激活、中文汉化详细教程
2020/11/24 Python
编译 pycaffe时报错:fatal error: numpy/arrayobject.h没有那个文件或目录
2020/11/29 Python
基于PyTorch中view的用法说明
2021/03/03 Python
英国舒适型鞋履品牌:FitFlop
2017/05/17 全球购物
盛大笔试题
2016/11/05 面试题
家长会邀请书
2014/01/25 职场文书
政治学专业毕业生求职信
2014/08/11 职场文书
2015年校务公开工作总结
2015/05/26 职场文书
为自己工作观后感
2015/06/11 职场文书
医护人员继续教育学习心得体会
2016/01/19 职场文书
Mysql存储过程、触发器、事件调度器使用入门指南
2022/01/22 MySQL
Spring中的@Transactional的工作原理
2022/06/05 Java/Android