DOMContentLoaded 仅等待 DOM 解析完成，不保证 iframe 加载完毕；而 window.load 事件会等待包括 iframe 在内的所有依赖资源加载完成，是解决该问题的正确选择。
`domcontentloaded` 仅等待 dom 解析完成，不保证 iframe 加载完毕；而 `window.load` 事件会等待包括 iframe 在内的所有依赖资源加载完成，是解决该问题的正确选择。
在构建跨页面复用的 HTML 模板（例如通用 Dialog 组件）时，开发者常尝试通过 <iframe></iframe> 引入外部 HTML 片段。但一个关键限制是：DOMContentLoaded 事件触发时，iframe 的内容很可能尚未加载完成——这导致依赖 iframe 内 DOM 的初始化逻辑（如查找模板、克隆节点、挂载组件）失败或产生竞态问题。
如测试所示，以下代码的执行顺序印证了这一行为：
<!DOCTYPE html>
<html>
<head>
<title>IFrame Load Timing Demo</title>
</head>
<body>
<iframe src="dialog-template.html" id="templateFrame"></iframe>
<script>
document.addEventListener('DOMContentLoaded', () => {
console.log('dom content loaded'); // ✅ 先触发
});
const iframe = document.getElementById('templateFrame');
iframe.addEventListener('load', () => {
console.log('iframe load'); // ✅ 后触发
});
window.addEventListener('load', () => {
console.log('page load'); // ✅ 最后触发（含 iframe）
});
</script>
</body>
</html>控制台输出为：
dom content loaded iframe load page load
这说明：
-
DOMContentLoaded仅关注主文档树解析完成，不阻塞也不等待 iframe； -
iframe.load是 iframe 自身内容加载完成的可靠信号，但需手动监听； -
window.load（即window.addEventListener('load', ...)）才是真正的“全页面就绪”事件——它会等待所有嵌入资源（含非懒加载的 iframe、图片、样式表、脚本等）加载完毕后才触发。
✅ 正确做法：若需确保 iframe 模板已就绪再执行主逻辑，请使用 window.load：
window.addEventListener('load', () => {
const iframe = document.getElementById('templateFrame');
const templateContent = iframe.contentDocument?.body.innerHTML;
if (templateContent) {
// 安全访问 iframe 内容，执行模板注入、Dialog 初始化等
initDialogFromTemplate(templateContent);
}
});⚠️ 注意事项：
-
window.load会延迟整体初始化时机，可能影响首屏交互体验，适用于对模板强依赖、且可接受轻微延迟的场景； - 若 iframe 跨域，
contentDocument将受同源策略限制，无法读取内容——此时应改用postMessage进行安全通信； -
loading="eager"（默认值）虽能避免懒加载延迟，但不能改变DOMContentLoaded的触发时机，它仅影响浏览器预加载策略，而非事件依赖关系； - 现代替代方案建议：考虑使用 [HTML Imports（已废弃）]、[Web Components +
<template></template>+fetch()] 或构建时内联模板（如 Vite/webpack 的raw-loader），以规避 iframe 的复杂性与安全性限制。
综上，没有 HTML 属性能让 iframe “提前”触发 DOMContentLoaded，但 window.load 天然满足“iframe 加载完成后再执行”的需求——它是语义正确、兼容广泛、无需 polyfill 的标准解决方案。
