我正在执行一个外部脚本，使用<script>内部<head>.
现在，由于脚本在页面加载之前执行，因此我无法访问<body>. 我想在“加载”文档（HTML 完全下载并在 RAM 中）后执行一些 JavaScript。当我的脚本执行时，是否有任何我可以挂钩的事件，这些事件会在页面加载时触发？
如何在页面加载后执行 JavaScript？
IT技术
javascript
html
dom
dom-events
pageload
2021-01-28 21:18:33
6个回答
请记住，加载页面有多个阶段。顺便说一句，这是纯 JavaScript
“DOMContentLoaded”
当初始 HTML 文档完全加载并解析完毕，无需等待样式表、图像和子框架加载完成时，将触发此事件。在此阶段，您可以根据用户设备或带宽速度以编程方式优化图像和 CSS 的加载。
在加载 DOM 之后（在图像和 CSS 之前）执行：
document.addEventListener("DOMContentLoaded", function(){
//....
});
注意：同步 JavaScript 会暂停解析 DOM。如果您希望在用户请求页面后尽快解析 DOM，您可以将 JavaScript设为异步并优化样式表的加载
“加载”
一个非常不同的事件load应该只用于检测完全加载的页面。在 DOMContentLoaded 更合适的地方使用 load 是一个非常流行的错误，所以要小心。
在加载和解析所有内容后执行：
window.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 列表：
让您的脚本设置一个在加载时运行的函数的合理可移植的非框架方式：
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;
}
}
您可以在正文中放置一个“onload”属性
...<body onload="myFunction()">...
或者，如果您使用的是 jQuery，则可以这样做
$(document).ready(function(){ /*code here*/ })
or
$(window).load(function(){ /*code here*/ })
我希望它能回答你的问题。
请注意，$(window).load 将在文档呈现在您的页面上后执行。
如果脚本<head>在文档中加载，则可以使用deferscript 标签中的属性。
例子：
<script src="demo_defer.js" defer></script>
来自https://developer.mozilla.org：
推迟
此布尔属性设置为向浏览器指示脚本将在解析文档之后执行，但在触发 DOMContentLoaded 之前执行。
如果 src 属性不存在（即对于内联脚本），则不得使用此属性，在这种情况下它将不起作用。
要为动态插入的脚本实现类似的效果，请改用 async=false。具有 defer 属性的脚本将按照它们在文档中出现的顺序执行。
其它你可能感兴趣的问题