国外大牛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 相关文章推荐
滚动经典最新话题[prototype框架]下编写
Oct 03 Javascript
function, new function, new Function之间的区别
Mar 08 Javascript
Javascript 垃圾收集机制介绍理解
May 14 Javascript
理解jQuery stop()方法
Nov 21 Javascript
Javascript基础教程之if条件语句
Jan 18 Javascript
javascript中一些util方法汇总
Jun 10 Javascript
JS获取鼠标相对位置的方法
Sep 20 Javascript
jQuery实现移动端手机商城购物车功能
Sep 24 Javascript
在vue中使用setInterval的方法示例
Apr 16 Javascript
JS操作Fckeditor的一些常用方法(获取、插入等)
Feb 19 Javascript
解决vue项目中遇到 Cannot find module ‘chalk‘ 报错的问题
Nov 05 Javascript
vue-cli3.x配置全局的scss的时候报错问题及解决
Apr 30 Vue.js
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
杏林同学录(七)
2006/10/09 PHP
zend framework多模块多布局配置
2011/02/26 PHP
php打造属于自己的MVC框架
2012/03/07 PHP
php读取本地文件常用函数(fopen与file_get_contents)
2013/09/09 PHP
thinkphp数据查询和遍历数组实例
2014/11/28 PHP
基于OpenCart 开发支付宝,财付通,微信支付参数错误问题
2015/10/01 PHP
php加密解密字符串示例
2016/10/13 PHP
php获取网站根目录物理路径的几种方法(推荐)
2017/03/04 PHP
javaScript 删除字符串空格多种方法小结
2012/10/24 Javascript
js检查页面上有无重复id的实现代码
2013/07/17 Javascript
jQuery将多条数据插入模态框的示例代码
2014/09/25 Javascript
如何调试异步加载页面里包含的js文件
2014/10/30 Javascript
JS+CSS实现经典的左侧竖向滑动菜单效果
2015/09/23 Javascript
JavaScript html5 canvas绘制时钟效果
2016/03/01 Javascript
浅谈JavaScript的全局变量与局部变量
2016/06/10 Javascript
package.json文件配置详解
2017/06/15 Javascript
Gulp实现静态网页模块化的方法详解
2018/01/09 Javascript
解决webpack无法通过IP地址访问localhost的问题
2018/02/22 Javascript
浅谈小程序 setData学问多
2019/02/20 Javascript
微信小程序获取用户绑定手机号方法示例
2019/07/21 Javascript
举例讲解Python中metaclass元类的创建与使用
2016/06/30 Python
python使用代理ip访问网站的实例
2018/05/07 Python
pandas.dataframe中根据条件获取元素所在的位置方法(索引)
2018/06/07 Python
python面向对象入门教程之从代码复用开始(一)
2018/12/11 Python
python运行时强制刷新缓冲区的方法
2019/01/14 Python
GDAL 矢量属性数据修改方式(python)
2020/03/10 Python
python 基于Apscheduler实现定时任务
2020/12/15 Python
关于HTML5你必须知道的28个新特性,新技巧以及新技术
2012/05/28 HTML / CSS
美国折扣香水网站:The Perfume Spot
2020/12/12 全球购物
设置器与访问器的定义以及各自特点
2016/01/08 面试题
模特大赛策划方案
2014/05/28 职场文书
无犯罪记录证明
2014/09/19 职场文书
汤姆索亚历险记读书笔记
2015/06/29 职场文书
2015年“我们的节日·重阳节”活动总结
2015/07/29 职场文书
建国70周年的心得体会(2篇)
2019/09/20 职场文书
nginx基于域名,端口,不同IP的虚拟主机设置的实现
2021/03/31 Servers