专栏首页偏前端工程师的驿站JS魔法堂:精确判断IE的文档模式by特征嗅探

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;

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

四、总结                                    

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • .Net魔法堂:提取注释生成API文档

    一、前言                                 在多人协作的项目中,除了良好的代码规范外,完整的API文档也相当重要。通过文档我们快速...

    ^_^肥仔John
  • CSS魔法堂:深入理解line-height和vertical-align

    前言 一直听说line-height是指两行文本的基线间的距离,然后又说行高等于行距,最近还听说有个叫行间距的家伙,@张鑫旭还说line-height和vert...

    ^_^肥仔John
  • JS魔法堂:浏览器模式和文档模式怎么玩?

    一、前言                                         从IE8开始引入了文档兼容模式的概念,作为开发人员的我们可以在开发人员...

    ^_^肥仔John
  • CSS居中方法集锦

    这阵一直忙各路笔试面试,心越来越浮躁,也好久没有写些东西。不过也正是这些虐我千百遍的笔试面试题让我愈发地觉得确有必要整理一下知识点,让网上书上看的杂乱无章的东西...

    星回
  • ODL应用案例之云和网络功能虚拟化应用案例

    概述 近年来,大公司和中小企业已经认识到云计算技术是提高自己的竞争力的核心技术。混合云和公共云虽然具备了提高业务灵活性并降低总成本的潜力,但它们对于传统网络的需...

    SDNLAB
  • ODL应用案例之云和网络功能虚拟化应用案例

    概述 近年来,大公司和中小企业已经认识到云计算技术是提高自己的竞争力的核心技术。混合云和公共云虽然具备了提高业务灵活性并降低总成本的潜力,但它们对于传统网络的需...

    SDNLAB
  • 关于深度学习框架Hamaa与Python API文档生成工具Sophon

    当时我学习Deep Learning已有两个月,看了很多论文、教程与博客,于是尝试着去阅读Keras的源代码来学习别人是怎么实现的,尤其是back propa...

    用户1332428
  • 推荐几个Spring Cloud学习资料

    研究Spring Cloud也有一段时间了,手头上有一点收集的资料,分享给小伙伴们学习(公众号不允许外链,所以排版效果不太好,有兴趣的小伙伴点击文末阅读原文)。...

    江南一点雨
  • web前端薪资分为九段,你是哪一段?

    互联网的疯狂开展,让企业对开发人员的需求缺口越来越大,以至于呈现年薪40万前端职位,关键是:竟然仍是招不到人,够悲催的吧;而另一端,越来越多的人认识到这是一块大...

    企鹅号小编
  • 关系网络理论︱细讲中介中心性(Betweeness Centrality)

    中介中心性(Betweeness Centrality),又叫中间中心性,中间性,居间中心性等等。以下是学者们对中介中心性的解释。 中介中心性...

    素质

扫码关注云+社区

领取腾讯云代金券