iframe白屏主因是目标页通过X-Frame-Options或CSP的frame-ancestors拒绝嵌入，需检查响应头；其次为浏览器后台优化导致渲染中断，可用Page Visibility API配合visibilityState监听解决。

iframe 是唯一能真正加载并执行第三方网页的原生方案，其他方式（比如 fetch + innerHTML）只会得到一个“静态快照”：脚本不执行、相对路径失效、Cookie 丢失、事件监听器全废。

---

iframe 白屏？先查响应头里的 X-Frame-Options 和 Content-Security-Policy

白屏不是你代码写错了，大概率是目标页主动拒绝被嵌入：

• 打开 DevTools → Network → 找到 iframe 请求 → 看 Response Headers
• 出现以下任意一项，浏览器就会静默丢弃渲染：
  • X-Frame-Options: DENY 或 SAMEORIGIN
  • Content-Security-Policy: frame-ancestors 'none' 或 'self'

YouTube、Bilibili 的 embed 地址能用，是因为它们明确写了 frame-ancestors 'self' <a href="https://www.php.cn/link/16be1e86208c29a6fd13d4cf46b26f0c">https://www.php.cn/link/16be1e86208c29a6fd13d4cf46b26f0c</a>'。知乎、微信公众号文章页等默认禁止，前端无法绕过，只能联系对方改服务端配置。

---

iframe 标签必须显式设置的属性

只写 <iframe src="<a href="https://www.php.cn/link/882ad87e5e0b8a87b5872206e96ce8c8">https://example.com">&gt</a>; 在生产环境几乎必出问题：

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

立即学习“前端免费学习笔记（深入）”；

• src 必须带完整协议（https:// 或 http://），file:// 协议下多数浏览器直接拒载
• width 和 height 推荐设具体值（如 width="100%" height="500"），百分比在部分浏览器中行为不稳定
• sandbox 必须加，最小安全集是 sandbox="allow-scripts allow-same-origin"
  • 不需要 JS 执行？去掉 allow-scripts
  • 不需跨域通信？别加 allow-same-origin（加了等于放弃同源检查）
• referrerpolicy="no-referrer" 可选，防第三方通过 document.referrer 窥探你页面路径
• title 建议加上，否则屏幕阅读器读不出内容

---

跨域 iframe 里点不动、滚不了？排查这三点

常见现象：渲染正常，但按钮无响应、表单不提交、滚动条卡死：

• 目标页设置了 X-Frame-Options: DENY 或 CSP: frame-ancestors 'none' —— 前端无法解决，只能找对方改响应头
• 父页面 CSS 泄漏，比如全局 * { box-sizing: border-box; } 会破坏子页面盒模型；建议给 iframe 外层容器加 overflow: hidden，并在 iframe 上加 style="border: none;"
• 移动端 Safari 完全忽略已废弃的 scrolling 属性；如需禁用滚动，得靠 JS 监听 touchmove 并 preventDefault()

---

同源前提下怎么让 iframe 高度自适应？

仅限你完全控制的同源页面（比如自己的 /report.html）：

• 父容器不能只靠 height: 100% —— 它需要一个有明确高度的父级（比如 min-height: 600px）
• 监听 load 事件后，用 iframe.contentDocument.body.scrollHeight 获取真实高度
• 注意：若子页用了 box-sizing: border-box 或含 margin/padding，scrollHeight 可能不准；更稳的方式是子页主动发 postMessage 告诉父页当前高度

最易忽略的一点：跨域时 contentDocument 访问会被静默拒绝，不会报错，只返回 null —— 这个失败是静默的，连 try/catch 都捕获不到。