国外大牛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 相关文章推荐
打开超链需要“确认”对话框的方法
Mar 08 Javascript
改变javascript函数内部this指针指向的三种方法
Apr 23 Javascript
不使用XMLHttpRequest实现异步加载 Iframe和script
Oct 29 Javascript
seaJs的模块定义和模块加载浅析
Jun 06 Javascript
JavaScript中constructor()方法的使用简介
Jun 05 Javascript
js友好的时间返回函数
Aug 24 Javascript
Javascript获取图片原始宽度和高度的方法详解
Sep 20 Javascript
js基础之DOM中元素对象的属性方法详解
Oct 28 Javascript
webpack入门+react环境配置
Feb 08 Javascript
JavaScript实现Excel表格效果
Feb 07 Javascript
Vue常用的全选/反选的示例代码
Feb 19 Javascript
浅谈JavaScript节流和防抖函数
Aug 25 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时间戳格式化显示友好的时间函数分享
2014/10/21 PHP
详解Grunt插件之LiveReload实现页面自动刷新(两种方案)
2015/07/31 PHP
php实现xml与json之间的相互转换功能实例
2016/07/07 PHP
jQuery代码优化 事件委托篇
2011/11/01 Javascript
jquery ui对话框实例代码
2013/05/10 Javascript
微信分享的标题、缩略图、连接及描述设置方法
2014/10/14 Javascript
jQuery实现仿腾讯微博滑出效果报告每日天气的方法
2015/05/11 Javascript
jQuery验证插件validate使用详解
2016/05/11 Javascript
BOM系列第一篇之定时器setTimeout和setInterval
2016/08/17 Javascript
JS动态加载脚本并执行回调操作
2016/08/24 Javascript
jquery基本选择器匹配多个元素的实现方法
2016/09/05 Javascript
Angular2从搭建环境到开发步骤详解
2016/10/17 Javascript
详解前端自动化工具gulp自动添加版本号
2016/12/20 Javascript
Angular JS数据的双向绑定详解及实例
2016/12/31 Javascript
Vue指令的钩子函数使用方法
2017/03/20 Javascript
JavaScript在控件上添加倒计时功能的实现代码
2017/07/04 Javascript
bootstrap模态框嵌套、tabindex属性、去除阴影的示例代码
2017/10/17 Javascript
AngularJS实现的获取焦点及失去焦点时的表单验证功能示例
2017/10/25 Javascript
Vue中的slot使用插槽分发内容的方法
2018/03/01 Javascript
React中使用async validator进行表单验证的实例代码
2018/08/17 Javascript
React Router V4使用指南(精讲)
2018/09/17 Javascript
JavaScript实现邮箱后缀提示功能的示例代码
2018/12/13 Javascript
vue.js实现图书管理功能
2019/09/24 Javascript
详解vue3中组件的非兼容变更
2021/03/03 Vue.js
python在openstreetmap地图上绘制路线图的实现
2019/07/11 Python
Python实现的远程文件自动打包并下载功能示例
2019/07/12 Python
Python values()与itervalues()的用法详解
2019/11/27 Python
Django Admin 上传文件到七牛云的示例代码
2020/06/20 Python
Pycharm中使用git进行合作开发的教程详解
2020/11/17 Python
Python爬取某平台短视频的方法
2021/02/08 Python
米兰网婚纱礼服法国网上商店:Milanoo法国
2016/08/20 全球购物
介绍一下except的用法和作用
2015/01/22 面试题
2014年学雷锋活动总结
2014/06/26 职场文书
演讲开场白台词大全
2015/05/29 职场文书
MySQL系列之八 MySQL服务器变量
2021/07/02 MySQL
redis击穿 雪崩 穿透超详细解决方案梳理
2022/03/17 Redis