iframe.onerror基本没用，因其对跨域资源不触发，同域下也常因dom未就绪或绑定过晚而丢失，且无法识别http 200+空body等静默失败；可靠方案是超时后检测contentdocument.body.children.length是否为0及readystate是否非complete。
iframe加载失败时，onerror事件为什么基本没用
因为 iframe.onerror 在绝大多数浏览器中对跨域资源完全不触发（CORS 隔离），同域下也常因 DOM 尚未就绪、事件绑定过晚而丢失；更关键的是，它对 HTTP 200 + 空 body、服务端返回兜底 HTML 这类“静默失败”毫无反应——浏览器认为“加载完成了”，哪怕 iframe 里只显示一片空白。
实操建议：
- 别在
<iframe></iframe>标签上写onerror，写了也大概率不执行 - 不要依赖
load事件判断成功：它只表示“开始加载完成”，不保证内容可用 - 若必须用原生事件，仅限同域且确保
iframe已插入 DOM 后再绑定：iframe.addEventListener('error', handler)，但仍需配合后续检测
怎么可靠感知 iframe 是否真的加载失败
核心思路是「主动探活」：等一段时间后，检查 iframe 内容是否真实就绪。重点看两个指标：iframe.contentDocument?.body?.children.length 是否为 0，以及 iframe.contentWindow?.document?.readyState 是否不等于 'complete'。
实操建议：
- 设置统一超时（如 8s），超时后即视为失败，避免无限等待
- 检测逻辑必须在
load事件之后执行（确保 iframe 已尝试加载），但不能只靠它 - 对跨域 iframe，
contentDocument和contentWindow会被浏览器置为null，此时直接判定为失败或受限，不可读取内容 - 示例片段：
const timer = setTimeout(() => { const doc = iframe.contentDocument; if (!doc || !doc.body || doc.body.children.length === 0) { showFallback(); } }, 8000);
fallback 区域该放什么，又怎么触发重试
fallback 不是摆设，得让用户能操作。纯隐藏 iframe + 显示文字提示，体验很差；必须提供明确出口。
实操建议：
- fallback 区域内至少包含一个按钮，文案明确，如「重试加载」或「查看原始报告」
- 点击重试时，不能只改
iframe.src = iframe.src—— 浏览器可能缓存旧响应，要加时间戳参数：iframe.src = iframe.src.split('?')[0] + '?t=' + Date.now() - 重试后应清掉旧的定时器，并启动新一轮检测，避免多个 timer 并行
- 如果 fallback 内容本身也依赖网络（比如另一张图或远程文案），务必用
data:image/png;base64,...内联兜底，否则 fallback 可能也白屏
HTTPS 页面里嵌 HTTP iframe 导致 404 的真实原因
这不是路径错，也不是服务器挂了，而是浏览器主动拦截混合内容（Mixed Content）。控制台报错信息里一定含 Mixed Content: The page at 'https://...' was loaded over HTTPS, but requested an insecure frame 'http://...'。
实操建议：
- 立刻检查
iframe.src协议：必须是https://，不能是http://或相对协议//（当父页是 https 时，//会降级为 http） - 本地开发时，如果目标服务只有 HTTP，要么配本地反向代理（如 Nginx 转发到 https），要么用
localhost+ 自签名证书（现代浏览器对 localhost 混合内容限制较松） - 别指望前端 JS 绕过——这是网络层硬拦截，JS 根本收不到任何响应，
fetch或XMLHttpRequest也无法探测
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
