Javascript DOMContentLoaded 事件未在 Internet Explorer 中觸發

Question

我有以下代碼將函數附加到DOMContentLoaded事件，但在 Internet Explorer 11 中從未調用該函數

代碼：

if (document.addEventListener) {
   document.addEventListener("DOMContentLoaded", init, false);
}
else {
   document.attachEvent("onDOMContentLoaded", init);
}

Answer 1

它可能不會觸發有幾個原因：

1. 它已經觸發（在您附加事件處理程序之前）並且您錯過了它。
2. 您正在運行不支持DOMContentLoaded事件的舊版 IE。
3. 在這些代碼行之前存在某種腳本錯誤，因此這些代碼行實際上並未執行，因此事件處理程序從未實際注冊過。
4. 您正在嘗試在嵌入式 iFrame 上執行此操作，並且可能沒有正確的 iFrame 文檔（某些瀏覽器可以在加載外部源時切換文檔）。

要檢查腳本錯誤，您應該在 IE 中打開調試控制台（按 F12）並查看控制台以查看是否報告了任何腳本錯誤。

您可以檢查document.readyState === "complete"是否已經觸發。

而且，在 IE9 之前的 IE 版本中，您需要attachEvent ，IE 不支持DOMContentLoaded因此您的 else 分支將不起作用。 您將不得不在那些舊版本的 IE 中使用不同的檢測方法。

您可以在這里看到一個經過良好測試的跨瀏覽器純 javascript 函數，用於在文檔准備好時獲得通知： 純 JavaScript 相當於 jQuery 的 $.ready() 如何在頁面/dom 准備好時調用函數。

Answer 2

用一個可行的例子來分解這個，見下文。 我發現的問題是DOMContentLoaded不會為javascript觸發，除非事件是在文檔本身內內聯創建的。

一個簡單的解決方案是向文檔readyState添加一個檢查。 如果它仍在加載 - 創建事件，因為DOMContentLoaded可能會觸發 - 否則只需立即加載，因為 DOM 已准備就緒。

var load = function () {
    console.log('I will always load, woohoo');
};

if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', load); // Document still loading so DomContentLoaded can still fire :)
} else {
    load();
}