国外大牛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 相关文章推荐
Javascript技术技巧大全(五)
Jan 22 Javascript
JavaScript前端开发之实现二进制读写操作
Nov 04 Javascript
JS三级可折叠菜单实现方法
Feb 29 Javascript
JQuery 在文档中查找指定name的元素并移除的实现方法
May 19 Javascript
JS实现发送短信验证后按钮倒计时功能(防止刷新倒计时失效)
Jul 07 Javascript
vue.js数据绑定的方法(单向、双向和一次性绑定)
Jul 13 Javascript
完美解决手机浏览器顶部下拉出现网页源或刷新的问题
Nov 30 Javascript
自定义Vue中的v-module双向绑定的实现
Apr 17 Javascript
ES6常用小技巧总结【去重、交换、合并、反转、迭代、计算等】
Dec 21 Javascript
elementui更改el-dialog关闭按钮的图标d的示例代码
Aug 04 Javascript
详解React路由传参方法汇总记录
Nov 29 Javascript
vue实现登录、注册、退出、跳转等功能
Dec 23 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
curl实现站外采集的方法和技巧
2014/01/31 PHP
PHP实现提取多维数组指定一列的方法总结
2019/12/04 PHP
为EasyUI的Tab标签添加右键菜单的方法
2012/07/14 Javascript
jquery清空表单数据示例分享
2014/02/13 Javascript
详谈javascript中DOM的基本属性
2015/02/26 Javascript
javascript数据结构与算法之检索算法
2015/04/04 Javascript
javascript常见数字进制转换实例分析
2016/04/21 Javascript
JS 根据子网掩码,网关计算出所有IP地址范围示例
2020/04/23 Javascript
Bootstrap幻灯片轮播图支持触屏左右手势滑动的实现方法
2016/10/13 Javascript
Web前端开发之水印、图片验证码
2016/11/27 Javascript
JavaScript定义及输出螺旋矩阵的方法详解
2017/12/01 Javascript
微信公众号开发之微信支付代码记录的实现
2019/10/16 Javascript
Vue数字输入框组件的使用方法
2019/10/19 Javascript
vue中对象数组去重的实现
2020/02/06 Javascript
[01:07:53]RNG vs VG 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
Python发送email的3种方法
2015/04/28 Python
Python实现解析Bit Torrent种子文件内容的方法
2017/08/29 Python
Python2/3中urllib库的一些常见用法
2017/12/19 Python
解决python删除文件的权限错误问题
2018/04/24 Python
浅谈flask源码之请求过程
2018/07/26 Python
Python 编程速成(推荐)
2019/04/15 Python
python tkinter实现屏保程序
2019/07/30 Python
Django接收自定义http header过程详解
2019/08/23 Python
pandas按行按列遍历Dataframe的几种方式
2019/10/23 Python
解决python便携版无法直接运行py文件的问题
2020/09/01 Python
10分钟入门CSS3 Animation
2018/12/25 HTML / CSS
Groupon比利时官方网站:特卖和网上购物高达-70%
2019/08/09 全球购物
乔布斯斯坦福大学演讲稿
2014/05/23 职场文书
社保委托书怎么写
2014/08/02 职场文书
工程催款通知书
2015/04/17 职场文书
毕业论文指导老师意见
2015/06/04 职场文书
天堂的孩子观后感
2015/06/11 职场文书
导游词之南京莫愁湖公园
2019/11/13 职场文书
详解Django中 render() 函数的使用方法
2021/04/22 Python
Python基础之元类详解
2021/04/29 Python
九大龙王魂骨,山龙王留下躯干骨,榜首死的最憋屈(被捏碎)
2022/03/18 国漫