当前位置：首页 > 文章列表 > 文章 > 前端 > HTML监听页面加载完成的常用方法有以下几种，适用于不同的场景：✅ 1. 使用 window.onload 事件这是最传统的方式，用于监听整个页面（包括所有资源如图片、脚本等）加载完成后执行代码。window.onload = function() { console.log("页面加载完成"); };⚠️ 注意：如果多个 window.onload 被设置，只有最后一个会生效。✅ 2.

HTML监听页面加载完成的常用方法有以下几种，适用于不同的场景：✅ 1. 使用 window.onload 事件这是最传统的方式，用于监听整个页面（包括所有资源如图片、脚本等）加载完成后执行代码。window.onload = function() { console.log("页面加载完成"); };⚠️ 注意：如果多个 window.onload 被设置，只有最后一个会生效。✅ 2.

2026-05-25 15:00:34 0浏览收藏

页面加载完成并非单一事件，而是分阶段的精细过程：DOMContentLoaded 表示HTML解析完毕、DOM树就绪，可安全操作元素，适合绝大多数初始化和交互逻辑；window.onload则需等待所有资源（图片、CSS、iframe等）完全加载，适用于依赖视觉渲染或跨资源通信的场景；而defer、async、readyState轮询等方案则针对脚本执行时机和特殊窗口场景提供了更灵活的控制。真正关键的不是记住API名称，而是根据实际需求——比如是否要读取真实图片尺寸、是否需确保样式已应用、是否与第三方iframe交互——精准选择最合适的加载时机，避免因时机错配导致脚本报错、布局错乱或性能浪费。

HTML中如何监听页面加载完成事件

页面加载完成不是单一事件，而是分阶段的——你要先明确自己真正需要等什么：是 DOM 结构就绪？还是所有图片、CSS、iframe 全部加载完？选错时机会导致脚本报错或布局错乱。

DOMContentLoaded 适合大多数 DOM 操作

这是最常用也最安全的时机，表示 HTML 解析完毕、DOM 树已构建完成，document.body 和所有元素可访问，但不等待 CSS、图片、iframe 等外部资源。

常见错误现象：

document.getElementById 返回 null —— 脚本执行太早，DOM 还没解析到对应标签
用 getComputedStyle 获取样式值不准 —— CSSOM 可能未就绪，浏览器还没应用样式规则

实操建议：

把初始化菜单、绑定按钮点击、读取元素尺寸等操作放在这里
监听写法统一用 document.addEventListener('DOMContentLoaded', handler)，IE9+ 原生支持，无需 polyfill
即使监听代码写在里也安全，浏览器会缓存事件并自动派发
不要用 document.ready（非标准）或 $(function(){})（依赖 jQuery）替代，除非项目已强耦合 jQuery

window.onload 等待全部资源加载完成

window.onload 触发时，页面及其所有子资源（图片、样式表、脚本、iframe）都已下载并解析完毕。它比 DOMContentLoaded 晚得多，尤其在网络慢或图片多时延迟明显。

使用场景：

需要精确测量图片渲染后的真实尺寸（比如瀑布流布局）
要确保第三方 iframe 已加载并可通信（如嵌入的视频播放器）
做全页面性能打点（如记录“首屏完全可见”时间）

注意点：

window.onload 是 window 对象上的事件，不是 document 的
重复赋值 window.onload = fn1; window.onload = fn2; 会覆盖，推荐用 addEventListener('load', fn) 避免冲突
如果页面含跨域 iframe，其加载状态无法被父页感知，load 不代表它一定 ready

新打开窗口如何判断加载完成

用 window.open() 打开空窗口（如 window.open('', '_blank')）后，直接监听 win.document.addEventListener('DOMContentLoaded') 或设置 win.onload 大概率失效。原因在于初始文档是 about:blank，没有标准加载流程，且受同源策略限制。

可靠方案是轮询 win.document.readyState：

当 win.document.readyState === 'complete' 时，表示该窗口文档及其所有子资源已加载完毕
必须加防错：检查 win.closed 和 win.document 是否存在，避免跨域报错或窗口已关闭
轮询间隔建议 ≥ 50ms，太频繁影响主线程；超时建议设为 10s，防止死循环

示例关键逻辑：

const checkReady = () => {
  if (win.closed) return;
  if (win.document && win.document.readyState === 'complete') {
    console.log('新窗口已完全就绪');
    return;
  }
  setTimeout(checkReady, 100);
};
checkReady();

readyState 变化可作为补充监控手段

document.readyState 有三个有效值：loading、interactive、complete。它不像事件那样“触发一次”，而是持续反映当前状态，适合做细粒度控制。

实操中容易忽略的点：

interactive 阶段 DOM 已就绪，但 CSS 可能未加载完，此时调用 offsetHeight 可能返回 0
readystatechange 事件会多次触发（loading → interactive → complete），需手动判断值再执行逻辑
不要依赖 uninitialized —— 现代浏览器已弃用该值，实际不会出现

如果你需要在 DOM 就绪但资源未全时提前做些轻量初始化（比如预占位、打日志），interactive 是比 DOMContentLoaded 更早的信号，但稳定性不如后者。

真正难的不是选哪个 API，而是理解你操作的 DOM 节点是否已被样式影响、是否依赖某张图片的尺寸、是否要和 iframe 通信——这些细节决定了该等 DOMContentLoaded 还是必须等到 complete，而不是背熟事件名就完事。

好了，本文到此结束，带大家了解了《HTML监听页面加载完成的常用方法有以下几种，适用于不同的场景：✅ 1. 使用 window.onload 事件这是最传统的方式，用于监听整个页面（包括所有资源如图片、脚本等）加载完成后执行代码。window.onload = function() { console.log("页面加载完成"); };⚠️ 注意：如果多个 window.onload 被设置，只有最后一个会生效。✅ 2. 使用 DOMContentLoaded 事件这个事件在 DOM 结构加载完成后触发，不等待图片、样式表等资源加载完毕。适合在 DOM 可用时立即执行操作。document.addEventListener("DOMContentLoaded", function() { console.log("DOM 加载完成"); });📌 推荐使用这种方式，因为它比 window.onload 更快。✅ 3. 使用 defer 属性（HTML 中）如果你在 ✅ 4. 使用 async 属性（HTML 中）async 会让脚本异步加载，并在下载完成后立即执行，可能在 DOM 加载前》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！