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

时间  2020-09-19 标签 ie11 再也不 任性 关于 attachevent

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

  控件是ActiveX的，须要监听一个控件相关的事件。蓦然发现attachEvent在IE11不支持了...attachEvent不是IE专有的么？是啊,这是IE专属呃，这么多年，不离不弃。IE的attachEvent不支持捕获阶段的事件处理程序，而且同一个处理程序能添加屡次。非标准的IE专属，在IE11，完全本身抛弃了...html

  IE11再也不任性，走上了标准化的道路...java

  问题至此并无解决，使用addEventListener仍然没有监听到ActiveX的事件，最后在MSDN找到了解决方案：web

<!DOCTYPE html>
<html>
    <head>
        <title>TestEvent Example HTML</title>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <script language='javascript' for="testAxEvent" event="testEvent(szType, szValue)">
        // Test 1 - statically load the script (This is the basis for the hack)
        // Works on IE8, IE9, IE10 and IE11
            var MSG = document.getElementById("msg");
            MSG.innerHTML = szType + " : " + szValue;
        </script>
    </head>
    <body>
        <table>
            <tr>
                <td>
                    <OBJECT ID='testAxEvent' CLASSID='CLSID:BA19A985-C93E-491B-B801-2EB7F903C8CE' codebase="testAxEvent.cab"></OBJECT>
                </td>
            </tr>
            <tr><td  height='30'></td></tr>
            <tr>
                <td align=center><font size=5><div id='msg'></div></font>    
            </tr>
        </table>
    </body>
</html>
监听ActiveX事件@IE11

  另外还有几个方案，可参看：编程

 https://social.msdn.microsoft.com/Forums/ie/en-US/47eccb01-8089-4653-a0ce-45e9ced5e228/addeventlistener-for-activex-events-in-ie11?forum=iewebdevelopmentcanvas

  好吧，那就再看看IE11，在兼容性上，作了哪些更改吧...浏览器

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

User-agent 字符串更改app

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

 

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

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

与先前版本的 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) 功能的浏览器，目的是提供针对早期浏览器优化的体验。 对于支持传统功能和现行标准（如 HTML五、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.scrollLeft、window.scrollTop
document.all document.getElementById
document.fileSize、img.fileSize 使用 XMLHttpRequest 可提取源
script.onreadystatechange 和 script.readyState script.onload
document.selection window.getSelection
document.createStyleSheet document.createElement("style")
style.styleSheet style.sheet
window.createPopup 使用 div 或 iframe（zIndex 值很高）
二进制行为 变化；使用基于标准的等效，如 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 实现已略有更改。

联系我们 沪ICP备13005482号-10