国外大牛IE版本检测!现在IE都到9了,IE检测代码


Posted in Javascript onJanuary 04, 2012

其实学习大牛源代码是一种很好的进步,可以给你一种新的视野。
看到这篇大牛的IE版本检测,只能是惊叹加惊叹。短短的代码中所包含的内容实在是太多了。
所以在这里决定来解读大牛的源代码,让准备向大牛靠近并还在努力的IT同人们从中学习到更多的知识。

我们先来看看一个世界最短ie检测代码:

var isIE = !-[1,];

是不是很熟悉,但是有bug,就是不能检测ie9,为什么呢?那是因为这是国外大牛在ie9出来之前利用ie对数组转换的特性来完成的。ie9中已经进行了修复,所以在ie9中失效了,但是作为当时的我,还是感叹+感叹,大牛们对细节的研究和如此的深入(当时我也沉迷在如何用最短的代码来实现一个功能和方法,不断的修改+修改,可还是....这就是差距,差距)。
这段世界最短ie检测的代码我就不解读和分析了,毕竟对于现在有bug了,不能向后兼容,我的重点是下面的ie完美检测,理论上是向后兼容的,例如出来IE10,ok,用它,没问题,再一次提现差距。

下面来看看源代码先(我会在后面解读大牛思想和代码中的难点讲解)

// ---------------------------------------------------------- 
// A short snippet for detecting versions of IE in JavaScript 
// without resorting to user-agent sniffing 
// ---------------------------------------------------------- 
// If you're not in IE (or IE version is less than 5) then: 
// ie === undefined 
// If you're in IE (>=5) then you can determine which version: 
// ie === 7; // IE7 
// Thus, to detect IE: 
// if (ie) {} 
// And to detect the version: 
// ie === 6 // IE6 
// ie > 7 // IE8, IE9 ... 
// ie < 9 // Anything less than IE9 
// ---------------------------------------------------------- 
// UPDATE: Now using Live NodeList idea from @jdalton 
var ie = (function(){ 
var undef, 
v = 3, 
div = document.createElement('div'), 
all = div.getElementsByTagName('i'); 
while ( 
div.innerHTML = '<!--[if gt IE ' + (++v) + ']><i></i><![endif]-->', 
all[0] 
); 
return v > 4 ? v : undef; 
}());

一个很精辟的代码,但可以完美检测出ie的各个版,还可以一次按范围检测,在源码的注释中教练你怎么使用。
原理:
动态创建一个div,利用ie条件注释来往里面插入一个i标签,在来检测i标签是否添加来判断是否是ie浏览器。在while中不断循环来比对ie的版本。
下面我们来理解这段代码:
var undef, 
v = 3, 
div = document.createElement('div'), 
all = div.getElementsByTagName('i'); 
//这段好理解,声明变量和创建一个div,获取div中的i 
div.innerHTML = '<!--[if gt IE ' + (++v) + ']><i></i><![endif]-->', 
//这个就是核心,利用的ie条件注释来完成,ie的条件注释是向后兼容的,所以可以用这检测以后出的ie10,如果下一个版本叫ie10的话。

关于ie条件注释,大家可以自己在网上查找,很容易找到的。[if IE 7][if gt IE 7]有很多模式的,我这里就不讲解这个条件注释,做过web前端兼容的应该对这还是比较了解的。

难点:

while ( 
div.innerHTML = '<!--[if gt IE ' + (++v) + ']><i></i><![endif]-->', 
all[0] 
);

