【问题标题】：document.readyState on DOMContentLoaded?DOMContentLoaded 上的 document.readyState？
【发布时间】：2012-11-01 01:20:12
【问题描述】：

在支持事件DOMContentLoaded和属性document.readyState的浏览器中：

当DOMContentLoaded 触发时，我是否可以假设document.readyState 的值将始终为"complete" 或"interactive"/"loaded"？

（或者可能是document.readyState 有时仍然具有"loading" 的值？）

在您的回答中，请提供对权威来源的参考。

您可能想知道：为什么不只听readystatechange？因为Android 2.3.5标准浏览器是目标平台，没有实现readystatechange事件。

【问题讨论】：

为什么不听DOMContentLoaded？ ;-)
我很确定 Android 2.3 支持 readystatechange 事件，但只是使用加载而不是交互/完成。我会调查并回来。
更新 - 确实你是对的。我在这里做了一个小测试：test.it-kollektivet.dk/white-space/android2.3.html 但是我从 document.readyState 得到的唯一值是 loading 和 loaded。

标签： javascript dom cross-browser dom-events

【解决方案1】：

DOMContentLoaded 触发后，readyState 属性的值始终为 "interactive"。 MDN documentation 声称：

// alternative to DOMContentLoaded event
document.onreadystatechange = function () {
  if (document.readyState == "interactive") {
    initApplication();
  }
}

可与DOMContentLoaded 处理程序互换。您还可以查看规范 here，它重申了这一点。

【讨论】：

不幸的是，这在 Android 2.3.5 上是不正确的。我刚刚做了一个测试，结果完全出乎我的意料：当DOMContentLoaded触发时，document.readyState的值是"loaded"（即既不是"complete"，也不是"interactive"，也不是"loading"）。
@feklee 那一定是因为没有子资源，在这种情况下 DOMContentLoaded 和 load 事件同时触发。仔细查看我链接的规范。
@feklee 我很好奇；就您的问题而言，此答案并不完全准确。你为什么接受它？更重要的是，你是如何解决这个问题的？谢谢
我很欣赏这是一个非常古老的答案，但有一个细微的差别真的让我很吃惊。 readyState 设置为interactive before 具有defer 属性的脚本被评估，而DOMContentLoaded 被触发after。
@MTCoster 我正在使用脚本自动化浏览器，这条评论对于找出 readyState 交互式和 webnavigation.onDomContentLoaded 之间的区别非常有帮助。谢谢！

【解决方案2】：

当DOMContentLoaded 被触发时，readyState 属性的值至少为"interactive"。正如@MTCoster 指出的here，该事件被推迟到具有defer 属性和module 脚本的链接脚本（链接或内联）已执行。另见this post。

【讨论】：

【解决方案3】：

根据接受的答案：

当DOMContentLoaded 被触发时，readyState 属性的值始终为"interactive"。

错误

它有：

interactive
complete

文档。就绪状态 ref.

在文档加载时返回"loading"，在完成解析但仍在加载子资源后返回"interactive"，在加载后返回"complete"。

如果将事件侦听器附加到readystatechange 之前文档的状态为interactive，则可以单独检查interactive，例如来自MDN 的示例。然后如果它到达它就会捕获状态。

但是，如果在稍后阶段检查状态，则不是。

同样来自 MDN，这些是相等的：

document.onreadystatechange = function () {
  if (document.readyState === 'interactive') {
    initApplication();
  }
}


document.addEventListener("DOMContentLoaded", function () {
    initApplication();
});

这并不意味着：

if (document.readyState !== 'loading')
    assert(document.readyState === 'interactive')

答案表明。

话说：

document.addEventListener("DOMContentLoaded", ...

永远不会等于：

window.addEventListener('load', ...

【讨论】：