国外大牛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 相关文章推荐
js/jquery去掉空格,回车,换行示例代码
Nov 05 Javascript
js原型继承的两种方法对比介绍
Mar 30 Javascript
JS对img标签进行优化使用onerror显示默认图像
Apr 24 Javascript
JavaSacript中charCodeAt()方法的使用详解
Jun 05 Javascript
js判断手机端(Android手机还是iPhone手机)
Jul 22 Javascript
详解JavaScript权威指南之对象
Sep 27 Javascript
微信小程序商品到详情的实现
Jun 27 Javascript
Angular中点击li标签实现更改颜色的核心代码
Dec 08 Javascript
利用nginx + node在阿里云部署https的步骤详解
Dec 19 Javascript
Bootstrap fileinput 上传新文件移除时触发服务器同步删除的配置
Oct 08 Javascript
vue-cli 构建骨架屏的方法示例
Nov 08 Javascript
JavaScript 对象创建的3种方法
Nov 17 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
什么是短波收听SWL
2021/03/01 无线电
无限级别菜单的实现
2006/10/09 PHP
php简单封装了一些常用JS操作
2007/02/25 PHP
apache2.2.4+mysql5.0.77+php5.2.8安装精简
2009/04/29 PHP
PHP 使用pcntl和libevent 实现Timer功能
2013/10/27 PHP
myeclipse安装jQuery插件的方法
2011/03/29 Javascript
javascript温习的一些笔记 基础常用知识小结
2011/06/22 Javascript
AngularJS内建服务$location及其功能详解
2016/07/01 Javascript
微信小程序 获取微信OpenId详解及实例代码
2016/10/31 Javascript
概述jQuery的元素筛选
2016/11/23 Javascript
Vue.js计算属性computed与watch(5)
2016/12/09 Javascript
BootStrap 模态框实现刷新网页并关闭功能
2017/01/04 Javascript
浅谈pc端rem字体设置的问题
2017/08/03 Javascript
[js高手之路]原型式继承与寄生式继承详解
2017/08/28 Javascript
jQuery+ajax读取json数据并按照价格排序示例
2018/03/28 jQuery
Vue 让元素抖动/摆动起来的实现代码
2018/05/31 Javascript
详解基于vue的服务端渲染框架NUXT
2018/06/20 Javascript
微信小程序修改swiper默认指示器样式的实例代码
2018/07/18 Javascript
[42:27]DOTA2上海特级锦标赛主赛事日 - 3 败者组第三轮#2Fnatic VS OG第三局
2016/03/05 DOTA
wxPython中文教程入门实例
2014/06/09 Python
Python编写合并字典并实现敏感目录的小脚本
2019/02/26 Python
windows10 pycharm下安装pyltp库和加载模型实现语义角色标注的示例代码
2020/05/07 Python
TensorFlow-gpu和opencv安装详细教程
2020/06/30 Python
python opencv实现图像配准与比较
2021/02/09 Python
css3媒体查询中device-width和width的区别详解
2020/03/27 HTML / CSS
集团公司总经理岗位职责
2013/12/20 职场文书
技校毕业生的自我评价
2013/12/27 职场文书
新郎婚宴答谢词
2014/01/19 职场文书
咖啡馆创业计划书
2014/01/26 职场文书
2014年文明创建工作总结
2014/11/25 职场文书
2014年卫生院工作总结
2014/12/03 职场文书
如何写好闭幕词
2019/04/02 职场文书
干货:如何写好观后感 !
2019/05/21 职场文书
2019交通安全宣传标语集锦!
2019/06/28 职场文书
2019年朋友圈经典励志语录50条
2019/07/05 职场文书
Python初识逻辑与if语句及用法大全
2021/08/07 Python