如何在HTML中使用 iframe 标签嵌入第三方内容-html教程-PHP中文网

iframe白屏主因是目标页通过x-frame-options或csp的frame-ancestors拒绝嵌入，需检查响应头；其次为浏览器后台优化导致渲染中断，可用page visibility api配合visibilitystate监听解决。

如何在html中使用 iframe 标签嵌入第三方内容

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' @#@#@#@#@#@#@#@#@#@0'。知乎、微信公众号文章页等默认禁止，前端无法绕过，只能联系对方改服务端配置。

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

只写 <iframe src="@#@#@#@#@#@#@#@#@#@1;%20%E5%9C%A8%E7%94%9F%E4%BA%A7%E7%8E%AF%E5%A2%83%E5%87%A0%E4%B9%8E%E5%BF%85%E5%87%BA%E9%97%AE%E9%A2%98%EF%BC%9A

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

src%20%E5%BF%85%E9%A1%BB%E5%B8%A6%E5%AE%8C%E6%95%B4%E5%8D%8F%E8%AE%AE%EF%BC%88https://%20%E6%88%96%20http://%EF%BC%89%EF%BC%8Cfile://%20%E5%8D%8F%E8%AE%AE%E4%B8%8B%E5%A4%9A%E6%95%B0%E6%B5%8F%E8%A7%88%E5%99%A8%E7%9B%B4%E6%8E%A5%E6%8B%92%E8%BD%BD%20%20
width%20%E5%92%8C%20height%20%E6%8E%A8%E8%8D%90%E8%AE%BE%E5%85%B7%E4%BD%93%E5%80%BC%EF%BC%88%E5%A6%82%20width=" height="500">），百分比在部分浏览器中行为不稳定 <li> <code>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 告诉父页当前高度