IE11-IE不再任性了-关于attachEvent

今天解决了一个IE11的兼容问题,关于attachEvent的。

控件是ActiveX的,需要监听一个控件相关的事件。蓦然发现attachEvent在IE11不支持了...attachEvent不是IE专有的么?是啊,这是IE专属呃,这么多年,不离不弃。IE的attachEvent不支持捕获阶段的事件处理程序,并且同一个处理程序能添加多次。非标准的IE专属,在IE11,彻底自己抛弃了...

IE11不再任性,走上了标准化的道路...

好吧,那就看看IE11,在兼容性上,做了哪些更改吧...

  • User-agent 字符串更改
  • 文档模式更改
  • 传统 API 添加、更改和删除
  • URL 字符编码
  • 自定义数据属性
  • SVG“pointer-events”属性的 HTML 支持
  • 更新反映对基于标准的规范的更改
    • 弹性框(“Flexbox”)布局更新
    • 突变观察者
    • 指针事件

User-agent 字符串更改

对于许多传统网站,针对 IE11 的一些最明显的更新涉及 user-agent 字符串。 以下是针对 Windows 8.1 上的 IE11 报告的内容:

JavaScript

Mozilla/5.0 (Windows NT 6.3; Trident/7.0; rv:11.0) like Gecko

用户代理字符串的特定值会因诸多因素(例如,运行浏览器的操作系统、运行浏览器的设备以及网站是否采用兼容性视图显示)而有所不同。 有关详细信息,请参阅用户代理字符串更改。

与先前版本的 Internet Explorer 一样,部分 user-agent 字符串会因环境条件的不同而有所差异。 以下是针对 Windows 7 上的 IE11 显示的字符串:

JavaScript

Mozilla/5.0 (Windows NT 6.1; Trident/7.0; rv:11.0) like Gecko

如果将这些 user-agent 字符串与早期版本的 Internet Explorer 报告的字符串进行比较,你会发现以下更改:

  • 兼容 ("兼容") 和浏览器 ("MSIE") 令牌已删除。
  • "like Gecko" 令牌已添加(以便与其他浏览器一致)。
  • 浏览器版本现在由新版本 ("rv") 令牌报告。

这些更改有助于防止 IE11 被(错误)标识为较早的版本。

通常,应避免检测特定浏览器或浏览器版本。 基于此类测试的假设易于在更新浏览器时导致误报。 相反,在你需要使用功能时检测功能并使用渐进增强为不支持所需功能的浏览器或设备提供简化体验。

在极少数情况下,必须唯一地标识 IE11。 使用 Trident 令牌来执行此操作。

文档模式更改

Windows Internet Explorer 8 中引入了文档模式,这些模式可以帮你实现从早期版本的浏览器支持的功能转换为现行标准和其他浏览器指定的功能。 Windows Internet Explorer 的后续版本继续使用此转换,方法是引入对行业标准所定义功能的支持的同时,引入模拟早期版本所支持功能的新文档模式。

当许多网站已更新为向其他浏览器提供更丰富的体验时,某些网站仍继续使用现有的传统功能支持向 Internet Explorer 提供传统体验,即便最新版本的浏览器支持为其他浏览器呈现的体验。

从 IE11 开始,边缘模式成为首选文档模式;它代表可供浏览器使用的现行标准的最高支持。

使用 HTML5 文档类型声明启用边缘模式:

HTML

<!doctype html>

Internet Explorer 8 中引入了边缘模式并且每个后续版本中也提供了该模式。 注意,边缘模式支持的功能会限制为呈现内容的特定浏览器版本支持的功能。

从 IE11 开始,文档模式被弃用,除了临时情况外不应再使用。 请确保更新依赖于传统功能和文档模式的站点,以便反映现行标准。

如果必须针对特定文档模式,以便在重新运行站点来支持现行标准和功能时站点能够工作,则请注意,你使用的是过渡功能,以后的版本中可能不提供该功能。

如果你当前针对传统文档模式使用 x-ua-compatible 标头,则你的站点可能无法反映适用于 IE11 的最佳体验。 有关详细信息,请参阅 modern.ie。

传统 API 添加、更改和删除

许多网站查找支持传统 (HTML4) 功能的浏览器,目的是提供针对早期浏览器优化的体验。 对于支持传统功能和现行标准(如 HTML5、CSS3 等)的浏览器,这是一个问题。 如果站点在搜索现行标准支持之前检测到传统功能,则可以为支持现行标准的浏览器提供传统体验和更丰富的体验。

