我正在执行一个外部脚本，在 <script> 中使用 <head> > 。现在，由于脚本在页面加载之前执行，因此我无法访问 <body> 等等。我想在文档“加载”后执行一些 JavaScript（HTML 完全下载并在 RAM 中）。当我的脚本执行时，是否有任何可以在页面加载时触发的事件？原文由 Robin Rodricks 发布，翻译遵循 CC BY-SA 4.0 许可协议

如何在页面加载后执行 JavaScript？

2 个回答

得票最新

社区维基

1

发布于
2022-08-25

✓ 已被采纳

这些解决方案将起作用：

如评论中所述，使用 defer ：

 <script src="deferMe.js" defer></script>

或者

<body onload="script();">

或者

document.onload = function ...

甚至

window.onload = function ...

请注意， 最后一个选项是更好的选择， 因为它不显眼并且被认为更标准。

原文由 marcgg 发布，翻译遵循 CC BY-SA 4.0 许可协议

社区维基

1

发布于
2022-08-25

在适当的时候触发脚本

快速概述如何在打算加载/执行脚本时加载/运行脚本。

使用“延迟”

 <script src="script.js" defer></script>

使用 defer 将在 domInteractive (document.readyState = “interactive”) 之后和 “DOMContentLoaded” 事件被触发之前触发。如果您需要在加载所有资源（图像、脚本）后执行脚本，请使用“加载”事件或目标 document.readyState 状态之一。进一步阅读以获取有关这些事件/状态的更多信息，以及与脚本获取和执行时间相对应的异步和延迟属性。

此布尔属性设置为向浏览器指示脚本将在文档已被解析之后但在触发 DOMContentLoaded 之前执行。

具有 defer 属性的脚本将阻止 DOMContentLoaded 事件触发，直到脚本加载并完成评估。

资源： https ://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#attributes

\* 请参阅底部的图片了解羽毛说明。

事件侦听器 - 请记住，页面加载有多个事件：

“DOMContentLoaded”

当 初始 HTML 文档已完全加载和解析 时会触发此事件，而无需等待样式表、图像和子框架完成加载。在此阶段，您可以根据用户设备或带宽速度以编程方式优化图像和 CSS 的加载。

在加载 DOM 后执行（在图像和 CSS 之前）：

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

注意：同步 JavaScript 会暂停 DOM 的解析。如果您希望在用户请求页面后尽可能快地解析 DOM，您可以 将 JavaScript 转为异步 并优化样式表的加载

“加载”

一个非常不同的事件，**加载**，应该只用于检测*完全加载的页面*。在 DOMContentLoaded 更合适的地方使用 load 是一个非常普遍的错误，所以要小心。

在加载和解析所有内容后执行：

 document.addEventListener("load", function(){
    // ....
});

MDN 资源： https ://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded https://developer.mozilla.org/en-US/docs/Web/Events/load

所有事件的 MDN 列表：

https://developer.mozilla.org/en-US/docs/Web/Events

带有 readyStates 的事件侦听器 - 替代解决方案 (readystatechange)：

您还可以跟踪 document.readystatechange 状态以触发脚本执行。

 // Place in header (do not use async or defer)
document.addEventListener('readystatechange', event => {
  switch (document.readyState) {
    case "loading":
      console.log("document.readyState: ", document.readyState,
       `- The document is still loading.`
       );
      break;
    case "interactive":
      console.log("document.readyState: ", document.readyState,
        `- The document has finished loading DOM. `,
        `- "DOMContentLoaded" event`
        );
      break;
    case "complete":
      console.log("document.readyState: ", document.readyState,
        `- The page DOM with Sub-resources are now fully loaded. `,
        `- "load" event`
        );
      break;
  }
});

MDN 资源： https ://developer.mozilla.org/en-US/docs/Web/API/Document/readyState

将脚本放在哪里（有或没有异步/延迟）？

这对于了解将脚本放置在何处以及它在 HTML 中的位置以及延迟和异步等参数将影响脚本获取、执行和 HTML 阻塞也非常重要。

\* 在下图中，黄色标签“Ready”表示结束加载 HTML DOM 的时刻。然后它触发： document.readyState = “interactive” >>> defered scripts >>> DOMContentLoaded 事件（它是顺序的）；

如果您的脚本使用异步或延迟，请阅读： https ://flaviocopes.com/javascript-async-defer/

原文由 DevWL 发布，翻译遵循 CC BY-SA 4.0 许可协议

撰写回答

你尚未登录，登录后可以

和开发者交流问题的细节
关注并接收问题和回答的更新提醒
参与内容的编辑和改进，让解决方法与时俱进

推荐问题

如何在页面加载后执行 JavaScript？

在适当的时候触发脚本

使用“延迟”

事件侦听器 - 请记住，页面加载有多个事件：

“DOMContentLoaded”

“加载”

带有 readyStates 的事件侦听器 - 替代解决方案 (readystatechange)：

将脚本放在哪里（有或没有异步/延迟）？

你尚未登录，登录后可以

js 如何将Key属性相同的放在同一个数组？

Next.js做纯前端是否可行？

如何实现一个深拷贝函数？

git提交记录问题？

怎么获取动态弹出对话框的模拟单击？

问一个鼠标滚动事件，这种是怎么实现的？

什么是闭包？闭包有哪些应用场景？

Stack Overflow 翻译