加载页面时运行代码答案

【问题标题】：Run code when the page is loaded加载页面时运行代码
【发布时间】：2012-05-26 07:49:49
【问题描述】：

here 或 there 对此没有得到答复。这些问题措辞不佳，答案都是“使用 DOMReady”。

我想确保代码仅在页面加载完成后运行。我无法更改 HTML 文件本身，但如果可以的话，我会做一些类似这样的事情：

<!DOCTYPE html>
<html>
  <head>
    <script>window.loaded=false;</script>
  </head>
  <body onload="window.loaded=true;">
    <!-- ... -->
  </body>
</html>

然后在我的代码中：

if (window.loaded) { run(); }
else { document.addEventListener("load", run); }

而这正是我想要的。不幸的是，我无法修改 HTML，这意味着我正在寻找一种方法来确定文档是否已加载（如果 DOM 已准备好，不是）仅从 JS 代码.

我环顾四周，但到目前为止，我发现的一切都围绕着 DOMReady。真的没有人找过这个吗？

【问题讨论】：

总之，DOMReady 不在 HTML5 规范中的任何位置，它是一个术语，对于在 HTML5 规范完全开发之前实现它的不同人来说意味着不同的事物。

标签： javascript load

【解决方案1】：

正如莫勒博士所指出的，document.readyState 包含您所追求的属性：

document . readyState

在文档加载时返回“正在加载”，在完成解析但仍在加载子资源后返回“交互”，在加载后返回“完成”。

当此值更改时，Document 对象上会触发 readystatechange 事件。

事件触发和 readyState 更改的顺序在 HTML5 规范的 end of parsing 部分中定义。总结：

解析完成后，文档readyState 立即设置为"interactive"。
DOMContentReady 事件几乎立即触发（在确定需要加载哪些资源之后）。
这些资源已加载。
文档readyState 设置为“完成”并触发load 事件。

【讨论】：

我从我的帖子中删除了一些不正确的信息。 DOMContentLoaded 与 readyState="complete" 不同，如 HTML5 规范的 post-parsing 部分所述
确实如此。所以，我做了这个：gist.github.com/2792934。总结一下：DOMContentLoaded 在加载 DOM 时运行。 onload 在所有内容加载后运行。 readyState 在此之前设置为 "complete"。因此，你们都是对的，但我仍然想知道所有不同且模棱两可的命名:)
DOMReady 从来都不是一个官方术语，但在 HTML5 规范发展到目前的状态之前，人们需要一个术语来指代。现在我想很多混乱来自人们将正确的术语与旧名称混合在一起

【解决方案2】：

当 DOM 和所有资源（脚本、图像、样式表等）完成加载时，会触发窗口的 onload 事件：

window.onload=function()
{
  //run code 
}

【讨论】：

是的，确实如此。但这不是我要问的。如果我的代码在onload 事件触发后运行，则此操作失败。
document.readyState 是另一种选择：developer.mozilla.org/en/DOM/document.readyState。加载文档后返回“完成”。
不，它是 not。 我特别要求 not DOMReady。引用您链接到的文档：“替代 DOMContentLoaded”。
DOM 和文档是两个不同的东西