国外大牛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 相关文章推荐
extjs之去除s.gif的影响
Dec 25 Javascript
js操作iframe兼容各种主流浏览器示例代码
Jul 22 Javascript
JavaScript 实现简单的倒计时弹窗DEMO附图
Mar 05 Javascript
node.js中的fs.renameSync方法使用说明
Dec 16 Javascript
学习javascript面向对象 理解javascript原型和原型链
Jan 04 Javascript
Bootstrap基本样式学习笔记之按钮(4)
Dec 07 Javascript
简单谈谈原生js的math对象
Jun 27 Javascript
jQuery 禁止表单用户名、密码自动填充功能
Oct 30 jQuery
vue路由导航守卫和请求拦截以及基于node的token认证的方法
Apr 07 Javascript
微信小程序request请求封装,验签代码实例
Dec 04 Javascript
js实现3D粒子酷炫动态旋转特效
Sep 13 Javascript
JS使用setInterval计时器实现挑战10秒
Nov 08 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 数组的指针操作实现代码
2011/02/08 PHP
php实现用已经过去多长时间的方式显示时间
2015/06/05 PHP
jquery 3D球状导航的文章分类
2010/07/06 Javascript
jQuery Jcrop插件实现图片选取功能
2011/11/23 Javascript
js 得到文件后缀(通过正则实现)
2013/07/08 Javascript
jQuery学习笔记之jQuery+CSS3的浏览器兼容性
2015/01/19 Javascript
原生js实现模拟滚动条
2015/06/15 Javascript
Bootstrap每天必学之进度条
2015/11/30 Javascript
node.js微信公众平台开发教程
2016/03/04 Javascript
Node.js实现兼容IE789的文件上传进度条
2016/09/02 Javascript
jquery实现(textarea)placeholder自动换行
2016/12/22 Javascript
jQuery弹出层插件popShow(改进版)用法示例
2017/01/23 Javascript
Vue添加请求拦截器及vue-resource 拦截器使用
2017/11/23 Javascript
微信小程序实现自定义picker选择器弹窗内容
2020/05/26 Javascript
[07:25]DOTA2-DPC中国联赛2月5日Recap集锦
2021/03/11 DOTA
Python中Collection的使用小技巧
2014/08/18 Python
Python中转换角度为弧度的radians()方法
2015/05/18 Python
定义css设备类型-Media Queries图表简介及使用方法
2013/01/21 HTML / CSS
HTML5离线应用与客户端存储的实现
2018/05/03 HTML / CSS
Melijoe美国官网:法国奢侈童装购物网站
2017/04/19 全球购物
美国家居装饰店:Z Gallerie
2020/12/28 全球购物
施工安全协议书
2013/12/11 职场文书
幼儿教师考核制度
2014/01/25 职场文书
优秀教师获奖感言
2014/01/31 职场文书
先进集体事迹材料
2014/02/17 职场文书
采购意向书范本
2014/03/31 职场文书
理想演讲稿范文
2014/05/21 职场文书
设备管理实施方案
2014/05/31 职场文书
暑期社会实践心得体会
2014/09/02 职场文书
四风个人对照检查材料思想汇报(办公室通用版)
2014/10/07 职场文书
长城的导游词
2015/01/30 职场文书
离婚案件被告代理词
2015/05/23 职场文书
深入理解java.lang.String类的不可变性
2021/06/27 Java/Android
如何使用Tkinter进行窗口的管理与设置
2021/06/30 Python
Go语言安装并操作redis的go-redis库
2022/04/14 Golang
Win11查看设备管理器
2022/04/19 数码科技