页面加载完成后执行 JavaScript 代码的方法
在开发网页时，我们经常需要在页面所有资源加载完成后再执行特定的 JavaScript 逻辑，比如操作 DOM 元素、初始化插件、发送统计请求等。如果代码执行过早，可能会导致目标元素还未加载，出现报错或逻辑不生效的问题。本文将介绍几种常见的页面加载完成后执行 JavaScript 代码的方式。
一、使用 window.onload 事件
window.onload 是浏览器提供的原生事件，当整个页面（包括 HTML 结构、图片、样式表、脚本等所有外部资源）都加载完成后才会触发。这种方式兼容性很好，支持所有主流浏览器。
示例代码如下：
window.onload = function() {
// 页面所有资源加载完成后执行的代码
console.log('页面已全部加载完成');
// 操作DOM元素示例
const title = document.getElementById('page-title');
if (title) {
title.style.color = 'blue';
}
};注意：window.onload 只能绑定一个回调函数，如果多次赋值，后面的会覆盖前面的。如果需要绑定多个逻辑，需要使用事件监听的方式。
二、使用 addEventListener 监听 load 事件
通过 window.addEventListener 可以为 load 事件绑定多个回调函数，不会互相覆盖，更适合复杂场景下的逻辑拆分。
示例代码如下：
// 第一个加载完成后的逻辑
window.addEventListener('load', function() {
console.log('第一个加载完成回调执行');
});
// 第二个加载完成后的逻辑，不会覆盖第一个
window.addEventListener('load', function() {
console.log('第二个加载完成回调执行');
// 初始化图表插件示例
initChart();
});
function initChart() {
// 图表初始化逻辑
console.log('图表初始化完成');
}三、使用 DOMContentLoaded 事件
如果只需要等待 DOM 结构加载完成，不需要等待图片、样式表等外部资源加载，可以使用 DOMContentLoaded 事件。这个事件触发时机比 load 更早，能提升代码的执行效率，适合大部分只需要操作 DOM 的场景。
示例代码如下：
document.addEventListener('DOMContentLoaded', function() {
console.log('DOM结构已加载完成，外部资源可能还在加载');
// 为按钮绑定点击事件
const btn = document.getElementById('submit-btn');
if (btn) {
btn.addEventListener('click', function() {
console.log('按钮被点击');
});
}
});注意：DOMContentLoaded 事件不会等待图片、iframe 等外部资源加载，如果业务逻辑依赖这些资源，还是要使用 load 相关事件。
四、将脚本放在 body 底部
除了使用事件监听的方式，还可以通过调整脚本的位置来实现页面加载后执行代码。将 <script> 标签放在 <body> 标签的最底部，这样当脚本执行时，上面的 DOM 元素都已经加载完成，可以直接操作。
HTML 结构示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>示例页面</title>
</head>
<body>
<h1 id="page-title">欢迎访问示例页面</h1>
<button id="submit-btn">提交</button>
<!-- 脚本放在body底部 -->
<script>
// 此时DOM已经加载完成，可以直接操作元素
console.log('脚本执行，DOM已就绪');
const title = document.getElementById('page-title');
title.style.fontSize = '24px';
</script>
</body>
</html>这种方式简单直接，不需要额外写事件监听代码，适合简单的静态页面场景。
五、不同方式的对比
以下是几种方式的特性对比，方便根据实际场景选择：
| 方式 | 触发时机 | 是否等待外部资源 | 是否支持多回调 | 适用场景 |
|---|---|---|---|---|
| window.onload | 页面所有资源加载完成 | 是 | 否，会覆盖 | 简单场景，逻辑较少 |
| addEventListener 监听 load | 页面所有资源加载完成 | 是 | 是，可绑定多个 | 复杂场景，多逻辑拆分 |
| DOMContentLoaded | DOM 结构加载完成 | 否 | 是，可绑定多个 | 仅需操作 DOM 的场景 |
| 脚本放 body 底部 | 脚本所在位置之前的 DOM 加载完成 | 否 | 否，按顺序执行 | 简单静态页面 |
六、注意事项
如果页面中有动态加载的 DOM 元素，上述方式可能无法直接捕获，需要结合 MutationObserver 等API 监听 DOM 变化。
在使用
window.onload时，注意不要多次赋值，避免前面的逻辑丢失。如果脚本是通过动态创建 <script> 标签加载的，要注意执行时机，可能需要额外判断 DOM 是否就绪。
总结来说，大多数只需要操作 DOM 的场景优先选择 DOMContentLoaded 事件，需要等待所有资源加载的场景选择 load 相关事件，简单页面也可以直接将脚本放在 body 底部，根据实际需求灵活选择即可。
页面加载完成 JavaScript执行时机 window.onload DOMContentLoaded JavaScript事件