国外大牛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+CSS实现图片上放置按钮的方法
May 29 Javascript
在JavaScript的正则表达式中使用exec()方法
Jun 16 Javascript
基于js实现微信发送好友如何分享到朋友圈、微博
Nov 30 Javascript
js 获取站点应用名的简单实例
Aug 18 Javascript
vue如何实现observer和watcher源码解析
Mar 09 Javascript
element UI upload组件上传附件格式限制方法
Sep 04 Javascript
vue-cli项目代理proxyTable配置exclude的方法
Sep 20 Javascript
Vue递归实现树形菜单方法实例
Nov 06 Javascript
JavaScript中的事件与异常捕获详析
Feb 24 Javascript
JQuery事件委托原理与用法实例分析
May 13 jQuery
Vue 3.0 前瞻Vue Function API新特性体验
Aug 12 Javascript
仿照Element-ui实现一个简易的$message方法
Sep 14 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--用万网的接口实现域名查询功能
2012/12/13 PHP
php curl的深入解析
2013/06/02 PHP
解析php中static,const与define的使用区别
2013/06/18 PHP
测试php函数的方法
2013/11/13 PHP
PHP常用技术文之文件操作和目录操作总结
2014/09/27 PHP
php post大量数据时发现数据丢失问题解决方法
2015/06/20 PHP
关于图片验证码设计的思考
2007/01/29 Javascript
利用JS判断用户是否上网(连接网络)
2013/12/23 Javascript
简单方法判断JavaScript对象为null或者属性为空
2014/09/26 Javascript
IE8下jQuery改变png图片透明度时出现的黑边
2015/08/30 Javascript
JavaScript继承模式粗探
2016/01/12 Javascript
基于BootStrap Metronic开发框架经验小结【九】实现Web页面内容的打印预览和保存操作
2016/05/12 Javascript
可输入文字查找ajax下拉框控件 ComBox的实现方法
2016/10/25 Javascript
javascript 网页进度条简单实例
2017/02/22 Javascript
JS中min函数实例讲解
2019/02/18 Javascript
NodeJs操作MongoDB教程之分页功能以及常见问题
2019/04/09 NodeJs
通过实例讲解JS如何防抖动
2019/06/15 Javascript
[03:41]2018完美盛典-《Fight With Us》
2018/12/16 DOTA
c++生成dll使用python调用dll的方法
2014/01/20 Python
Request的中断和ErrorHandler实例解析
2018/02/12 Python
python3中property使用方法详解
2019/04/23 Python
Python如何使用paramiko模块连接linux
2020/03/18 Python
CSS3,线性渐变(linear-gradient)的使用总结
2017/01/09 HTML / CSS
美国一家主营日韩美妆护肤品的在线商店:iMomoko
2016/09/11 全球购物
英国计算机产品零售商:Novatech(定制个人电脑、笔记本电脑、工作站和服务器)
2018/01/28 全球购物
华美博弈C/VC工程师笔试试题
2012/07/16 面试题
成龙霸王洗发水广告词
2014/03/14 职场文书
办公室主任岗位承诺书
2014/05/29 职场文书
珠宝的促销活动方案
2014/08/31 职场文书
整顿机关作风心得体会
2014/09/10 职场文书
篮球友谊赛通讯稿
2014/10/10 职场文书
2014年商场工作总结
2014/11/22 职场文书
简爱读书笔记
2015/06/26 职场文书
李清照的诗词赏析(20首)
2019/08/22 职场文书
Python读写yaml文件
2022/03/20 Python
《进击的巨人》新联动CM 兵长强势出击兽巨人
2022/04/05 日漫