iframe加载失败不能依赖onerror事件，因其受跨域安全限制、dom就绪时机及http 200空响应等影响而不可靠；需组合load事件与8秒超时后的内容检测（如body子元素数为0或readystate非complete）来判定失败，重试须清空src并加时间戳防缓存，且mixed content、x-frame-options拒绝等服务端问题前端无法解决。
iframe 加载失败为什么不能靠 onerror 事件？
因为 onerror 在多数浏览器中对跨域 <iframe></iframe> 根本不触发——这是安全限制，不是 bug。即使同域，onerror 也常在 DOM 尚未就绪时丢失（尤其页面加载初期动态插入的 iframe）。更麻烦的是：HTTP 200 + 空 body、服务端返回错误 HTML（如 404 页面）、CSP 拦截导致静默白屏，这些情况 onerror 都不会 firing。
怎么可靠判断 iframe 实际加载失败？
必须组合两个信号：load 事件 + 定时内容检测。只监听 load 不行（它会触发，哪怕内容是空白页）；只查 contentDocument 也不行（跨域 iframe 读不到，且可能因时机太早报错）。
- 给
<iframe></iframe>绑定load事件，作为“加载流程启动”标记 - 设置 8s 超时定时器（
setTimeout），超时后检查：iframe.contentDocument?.body?.children.length === 0或iframe.contentWindow?.document?.readyState !== 'complete' - 若两者同时成立，基本可判定失败——不是没加载，是加载了但没有效内容
- 非同源 iframe 无法读取
contentDocument，此时只能依赖超时 + 用户点击重试，别硬 try/catch
重试逻辑怎么写才不踩坑？
重试不是简单地 iframe.src = iframe.src，浏览器可能直接走缓存，甚至忽略赋值。关键动作是清空再赋值，并绕过缓存。
- 重试前先设
iframe.src = ''（清空 src），再设回原地址，强制触发新请求 - 加时间戳参数防缓存：
iframe.src = originalSrc + (originalSrc.includes('?') ? '&' : '?') + 't=' + Date.now() - 按钮点击后立即
disabled，成功或失败后恢复，防止连点造成并发请求堆积 - 务必在 fallback 区域内提供「重试」按钮，且绑定到对应 iframe 实例，避免多个 iframe 互相干扰
哪些失败根本没法前端兜底？
前端能做的只是感知和重试，但有些失败源头不在 JS 控制范围内，强行处理只会浪费调试时间。
- 父页 HTTPS 但 iframe src 是 HTTP → 浏览器直接拦截，控制台报
Mixed Content，必须改协议 - 目标页返回
X-Frame-Options: DENY或CSP frame-ancestors 'none'→ 服务端强制拒绝嵌入，前端无解 - iframe 内部 JS 报错导致白屏 → 这属于内容层问题，
load和contentDocument都正常，前端无法感知，需靠 H5 自身错误监控上报
真正要花力气的地方，是把超时阈值、重试退避、按钮状态管理这些细节扣准——而不是幻想用一段 JS 解决所有 iframe 加载问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
