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

我正在使用<head>内<script>执行外部脚本。

现在，由于脚本是在页面加载之前执行的，因此我无法访问<body> 。在文档 “加载” 之后（HTML 已完全下载并在 RAM 中），我想执行一些 JavaScript。执行脚本时，是否有任何我可以挂上的事件，这些事件将在页面加载时触发？

答案

这些解决方案将起作用：

<body onload="script();">

或者

document.onload = function ...

甚至

window.onload = function ...

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

请记住，加载页面有多个阶段。顺便说一句，这是纯 JavaScript

“DOMContentLoaded”

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

在加载 DOM 之后执行（在 img 和 css 之前）：

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

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

“加载”

完全不同的事件load只能用于检测已满的页面。在 DOMContentLoaded 更合适的地方使用负载是一个非常普遍的错误，因此请务必谨慎。

加载并解析所有内容后的摘录：

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

MDN 资源：

https://developer.mozilla.org/zh-CN/docs/Web/Events/DOMContentLoaded https://developer.mozilla.org/en-US/docs/Web/Events/load

所有事件的 MDN 列表：

https://developer.mozilla.org/zh-CN/docs/Web/Events

使脚本设置在加载时运行的函数的合理可移植，非框架的方式：

if(window.attachEvent) {
    window.attachEvent('onload', yourFunctionName);
} else {
    if(window.onload) {
        var curronload = window.onload;
        var newonload = function(evt) {
            curronload(evt);
            yourFunctionName(evt);
        };
        window.onload = newonload;
    } else {
        window.onload = yourFunctionName;
    }
}