博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
JS魔法堂:精确判断IE的文档模式by特征嗅探
阅读量:6678 次
发布时间:2019-06-25

本文共 1994 字,大约阅读时间需要 6 分钟。

一、前言                              

  苦逼的前端攻城狮都深受浏览器兼容之苦,再完成每一项功能前都要左顾右盼,生怕浏览器不支持某个API,生怕原生API内含臭虫因此判断浏览器类型和版本号成了不可绕过的一道关卡,而特征嗅探是继浏览器探测后另一利器处理上述问题。

 

二、何为特征嗅探                                

 从前我们都是通过对navigator.userAgent或navigator.appVersion两个属性值进行特定字符串匹配和萃取来区分浏览器类型和获取版本号的。但随着IE8提供可选的文档兼容性模式设置和各种加壳浏览器的出现,导致无法通过navigator.userAgent和navigator.appVersion的属性值准确判断浏览器实际提供的API特性和文档模式,于是就出现特征嗅探的做法。其实特征嗅探就是解决两种问题,第一、是否支持某特性;第二、当前的文档模式是什么(注意是文档模式,不是浏览器版本号)。

   而著名的 var isLteIE8 = !+[1,];就是判断是否处于IE5678的文档模式下的特征嗅探。

 

三、判断IE当前的文档模式                            

// 判断是否为IEvar isIE = navtigator.userAgent.toLocaleLowerCase().indexOf('msie') !== -1;
// 判断是否为IE5678var isLteIE8 = isIE && !+[1,];
 
// 用于防止因通过IE8+的文档兼容性模式设置文档模式,导致版本判断失效 var dm = document.documentMode,   isIE5, isIE6, isIE7, isIE8, isIE9, isIE10, isIE11; if (dm){
  isIE5 = dm === 5;   isIE6 = dm === 6;   isIE7 = dm === 7;   isIE8 = dm === 8;   isIE9 = dm === 9;   isIE10 = dm === 10;   isIE11 = dm === 11; } else{
// 判断是否为IE5,IE5的文本模式为怪异模式(quirks),真实的IE5.5浏览器中没有document.compatMode属性isIE5 = (isLteIE8 && (!document.compatMode || document.compatMode === 'BackCompat'));  // 判断是否为IE6,IE7开始有XMLHttpRequest对象  isIE6 = isLteIE8 && !isIE5 && !XMLHttpRequest;  // 判断是否为IE7,IE8开始有document.documentMode属性  isIE7 = isLteIE8 && !isIE6 && !document.documentMode;  // 判断是否IE8  isIE8 = isLteIE8 && document.documentMode;  // 判断IE9,IE10开始支持严格模式,严格模式中函数内部this为undefined  isIE9 = !isLteIE8 && (function(){   "use strict";   return !!this;  }());  // 判断IE10,IE11开始移除了attachEvent属性  isIE10 = isIE && !!document.attachEvent && (function(){   "use strict";   return !this;  }());   // 判断IE11  isIE11 = isIE && !document.attachEvent; }

  注意:若通过IE8+通过指定文档兼容性模式的方式,设置为IE6的文档模式,那么上述的 var isIE6 = isLteIE8 && !isIE5 && !XMLHttpRequest 将判断错误,因为这时XMLHttpRequest是存在的,这是由于文档兼容性模式仅仅是尽量模拟旧版本浏览器而已,不完全等同于旧版本浏览器。所以可直接通过document.documentMode来判断当前文档模式。

 

四、总结                                    

  由于本篇重在代码实现上,结合《JS魔法堂:浏览器模式和文本模式怎么玩?》也许会更易理解本篇内容。

  尊重原创,转载请注明来自:,^_^肥仔John

 

你可能感兴趣的文章
AOP学习-基于Emit和Attribute的简单AOP实现
查看>>
【数据库设计】“Max加一”生成主键的注意点
查看>>
Spring Cloud在国内中小型公司能用起来吗?
查看>>
mongodb 关闭服务 mongod -f /root/mongodb/bin/xx.conf --shutdown
查看>>
在dw下安装zen coding,并对其快捷键进行修改
查看>>
Windows Mobile上的HTML解析器
查看>>
Linux系统时间与RTC时间【转】
查看>>
Android -- isInEditMode
查看>>
JavaScript: JavaScript的简介和入门代码演示
查看>>
Windows Phone 7 开发 视频资料
查看>>
iOS:一些常用的框架
查看>>
Android开发环境——Eclipse ADT相关内容汇总
查看>>
C语言-函数
查看>>
Objective-C:用命令行参数的格式对文件进行IO操作
查看>>
一道算法题,看看大家的思路
查看>>
微软发布Project Oxford,供Azure户免费集多项功能
查看>>
Tslib触摸屏官网【转】
查看>>
Android——BitMap(位图)相关知识总结贴
查看>>
JAVA8之日期操作详解
查看>>
JavaScript-json数组排序
查看>>