因此,IE11 添加、更改、删除了许多默认的传统功能:

  • navigator.appName 属性现在会返回 "Netscape" 以反映 HTML5 标准和匹配其他浏览器的行为。
  • navigator.product 属性现在会返回 "Gecko" 以便反映 HTML5 标准和匹配其他浏览器的行为。
  • XDomainRequest 对象被 XMLHttpRequest 的 ORS 替换。
  • 已添加对 __proto__ 的支持。
  • 已添加 dataset 属性。

另外,为了支持现行标准指定的功能,已删除若干传统 API 功能:

删除 API 功能 替代功能
attachEvent addEventListener
window.execScript eval
window.doScroll window.scrollLeftwindow.scrollTop
document.all document.getElementById
document.fileSizeimg.fileSize 使用 XMLHttpRequest 可提取源
script.onreadystatechangescript.readyState script.onload
document.selection window.getSelection
document.createStyleSheet document.createElement("style")
style.styleSheet style.sheet
window.createPopup 使用 diviframezIndex 值很高)
二进制行为 变化;使用基于标准的等效,如 canvas、SVG 或 CSS3 动画
传统数据绑定 使用框架提供的数据绑定,如 WinJS

这些更改在某种程度上可阻止编得不好的 user-agent 检测机制(错误地)将 Internet Explorer 标识为较早版本。  因此,依靠现行标准的站点按预期显示。

URL 字符编码

IE11 更改了 URL 的字符编码。 具体来说,现在使用 UTF-8 字符编码对查询字符串和 XHR 请求进行编码。

此更改会影响所有 URL,但以下除外:

  • 定位名称组件(也称为“片断”)。
  • 用户名和密码组件。
  • file:// or ftp:// protocol links。

这些更改与其他浏览器行为匹配并简化了跨浏览器 XHR 代码。

自定义数据属性

IE11 添加了对 HTML5 自定义数据属性和 dataset 属性的支持,可以提供对它们的编程访问权限。你可以使用 data- 前缀后跟属性名称的方式来向元素分配数据属性:

HTML

<div data-example-data="Some data here"></div>

要获取或设置数据属性的值,请使用此语法:

JavaScript

   // to get
   var myData = element.dataset.exampleData;
   // to set
   element.dataset.exampleData = "something new";

SVG“pointer-events”属性的 HTML 支持

从 IE11 开始,也支持 pointer-events 作为 HTML 元素上的 CSS 属性,其效果如下:

描述


该元素不会触发指针输入事件(无法进行点击测试)。


其他有效的指针事件值


该元素会触发指针输入事件。

默认情况下将继承 pointer-events 属性,所以会影响应用该属性的元素的所有后代。

更新反映对基于标准的规范的更改

IE11 还包括用于支持基于标准的 Web 规范(已更新或仍在发展)的更新。 这其中包括与支持下列功能相关的更改:

弹性框(“Flexbox”)布局更新

使用 IE11,你可以更新站点来与最新的弹性框标准保持一致并简化跨浏览器的代码。

有关详细信息,请参阅"弹性框(“Flexbox”)布局更新"。

突变观察者

突变观察者是 IE11 中新的标准 Web 平台功能,提供了对突变事件支持的所有相同方案的快速执行直接替代,以及对属性更改事件支持的方案的替代。

有关详细信息,请参阅"突变观察者"和"将突变事件和属性更改事件迁移到突变观察者"。

指针事件

为了符合万维网联合会 (W3C)  指针事件规范的候选推荐,与 Internet Explorer 10 相比,IE11 实现已略有更改。

时间: 2024-10-29 19:12:35

IE11-IE不再任性了-关于attachEvent的相关文章

jquery.ready可以在文档加载后尽快执行对文档的操作

