Javascript DOMContentLoaded 事件未在 Internet Explorer 中触发答案

【问题标题】：Javascript DOMContentLoaded event not firing in Internet ExplorerJavascript DOMContentLoaded 事件未在 Internet Explorer 中触发
【发布时间】：2014-07-23 07:13:25
【问题描述】：

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

代码：

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

【问题讨论】：

你能指定你在哪里调用这个代码，任何文档加载或按钮点击！？？请创建一个 jsFiddle，以便我们提供更好的帮助。

标签： javascript internet-explorer dom-events

【解决方案1】：

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

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

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

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

而且，在 IE9 之前的 IE 版本中，您需要 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。

【讨论】：

【解决方案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();
}

【讨论】：