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

  尊重原创,转载请注明来自:http://www.cnblogs.com/fsjohnhuang/p/3818947.html,^_^肥仔John

 

如果您觉得本文的内容有趣就扫一下吧!捐赠互勉!

本文转自^_^肥仔John博客园博客,原文链接:http://www.cnblogs.com/fsjohnhuang/p/3818947.html,如需转载请自行联系原作者


版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
阿里云服务器怎么设置密码?怎么停机?怎么重启服务器?
如果在创建实例时没有设置密码,或者密码丢失,您可以在控制台上重新设置实例的登录密码。本文仅描述如何在 ECS 管理控制台上修改实例登录密码。
9865 0
使用SSH远程登录阿里云ECS服务器
远程连接服务器以及配置环境
2481 0
windows server 2008阿里云ECS服务器安全设置
最近我们Sinesafe安全公司在为客户使用阿里云ecs服务器做安全的过程中,发现服务器基础安全性都没有做。为了为站长们提供更加有效的安全基础解决方案,我们Sinesafe将对阿里云服务器win2008 系统进行基础安全部署实战过程! 比较重要的几部分 1.
9117 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,阿里云优惠总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系.
13593 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,云吞铺子总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系统盘、创建快照、配置安全组等操作如何登录ECS云服务器控制台? 1、先登录到阿里云ECS服务器控制台 2、点击顶部的“控制台” 3、通过左侧栏,切换到“云服务器ECS”即可,如下图所示 通过ECS控制台的远程连接来登录到云服务器 阿里云ECS云服务器自带远程连接功能,使用该功能可以登录到云服务器,简单且方便,如下图:点击“远程连接”,第一次连接会自动生成6位数字密码,输入密码即可登录到云服务器上。
22270 0
阿里云ECS云服务器初始化设置教程方法
阿里云ECS云服务器初始化是指将云服务器系统恢复到最初状态的过程,阿里云的服务器初始化是通过更换系统盘来实现的,是免费的,阿里云百科网分享服务器初始化教程: 服务器初始化教程方法 本文的服务器初始化是指将ECS云服务器系统恢复到最初状态,服务器中的数据也会被清空,所以初始化之前一定要先备份好。
7233 0
阿里云服务器ECS登录用户名是什么?系统不同默认账号也不同
阿里云服务器Windows系统默认用户名administrator,Linux镜像服务器用户名root
4375 0
4852
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载