Javascript DOMContentLoaded事件在Internet Explorer中未触发

Question

我有以下代码来将一个函数附加到 DOMContentLoaded 事件，但是在Internet Explorer 11中该函数从未被调用。

代码：

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

- Cedric Krause

---

你能指明在哪里调用这段代码吗？是在文档加载时还是按钮点击时？请创建一个 jsFiddle，这样我们可以更好地帮助你。 - MarmiK

Answer 1

它可能不会触发的几个原因：

1. 它已经触发过（在你附加事件处理程序之前）并且你错过了它。
2. 您正在运行旧版本的IE，该版本不支持DOMContentLoaded事件。
3. 在这些代码行之前存在某种脚本错误，因此这些代码行实际上没有被执行，因此事件处理程序实际上从未被注册。
4. 您正在尝试在嵌入式iFrame上执行此操作，并且可能没有正确的文档用于iFrame（某些浏览器在加载外部源时可以切换文档）。

要检查是否存在脚本错误，您应该在IE中打开调试控制台（按F12），并查看控制台以查看是否正在报告任何脚本错误。

您可以检查document.readyState === "complete"以查看它是否已经触发。

在IE9之前的版本中，您需要使用attachEvent，IE不支持DOMContentLoaded，因此您的else分支将无法正常工作。在那些较旧版本的IE中，您必须使用不同的检测方法。

您可以在这里看到一个经过充分测试、跨浏览器的纯javascript函数，用于在文档准备就绪时得到通知：pure JavaScript equivalent to jQuery's $.ready() how to call a function when the page/dom is ready for it。

- jfriend00

Answer 2

为了更好地解释这个问题，以下是一个可行的示例。我发现的问题是，除非在文档内联创建事件，否则 javascript 中的 DOMContentLoaded 将不会触发。

一个简单的解决方案是添加对文档 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();
}

- gkweb