绝大多数情况下直接用<iframe>可嵌入同域页面；嵌外部网站常因X-Frame-Options或Content-Security-Policy响应头被拦截；需检查Network面板确认；YouTube等提供embed地址因其frame-ancestors白名单允许嵌入。
绝大多数情况下，直接用 <iframe> 就能嵌入同域页面；但想嵌外部网站（比如知乎、微信文章页），90% 会白屏或报错——不是你代码写错了，是对方服务器明确拒绝被嵌入。
iframe src 指向外部页面却空白？先查响应头
浏览器加载 <iframe src="https://example.com"> 后白屏，打开开发者工具的 Network 面板，点开该请求，看 Response Headers 里有没有：
-
X-Frame-Options: DENY或SAMEORIGIN -
Content-Security-Policy: frame-ancestors 'none'或'self'
只要出现其中任意一条，嵌入就会被浏览器拦截。YouTube、Bilibili 提供的 embed 地址之所以能用，是因为它们的响应头里写了 frame-ancestors 'self' https://*.youtube.com' 这类白名单。
本地开发时用 file:// 协议加载 iframe，Chrome 会直接拒绝加载非同源 HTML 文件——必须起一个本地服务（如 python3 -m http.server）再测试。
iframe 基础属性哪些不能省？
缺了以下几项，要么显示异常，要么无障碍不达标，要么被现代浏览器警告：
-
src：必须是可访问的 URL；空值或 404 会导致占位框空白 -
width和height：必须显式设置；不设默认为300×150px，内容常被裁剪 -
title：必须加；屏幕阅读器靠它识别 iframe 用途，否则 WCAG 不合规 -
sandbox：建议至少设"allow-scripts"；不加allow-same-origin时，跨域 iframe 内 JS 无法读取自身 document - 边框用 CSS 控制：
style="border: 0; overflow: hidden;"；frameborder="0"已废弃
最小可用示例：
<iframe src="https://example.com/embed" width="100%" height="500" title="用户协议预览" sandbox="allow-scripts" style="border: 0; overflow: hidden;" ></iframe>
iframe 与父页面通信：跨域场景下只认 postMessage
如果嵌入的是同域页面，可以用 window.parent 直接调用；但跨域时，唯一安全可行的方式只有 window.postMessage()：
- 子页面发消息：
window.parent.postMessage({type: 'READY'}, 'https://parent-domain.com') - 父页面监听：
window.addEventListener('message', handler)，必须校验event.origin防伪造 - 别依赖
window.name或location.hash，现代浏览器限制严格，且易被覆盖 - 若需频繁通信，建议在子页面内封装一个
postMessage适配层，统一处理序列化和回调
注意：子页面若没主动发消息，父页面无法得知其是否加载完成——load 事件在跨域 iframe 中不可靠，别用它判断就绪状态。
替代方案：什么时候不该用 iframe？
当目标页面和你同源、且只需嵌一段 HTML 片段（比如 header、footer）时，<iframe> 是重锤砸蚊子：
- 用
fetch()+innerHTML更轻量，DOM 共享，样式可复用 - 但要注意：服务端必须允许 CORS，且返回的 HTML 不能含
<script>（会被忽略）或相对路径资源（如./style.css） -
<object data="sidebar.html" type="text/html">可作为备选，语义更清晰，但部分浏览器对本地file://加载有限制 - Server-Side Includes（SSI）或 Web Components 是服务端/构建时方案，适合静态站点生成，不适用于运行时动态加载
真正容易被忽略的点是：iframe 的加载会阻塞主页面的 DOMContentLoaded 吗？答案是不会，但它会触发独立的 load 事件，且其内部资源（JS、CSS、图片）仍计入页面总请求数和 LCP 指标——性能优化时得单独压测它。
