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();
}