jquery 1.12.4中ready的关键代码 1 jQuery.ready.promise = function( obj ) { 2 if ( !readyList ) { 3 4 readyList = jQuery.Deferred(); 5 6 // Catch cases where $(document).ready() is called 7 // after the browser event has already occurred. 8 // Support: IE6-1

浅谈js之事件处理

上一篇是谈的事件流,博客地址:点我:这次我们说说具体的事件处理. 0x00:事件处理程序 现在有三种方式注册事件处理程序: HTML事件处理程序 DOM0级事件处理程序 DOM2级事件处理程序 001:HTML事件处理程序 就是说给html标签的属性设置事件处理程序:例如: <p onclick="alert('hello')">点我</p> p标签的属性onclick,把它的值设置成javascript代码字符串:这就是早期的js的用法 现在这个方式,用的不多

关于JavaScript中注册和移除事件

为元素注册事件的方式:3个 1. 对象.on+"事件类型名字"=事件处理函数(命名函数或者匿名函数) 例子: document.getElementById("btn").onclick=function(){}; document.getElementById("btn")["on"+"click"]=function(){}; 2. 对象.addEventListener("事件类型名字&qu

告别2015 ,告别过去的自己

今天是2016年的大年初一,我已经21,开学就是大二的第二个学期了,我要给自己一个新的状态. 好久没有写文章了,是自己懒惰了,不知不觉过的好快,我都大二了,我并不是一个怀旧的人,但往日的情景,故人都时时的警告着自己,你已经是个成年人了,该要负起责任了,不能在任性了,不能在优柔寡断了.时间的磨练让我变得更加的现实,“梦想很美好,现实很骨感”无论是上学.工作.爱情. 之前就一直想写点东西,有想法但没有行动,一切为零,身边的同学都很优秀,我想更加的优秀. 在过去的大学时光里,觉得自己并没有白费,拿过国

从读者到开发技术者

我再来提供一个视角吧. 给<a>标签增加href属性,就意味着以下事情: :link选择器可以选择到它 这个a标签可以获得焦点(可以通过tab按键访问到) 在浏览器的默认样式表中,有href属性的<a>标签才有cursor:pointer的效果(尤其是在低版本的IE上). 绑定了onclick事件的<a>标签,尤其是它的作用是ajax请求时,基本上我们就用不上这个标签的默认行为,也连接不到的实际页面,一般而言也会在CSS里给予了这个元素的cursor等样式.这时候还要加

浅谈WEB跨域的实现(前端向)

同源策略/SOP(Same origin policy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,浏览器很容易受到XSS.CSFR等攻击(可以参考我的这篇文章). SOP要求两个通讯地址的协议.域名.端口号必须相同,否则两个地址的通讯将被浏览器视为不安全的,并被block下来.比如“http页面”和“https页面”属于不同协议:“qq.com”.“www.qq.com”.“a.qq.com”都属于不同域名(或主机):“a.com”和“a.com:8000”属于不同端口

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

一.前言 苦逼的前端攻城狮都深受浏览器兼容之苦,再完成每一项功能前都要左顾右盼,生怕浏览器不支持某个API,生怕原生API内含臭虫因此判断浏览器类型和版本号成了不可绕过的一道关卡,而特征嗅探是继浏览器探测后另一利器处理上述问题. 二.何为特征嗅探 从前我们都是通过对navigator.userAgent或navigator.appName两个属性值进行特定字符串匹配和萃取来区分浏览器类型和获取版本号的.但随着IE8提供可选的文档兼容性模式设置和各种加壳浏览器的出现,导致无法通过navigator

图解几个与Linux网络虚拟化相关的虚拟网卡-VETH/MACVLAN/MACVTAP/IPVLAN

Linux的网卡驱动中内含了很多"虚拟网卡".早先的文章曾经详细分析过tun,ifb等虚拟网卡,类似的思路,在虚拟化大行其道的趋势下,Linux源码树中不断增加对"网络虚拟化"的支持,不光是为了支持"虚拟机"技术,更多的是给了用户和程序员更多的选择.       这些对网络虚拟化的支持技术包括任何重量级的虚拟化技术,比较重的比如对虚拟机技术的支持,轻量级的则是net namespace技术.近期的工作基于net namespace技术,关于这个技

给&lt;a&gt;标签增加href属性 ~~~ 转转

给<a>标签增加href属性,就意味着以下事情: :link选择器可以选择到它 这个a标签可以获得焦点(可以通过tab按键访问到) 在浏览器的默认样式表中,有href属性的<a>标签才有cursor:pointer的效果(尤其是在低版本的IE上). 绑定了onclick事件的<a>标签,尤其是它的作用是ajax请求时,基本上我们就用不上这个标签的默认行为,也连接不到的实际页面,一般而言也会在CSS里给予了这个元素的cursor等样式.这时候还要加上href属性,是为了: