不能直接监听跨域 iframe 内部图片 onload 事件；同域时需在 iframe.onload 后遍历 contentdocument 中 img 元素并绑定事件，跨域时必须由子页通过 postmessage 主动通知。
不能直接在父页面监听 iframe 内部图片的 onload 事件——因为跨域限制、DOM 隔离和事件作用域，父页无法访问 iframe.contentDocument 中的 img 元素及其原生事件。必须由子页面主动配合，或换用间接判断方式。
iframe 同域时：可遍历子页面 img 并绑定 onload
只有同域 iframe 才允许父页读取其 contentDocument，此时能拿到内部所有 img 元素并逐个监听：
- 必须等
iframe.onload触发后，再访问iframe.contentDocument，否则报SecurityError或返回null - 需递归遍历子页面所有
img（含动态插入），对每个未加载完成的img绑定onload和onerror - 注意：
img.complete属性在子页面中是同步可用的，可用于快速筛掉已加载项，避免重复绑定
iframe.onload = () => {
const doc = iframe.contentDocument;
const imgs = doc.querySelectorAll('img');
let loadedCount = 0;
const total = imgs.length;
imgs.forEach(img => {
if (img.complete && img.naturalWidth > 0) {
loadedCount++;
} else {
img.onload = () => loadedCount++;
img.onerror = () => loadedCount++;
}
});
const checkDone = () => {
if (loadedCount === total) console.log('所有图片加载完毕');
};
// 可加定时轮询或用 MutationObserver 监听后续新增 img
};
iframe 跨域时：只能靠子页面 postMessage 主动通知
跨域下父页完全无法读取子页 DOM，contentDocument 访问被拦截，onload 事件也只代表 iframe 容器就绪，不反映内部资源状态。唯一可靠路径是子页面自行检测并通信：
- 子页面需在自身
DOMContentLoaded后，遍历所有img，用img.onload/onerror+img.complete判断状态 - 全部图片加载/失败后，调用
window.parent.postMessage({ type: 'IMG_LOAD_DONE' }, '*') - 父页监听
message事件，校验event.source === iframe.contentWindow防止伪造 - 不要依赖子页发来的 “图片数量”，而应以它明确发出的完成信号为准
为什么不能只靠 iframe.onload？
iframe.onload 的触发时机与内部图片无关：
- 同域下它只表示子页面 HTML 解析完毕、主文档加载完成，但其中
img.src可能尚未开始请求（比如懒加载） - 跨域下它更不可靠——仅表示 HTTP 响应头到达、
<iframe></iframe>标签解析完毕，子页 JS 甚至可能还没执行 - 即使子页 JS 执行了，若图片是异步插入（如 React 渲染、AJAX 加载内容），
iframe.onload早已触发多次 - 设置
src顺序错误（先赋值再绑事件）或display: none也会导致事件静默丢失
容易被忽略的边界情况
真正上线时，这几个点常导致“明明写了监听却没反应”：
-
iframe初始src为空字符串或"about:blank"，后续才动态设置 —— 必须在每次src赋值前重新绑定onload，否则事件丢失 - 子页面使用了
loading="lazy"，部分图片延迟加载，需监听IntersectionObserver或等滚动后再次检查 - 图片 URL 指向 302 跳转或 CDN 缓存策略异常，导致
onload不触发，onerror也不触发（此时img.naturalWidth保持为 0） - 父页监听
message时没过滤event.origin，收到来自其他 iframe 或弹窗的干扰消息
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