what?while(表达式1,表达式2) 这是what?和我们学的while(表达式)不一样?
小技巧,while中如果有多个表达式,以最后一个表达式作为跳出的判断,前面的表达式,不管有多少个,都不会作为跳出的判断,而是执行里面的代码。
例如:while(表达是1,表达是2,表达式3,表达式4) 只以表达式4的true或者false作为跳出判断。
额滴神,还可以这样,长见识了吧,赶快去试试,这就是大牛的代码,只能惊叹+惊叹!
到这里就完了,短短几行的代码,是多么的优雅。希望大家能从中学习到想要的知识和开阔你的视野。
Javascript 相关文章推荐
JavaScript 学习笔记 Black.Caffeine 09.11.28
Nov 30 Javascript
jquery选择器(常用选择器说明)
Sep 28 Javascript
JS弹出窗口代码大全(详细整理)
Dec 21 Javascript
jquery.blockUI.js上传滚动等待效果实现思路及代码
Mar 18 Javascript
浅析onsubmit校验表单时利用ajax的return false无效问题
Jul 10 Javascript
利用javaScript实现点击输入框弹出窗体选择信息
Dec 11 Javascript
js验证IP及子网掩码的合法性有效性示例
Apr 30 Javascript
基于jquery animate操作css样式属性小结
Nov 27 Javascript
详解Node.js中的事件机制
Sep 22 Javascript
jQuery实现淡入淡出的模态框
Feb 09 Javascript
JS正则验证多个邮箱完整实例【邮箱用分号隔开】
Apr 19 Javascript
JavaScript中使用Async实现异步控制
Aug 15 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
40个有创意的jQuery图片和内容滑动及弹出插件收藏集之二
Dec 31 #Javascript
You might like
在PHP中设置、使用、删除Cookie的解决方法
2013/05/06 PHP
PHP反射使用实例和PHP反射API的中文说明
2014/07/02 PHP
php安装php_rar扩展实现rar文件读取和解压的方法
2016/11/17 PHP
YII2框架中actions的作用与使用方法示例
2020/03/13 PHP
PHP类的自动加载与命名空间用法实例分析
2020/06/05 PHP
js 程序执行与顺序实现详解
2013/05/13 Javascript
node.js中的fs.lstat方法使用说明
2014/12/16 Javascript
NodeJS中Buffer模块详解
2015/01/07 NodeJs
jquery移动点击的项目到列表最顶端的方法
2015/06/24 Javascript
jQuery代码实现发展历程时间轴特效
2015/07/30 Javascript
JavaScript淡入淡出渐变简单实例
2015/08/06 Javascript
jQuery插件Validate实现自定义校验结果样式
2016/01/18 Javascript
设计模式中的组合模式在JavaScript程序构建中的使用
2016/05/18 Javascript
利用jQuery实现CheckBox全选/全不选/反选的简单代码
2016/05/31 Javascript
jQuery Ajax请求后台数据并在前台接收
2016/12/10 Javascript
jQuery Validate 相关参数及常用的自定义验证规则
2017/03/06 Javascript
Koa2 之文件上传下载的示例代码
2018/03/29 Javascript
浅谈手写node可读流之流动模式
2018/06/01 Javascript
vue实现点击当前标签高亮效果【推荐】
2018/06/22 Javascript
用Node提供静态文件服务的方法
2018/07/06 Javascript
[36:02]DOTA2上海特级锦标赛D组小组赛#2 Liquid VS VP第一局
2016/02/28 DOTA
[15:20]DOTA2-DPC中国联赛 正赛 Elephant vs Aster 选手采访
2021/03/11 DOTA
放弃 Python 转向 Go语言有人给出了 9 大理由
2017/10/20 Python
详解如何在python中读写和存储matlab的数据文件(*.mat)
2018/02/24 Python
Python中实现变量赋值传递时的引用和拷贝方法
2018/04/29 Python
Python列表常见操作详解(获取,增加,删除,修改,排序等)
2019/02/18 Python
Python实现打砖块小游戏代码实例
2019/05/18 Python
python数据预处理之数据标准化的几种处理方式
2019/07/17 Python
python3发送邮件需要经过代理服务器的示例代码
2019/07/25 Python
python+selenium自动化实战携带cookies模拟登陆微博
2021/01/19 Python
九九重阳节标语
2014/10/07 职场文书
自主招生自荐信格式
2015/03/04 职场文书
办公室岗位职责范本
2015/04/11 职场文书
八年级地理课件资料及考点知识分享
2019/08/30 职场文书
SpringBoot SpringEL表达式的使用
2021/07/25 Java/Android
Python机器学习应用之基于线性判别模型的分类篇详解
2022/01/18 Python