今天解決了一個IE11的兼容問題,關於attachEvent的。
控件是ActiveX的,需要監聽一個控件相關的事件。驀然發現attachEvent在IE11不支持了...attachEvent不是IE專有的么?是啊,這是IE專屬呃,這么多年,不離不棄。IE的attachEvent不支持捕獲階段的事件處理程序,並且同一個處理程序能添加多次。非標准的IE專屬,在IE11,徹底自己拋棄了...
IE11不再任性,走上了標准化的道路...
問題至此並沒有解決,使用addEventListener仍然沒有監聽到ActiveX的事件,最后在MSDN找到了解決方案:
<!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>
另外還有幾個方案,可參看:
好吧,那就再看看IE11,在兼容性上,做了哪些更改吧...
- User-agent 字符串更改
- 文檔模式更改
- 傳統 API 添加、更改和刪除
- URL 字符編碼
- 自定義數據屬性
- SVG“pointer-events”屬性的 HTML 支持
- 更新反映對基於標准的規范的更改
- 彈性框(“Flexbox”)布局更新
- 突變觀察者
- 指針事件
User-agent 字符串更改
對於許多傳統網站,針對 IE11 的一些最明顯的更新涉及 user-agent 字符串。 以下是針對 Windows 8.1 上的 IE11 報告的內容:
Mozilla/5.0 (Windows NT 6.3; Trident/7.0; rv:11.0) like Gecko
用戶代理字符串的特定值會因諸多因素(例如,運行瀏覽器的操作系統、運行瀏覽器的設備以及網站是否采用兼容性視圖顯示)而有所不同。 有關詳細信息,請參閱用戶代理字符串更改。
與先前版本的 Internet Explorer 一樣,部分 user-agent 字符串會因環境條件的不同而有所差異。 以下是針對 Windows 7 上的 IE11 顯示的字符串:
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 文檔類型聲明啟用邊緣模式:
<!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.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- 前綴后跟屬性名稱的方式來向元素分配數據屬性:
<div data-example-data="Some data here"></div>
要獲取或設置數據屬性的值,請使用此語法:
// 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 實現已略有更改。
