国外大牛IE版本检测!现在IE都到9了,IE检测代码

其实学习大牛源代码是一种很好的进步,可以给你一种新的视野。
看到这篇大牛的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作为跳出判断。
额滴神,还可以这样,长见识了吧,赶快去试试,这就是大牛的代码,只能惊叹+惊叹!
到这里就完了,短短几行的代码,是多么的优雅。希望大家能从中学习到想要的知识和开阔你的视野。

(0)

相关推荐

  • IE的有条件注释判定IE版本详解(附实例代码)

    IE的有条件注释是一种专有的(因此是非标准的).对常规(X)HTML注释的Miscrosoft扩展.顾名思义,有条件注释使你能够根据条件(比如浏览器版本)显示代码块.尽管是非标准的,但是有条件注释对于其他所有浏览器作为常规注释出现,因此本质上是无害的.有条件注释在Windows上的IE5中首次出现,并且得到了Widnows浏览器所有后续版本的支持. IE的有条件注释及其有效,而且非常容易记住.主要的缺点是这些注释需要放在HTML页面中,而不是放在CSS中.这样,当你不需要这些东西,或者有所更改的

  • js中有关IE版本检测

    见得最多的就是检测navigator.userAgent(这个可以面向所有浏览器,略过). 另外一种就是IE的条件注释,这篇有个比较详细的说明 http://www.jb51.net/article/29336.htm 复制代码 代码如下: <!--[if !IE]><!--> <script type="text/javascript"> alert('非IE') </ script> <!--<![endif]-->

  • 国外大牛IE版本检测!现在IE都到9了,IE检测代码

    其实学习大牛源代码是一种很好的进步,可以给你一种新的视野. 看到这篇大牛的IE版本检测,只能是惊叹加惊叹.短短的代码中所包含的内容实在是太多了. 所以在这里决定来解读大牛的源代码,让准备向大牛靠近并还在努力的IT同人们从中学习到更多的知识. 我们先来看看一个世界最短ie检测代码: 复制代码 代码如下: var isIE = !-[1,]; 是不是很熟悉,但是有bug,就是不能检测ie9,为什么呢?那是因为这是国外大牛在ie9出来之前利用ie对数组转换的特性来完成的.ie9中已经进行了修复,所以在

  • ASP实现网页打开任何类型文件都提示保存的方法附代码

    相信大家平时都有这样的经历:页面上有一个链接指向服务器一个Word文件,当客户端机器有安装Office时,点击链接将调用Word打开浏览:当客户端机器没有安装Office时,点击链接将弹出保存对话框.总结一下即如果浏览器认识文件类型,就会自动打开:如果不认识,则会提示客户保存.可是有时候我们希望不管什么类型文件,都不要打开,直接让客户端保存.要达到这个要求,对于保存在服务器硬盘上的文件就得利用ASPUpload组件的SendBinary方法来实现,而对于保存在数据库中的文件则只须打开记录集,然后

  • C#对称加密(AES加密)每次生成的结果都不同的实现思路和代码实例

    思路:使用随机向量,把随机向量放入密文中,每次解密时从密文中截取前16位,其实就是我们之前加密的随机向量. 代码: public static string Encrypt(string plainText, string AESKey) { RijndaelManaged rijndaelCipher = new RijndaelManaged(); byte[] inputByteArray = Encoding.UTF8.GetBytes(plainText);//得到需要加密的字节数组

  • 给所有的超级练级都加上onmousemove时间的js代码

    blueidea google yahoo sun function attachLinksEvent() { var links=document.getElementsByTagName('a'); for(var i=0;i [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

  • 80%应聘者都不及格的JS面试题

    共 5024 字,读完需 6 分钟,速读需 2 分钟,本文首发于知乎专栏前端周刊.写在前面,笔者在做面试官这 2 年多的时间内,面试了数百个前端工程师,惊讶的发现,超过 80% 的候选人对下面这道题的回答情况连及格都达不到.这究竟是怎样神奇的一道面试题?他考察了候选人的哪些能力?对正在读本文的你有什么启示?且听我慢慢道来 不起眼的开始 招聘前端工程师,尤其是中高级前端工程师,扎实的 JS 基础绝对是必要条件,基础不扎实的工程师在面对前端开发中的各种问题时大概率会束手无策.在考察候选人 JS 基础

  • 分享15个大家都熟知的jquery小技巧

    帮助提高你jQuery应用的15个大家都熟知的jquery小技巧,分享给大家 回到顶部按钮 图片预加载 判断图片是否加载完 自动修补破损图像 Hover切换class类 禁用输入 停止正在加载的链接 toggle fade/slide 简单的手风琴 使两个DIV同等高度 在浏览器标签/新窗口打开外部链接 根据文本获取元素 可见变化的触发 Ajax调用错误处理 链式操作 1.回到顶部按钮 利用jQuery里的animate和scrollTop方法,你便不需要使用插件创建简单的滚动到顶部动画. //

  • jQuery判断多个input file 都不能为空的例子

    例如有两个图片上传的 input,都必须上传图片: html 复制代码 代码如下: 选择文件 1 :<input type="file" name="myfile[]" class="myfile"> 选择文件 2 :<input type="file" name="myfile[]" class="myfile"> js 复制代码 代码如下: if($(&quo

  • WEB前端开发都应知道的jquery小技巧及jquery三个简写

    一个简单技巧的集合,帮你提升 jQuery 技能.目前小编给大家整理了14个jquery小技巧. 目录结构 1回到顶部按钮 2预加载图片 3检查图片是否加载完毕 4自动修复损坏的图片 5Hover 上的 Class 开关 6禁用 input 字段 7停止链接加载 8淡入淡出/滑动开关 9简单的折叠效果 10将两个 Div 设为相同高度 11在新窗口打开外部链接 12找到文本元素 13切换可视与隐藏的触发器 下面给大家介绍每个小技巧的具体含义. 1.回到顶部按钮 通过使用 jQuery 中的 an

  • 都9102年了,你还用for循环操作集合吗

    前言 前段时间公司书架多了一本<Java8 实战>,毕竟久闻lambda的大名,于是借来一阅.这一看,简直是惊为天人啊,lambda,stream,java8里简直是满脑子骚操作,看我的一愣一愣的.我甚至是第一次感觉到了什么叫优雅. 本文主要介绍java8中的流处理,看看java8是怎么愉快的玩耍集合的,让我们来一起感受java8的魅力吧! 我就随便举个例子,看看Stream有多优雅. // 对苹果按颜色汇总并绩数量 Map<String, Long> appleCount = a

  • 数据库服务器构建和部署检查列表详解

    前言 我们可能经常安装和部署数据库服务器,但是可能突然忘记了某个设置,为后来的运维造成隐患.下面是国外大牛整理的的检查列表. 其实也包含了很多我们平时数据库配置的最佳实践.比如TEMPDB 文件的个数,比如数据库文件,日志文件如何存放,最大内存的设置等等.如果有补充的欢迎留言 正文 1. 机架和电缆服务器 确保每个电源插入不同的电源电路 果可能,请确保网络电缆已插入不同的网络交换机 2.SQL Server服务和SQL Server代理服务的使用域帐户. 在SQL Server 2012安装期间

随机推荐