国外大牛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 相关文章推荐
基于JQuery的cookie插件
Apr 07 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(一)让静态人物动起来
Jan 23 Javascript
jquery实现table鼠标经过变色代码
Sep 25 Javascript
用js来获取上传的文件名纯粹是为了美化而用
Oct 23 Javascript
js与applet相互调用的方法
Jun 22 Javascript
JavaScript两个变量交换值的实现方法
Mar 01 Javascript
JS实现的文字间歇循环滚动效果完整示例
Feb 13 Javascript
vue2 全局变量的设置方法
Mar 09 Javascript
浅析vue-cli3配置webpack-bundle-analyzer插件【推荐】
Oct 23 Javascript
Vue实例的对象参数options的几个常用选项详解
Nov 08 Javascript
基于jquery实现彩色投票进度条代码解析
Aug 26 jQuery
JavaScript parseInt0.0000005打印5原理解析
Jul 23 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
echo, print, printf 和 sprintf 区别
2006/12/06 PHP
thinkPHP5 tablib标签库自定义方法详解
2017/05/10 PHP
php魔法函数与魔法常量使用介绍
2017/07/23 PHP
判断输入是否为空,获得输入类型的JS代码
2013/10/30 Javascript
javascript中取前n天日期的两种方法分享
2014/01/26 Javascript
jquery实现弹出div,始终显示在屏幕正中间的简单实例
2014/03/08 Javascript
js单独获取一个checkbox看其是否被选中
2014/09/22 Javascript
jQuery中prepend()方法使用详解
2015/08/11 Javascript
JS根据key值获取URL中的参数值及把URL的参数转换成json对象
2015/08/26 Javascript
详解Node.js如何开发命令行工具
2016/08/14 Javascript
Vue-router路由判断页面未登录跳转到登录页面的实例
2017/10/26 Javascript
Node.js中sequelize时区的配置方法
2017/12/10 Javascript
vue.js在标签属性中插入变量参数的方法
2018/03/06 Javascript
vue打包的时候自动将px转成rem的操作方法
2018/06/20 Javascript
Vue源码之关于vm.$delete()/Vue.use()内部原理详解
2019/05/01 Javascript
小程序跨页面交互的作用与方法详解
2020/01/07 Javascript
小程序接入腾讯位置服务的详细流程
2020/03/03 Javascript
Python正则表达式介绍
2012/08/06 Python
python字典排序实例详解
2015/05/20 Python
pygame游戏之旅 调用按钮实现游戏开始功能
2018/11/21 Python
python处理两种分隔符的数据集方法
2018/12/12 Python
六行python代码的爱心曲线详解
2019/05/17 Python
python字符串切割:str.split()与re.split()的对比分析
2019/07/16 Python
500行代码使用python写个微信小游戏飞机大战游戏
2019/10/16 Python
详解字符串在Python内部是如何省内存的
2020/02/03 Python
华为智利官方商店:Huawei Chile
2020/05/09 全球购物
RIP版本1跟版本2的区别
2013/12/30 面试题
Linux如何命名文件--使用文件名时应注意
2014/05/29 面试题
财务会计专业毕业生自荐信
2013/10/02 职场文书
办公室秘书岗位职责范本
2014/02/11 职场文书
测试工程师程序员求职信范文
2014/02/20 职场文书
学校运动会广播稿
2014/10/11 职场文书
2014财务部年度工作总结
2014/12/08 职场文书
新员工试用期自我评价
2015/03/10 职场文书
2016年“七一建党节”广播稿
2015/12/18 职场文书
详解Python常用的魔法方法
2021/06/03 Python