iframe加载外部页面常空白或报错，因目标站通过X-Frame-Options或Content-Security-Policy响应头禁止嵌入；YouTube等提供embed地址是因明确开放frame-ancestors。
iframe 能嵌外部页面，但绝大多数公开网站会拒绝加载——不是你代码写错了，是对方服务器主动拦的。
为什么 iframe 加载外部页面经常空白或报错
浏览器允许 iframe 标签存在，但目标页可通过响应头阻止被嵌入：
-
X-Frame-Options: DENY或SAMEORIGIN（老标准） -
Content-Security-Policy: frame-ancestors 'none'或'self'（新标准） - 前端 JS 检测
window.self !== window.top后执行top.location = self.location跳出
这些都不是前端能绕过的。YouTube、Google Maps、Bilibili 等提供 embed 地址，是因为它们明确开放了 frame-ancestors；而知乎、微信公众号文章页、多数 CMS 后台默认禁止。
iframe 基础写法必须带哪些属性
缺一不可，否则体验极差：
立即学习“前端免费学习笔记（深入）”；
-
src必须是可访问的 URL（同域或对方允许嵌入） -
width和height必须显式设置，否则默认 300×150px，内容被裁剪 -
title必须加，辅助技术依赖它理解内容用途 -
sandbox推荐设为"allow-scripts"，不加allow-same-origin就不会跨域失效 - 边框用 CSS 去：
style="border: 0; overflow: hidden;"，别用已废弃的frameborder="0"
最小可用示例：
<iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ" width="100%" height="400" title="视频播放器" sandbox="allow-scripts" style="border: 0; overflow: hidden;" loading="lazy"></iframe>
怎么让 iframe 高度自适应内容（同源前提下）
仅限同源 iframe（比如你自己的 /report.html），跨域时无法读取子页 DOM：
- 父容器不能靠
height: 100%—— 它需要一个有明确高度的父级（比如min-height: 600px） - 监听
load事件后，用iframe.contentDocument.body.scrollHeight获取真实高度 - 注意：若子页 CSS 用了
box-sizing: border-box或含 margin/padding，scrollHeight可能不准，建议子页 body 设margin: 0 - 更稳的方式是子页主动发
postMessage告诉父页当前高度，双方都可控
简单 JS 示例（父页）：
const iframe = document.querySelector('iframe');<br>iframe.addEventListener('load', () => {<br> try {<br> const h = iframe.contentDocument.body.scrollHeight;<br> iframe.style.height = h + 'px';<br> } catch (e) {<br> // 跨域时静默失败，不报错<br> }<br>});
替代方案比硬改 iframe 更实际
当目标站明确拒绝嵌入，强行用代理中转或 Puppeteer 渲染，既违反其 robots.txt，又难维护：
- 同源静态片段 → 用
fetch("header.html").then(r => r.text()).then(html => el.innerHTML = html)，但注意<script>不执行、相对路径易 404 - 需样式/脚本隔离但不要完整页面 → Shadow DOM +
fetch构建视图，不是“嵌页”，而是复用 HTML 片段 - 要交互且跨域 → 看对方是否提供 postMessage API 或官方 SDK（如支付宝支付弹窗）
真正容易被忽略的是：iframe 的 SEO 几乎为零，搜索引擎不索引其中内容；移动端上，loading="lazy" 是必备项，否则首屏卡顿明显。
