iframe加载失败90%是安全策略或协议问题，需先查控制台mixed content错误，将src改为https://（同域也需写全），并检查x-frame-options/csp响应头。
iframe 加载失败，90% 不是代码写错了，而是被浏览器拦在了安全策略或协议层——直接看控制台错误，比改 HTML 有效十倍。
控制台报 Mixed Content 错误怎么办
HTTPS 页面里 iframe 的 src 写了 http://，浏览器会直接拦截，不发请求、不触发 load、也不触发 error，只在 Console 里扔一条 Mixed Content: The page at 'https://...' was loaded over HTTPS, but requested an insecure frame 'http://...'。
- 必须把
src改成https://，哪怕同域也要写全协议，不能用//example.com/page.html - 本地开发时如果主页面是
http://localhost:8080，iframe 的src也得是http://开头，否则照样被拦 - CI/CD 部署后容易漏掉这个，建议在构建脚本里加检查：grep -r "src=\"http://" src/
控制台静默无报错但 iframe 空白
常见于目标页返回了 X-Frame-Options: DENY 或 Content-Security-Policy: frame-ancestors 'none'，这类响应头由服务端决定，前端无法绕过。
- 打开 Network 标签，找到 iframe 对应的请求，点开 Response Headers，确认有没有上述两个头
- 如果是自己维护的目标页，去掉
X-Frame-Options，或把 CSP 的frame-ancestors改成'self' https://your-main-domain.com' - 第三方页面（如报表平台、SaaS 工具）拒绝嵌入，只能联系对方开通白名单，别在前端加 try/catch
本地双击打开 HTML 时 iframe 不显示
浏览器禁止 file:// 协议下跨文件加载，哪怕 src="child.html" 和父页在同一目录，也会报 Not allowed to load local resource。
- 唯一可靠解法：用 HTTP 服务启动，比如 VS Code 的
Live Server插件，或命令行npx http-server -p 8000 - 不要试
base标签、data:URL、或 Chrome 启动参数--allow-file-access-from-files，这些要么失效，要么只在旧版生效 - 服务跑起来后，确保
src是相对路径（如src="child.html"），让浏览器自动解析为http://localhost:8000/child.html
怎么判断 iframe 真的加载失败了
iframe.onerror 基本不可靠——跨域不触发，同域下对 404/500/空 body 也静默，别绑它。
- 监听
load事件仅表示“开始加载完成”，不代表内容可用；必须加超时检测 - 推荐做法：赋值
src后立即启动setTimeout（8–10 秒），超时后检查iframe.contentDocument?.body?.children.length === 0或iframe.contentWindow?.document?.readyState !== 'complete' - 跨域 iframe 会拿不到
contentDocument，此时iframe.contentDocument为null，可直接判定为受限，不用再读 DOM - fallback 区域要带「重试」按钮，点击时先设
iframe.src = ''清空，再赋新值并加时间戳参数（如?t=1724624000）防缓存
真正难处理的不是 JS 怎么写，而是哪些问题前端根本无解：Mixed Content、X-Frame-Options、CSP frame-ancestors、sandbox 权限缺失——这些都得回源头改配置或协调服务端。盯着 console 报错类型去定位，比凭空猜逻辑快得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
