JS魔法堂:精确判断IE的文档模式by特征嗅探

简介:

一、前言                              

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

 

二、何为特征嗅探                                

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

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

 

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



// 判断是否为IE
var isIE = navtigator.userAgent.toLocaleLowerCase().indexOf('msie') !== -1;

// 判断是否为IE5678
var 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魔法堂:浏览器模式和文本模式怎么玩?》也许会更易理解本篇内容。


目录
相关文章
|
2月前
|
监控 JavaScript 前端开发
JavaScript与HTML关系及其嵌入方式:新手常犯错误与规避策略
【4月更文挑战第1天】本文介绍了JavaScript与HTML的关系,强调了理解它们的分工和协作对于初学者的重要性。文中列举了新手在嵌入JavaScript时常见的错误,如嵌入位置不当、异步与延迟属性混淆、内联脚本与HTML混杂、忽略浏览器兼容性以及缺乏错误处理。提供了避免这些错误的策略,包括合理安排script标签、使用事件监听器、关注浏览器兼容性、学习调试技巧,并提倡遵循“结构-样式-行为”分离原则和使用错误处理机制。遵循这些最佳实践,有助于提高代码质量和开发效率。
35 1
|
2月前
|
JavaScript 前端开发
js中模糊搜索 模糊匹配如何实现?
js中模糊搜索 模糊匹配如何实现?
文本,学习方法,必须做,快的学习方法,统计汇总写法,比如你要构思一个数学库,需要写一个汇总,主动获取标题统计,主动生成文章跳转链接,然后将它打入文章资料当中:
文本,学习方法,必须做,快的学习方法,统计汇总写法,比如你要构思一个数学库,需要写一个汇总,主动获取标题统计,主动生成文章跳转链接,然后将它打入文章资料当中:
|
11天前
|
前端开发 JavaScript C++
前端 JS 经典:判断数组的准确方法
前端 JS 经典:判断数组的准确方法
9 0
|
24天前
|
JavaScript 前端开发 Java
信息打点-JS架构&框架识别&泄漏提取&API接口枚举&FUZZ&插件项目
信息打点-JS架构&框架识别&泄漏提取&API接口枚举&FUZZ&插件项目
|
2月前
|
JavaScript 前端开发
JavaScript模糊搜索功能
JavaScript模糊搜索功能
|
8月前
|
机器学习/深度学习 自然语言处理 安全
【网安专题11.8】14Cosco跨语言代码搜索代码: (a) 训练阶段 相关程度的对比学习 对源代码(查询+目标代码)和动态运行信息进行编码 (b) 在线查询嵌入与搜索:不必计算相似性
【网安专题11.8】14Cosco跨语言代码搜索代码: (a) 训练阶段 相关程度的对比学习 对源代码(查询+目标代码)和动态运行信息进行编码 (b) 在线查询嵌入与搜索:不必计算相似性
212 0
|
前端开发 JavaScript 异构计算
页面渲染合成(补充)
在上一篇文章老生常谈之从输入URL到页面呈现的过程中描述了页面渲染流程,其中涉及页面的布局(Layout)和绘制(Painting),实际在绘制之后还有一个步骤叫做合成(Compositing)。
|
JavaScript 前端开发
JS原始值创建背后发生的故事
Js初学者又或者是使用者都会产生这么一个疑惑: “我们声明的字符串变量为什么可以以类似对象的形式来调用方法,比如str.toString()” ,当然不只是字符串类型,还有布尔,数值类型,他们都属于原始值类型,本文将带你了解这三种原始值的创建,背后发生了什么,为什么可以以对象形式来调用方法,又或者是属性。
47 0
|
JavaScript 前端开发
JavaScript 制作百度输入预测功能
JavaScript 制作百度输入预测功能
128 0
JavaScript 制作百度输入预测功能