iframe src不必同源，但跨域时父页无法访问其DOM/JS，子页可正常渲染；空白主因是服务端X-Frame-Options或CSP frame-ancestors限制，或file://协议下默认跨域拦截。
iframe src 必须同源，否则页面空白无报错
浏览器对跨域 iframe 的限制非常严格：如果 src 指向不同源（协议、域名、端口任一不同），子页面会加载失败，但多数情况下不抛出明显错误，只显示空白或默认提示页。这不是 bug，而是同源策略的静默拦截。
常见踩坑点：
- 本地开发时用
file://协议打开主页面，却引用http://localhost:3000/header.html—— 协议不同，直接被拦 - 父页是
https://a.com，子页是http://a.com（少了个 s）—— 协议不一致，同样失败 - 子页服务器未设置
X-Frame-Options: ALLOW-FROM https://parent.com或Content-Security-Policy: frame-ancestors 'self' https://parent.com'，也会被拒绝渲染
验证方法：打开浏览器开发者工具 → Network 标签页 → 找到 iframe 对应的请求 → 查看 Status 是否为 200，Response Headers 是否含允许嵌入的策略头。
CSS Grid 布局中 iframe 高度塌陷的修复方式
当用 display: grid 划分区域后，直接把 <iframe> 放进网格单元，常出现高度为 0 或只显示顶部几像素的问题。根本原因是 iframe 默认 display: inline，且不继承父容器高度。
立即学习“前端免费学习笔记（深入）”；
必须显式控制尺寸和行为：
- 给每个
<iframe>设置width: 100%; height: 100%，同时确保其父网格项也设置了明确高度（比如grid-template-rows: 80px 1fr 60px中的1fr） - 在父容器上加
overflow: hidden，避免 iframe 内容溢出导致滚动条叠加 - 移除过时的
frameborder="0"和scrolling="no"，改用 CSS：border: none; overflow: hidden - 若仍塌陷，检查是否遗漏了
html, body { height: 100% }—— Grid 的1fr需要祖先链有明确高度支撑
iframe 内部链接 target 跳转失效的定位与修复
想让子页面里的 <a href="detail.html" target="content"> 在指定 iframe 中打开，结果新开标签页或跳转整个页面？问题几乎总出在 name 属性没对齐。
关键约束：
- 子页面中的
target值（如"content"）必须与目标<iframe>的name属性完全一致，大小写敏感 -
name只在同源 iframe 中生效；跨域 iframe 的target会被忽略，强制降级为_blank或_top - 不要依赖
id或class，target匹配只认name - 如果子页面本身是通过 JavaScript 动态生成的链接，需确认
target字符串拼接正确，没有空格或不可见字符
调试技巧：在控制台执行 document.querySelector('iframe[name="content"]').src，看是否能取到值 —— 取不到说明 name 写错了或 iframe 还没加载完成。
sandbox 属性开启后 JS 和表单功能突然失效
加了 sandbox="allow-scripts" 后发现子页面的按钮点不动、表单提交没反应，是因为 sandbox 默认禁用所有交互能力，包括表单提交、弹窗、脚本执行等，哪怕只写了 allow-scripts 也不自动包含 allow-forms。
常用组合建议：
- 仅运行脚本 + 表单提交：
sandbox="allow-scripts allow-forms" - 需要同源通信（如
postMessage）：sandbox="allow-scripts allow-same-origin"（⚠️ 此时必须确保子页确实同源，否则会报错） - 嵌 YouTube 视频等第三方内容：
sandbox="allow-scripts allow-same-origin allow-popups allow-fullscreen" - 绝对不要用
sandbox=""（空值），它等于全禁用，连页面都可能不渲染
注意：allow-same-origin 是高危选项，一旦误用于非可信子页，可能绕过同源策略，泄露主页面 DOM 或 Cookie。
真正麻烦的不是怎么写 iframe，而是判断什么时候不该用 iframe —— 比如需要频繁 DOM 交互、SEO 抓取子页面内容、或子页资源体积过大拖慢首屏时，fetch() + innerHTML 或微前端方案往往更合适。但只要需求明确是「隔离」和「独立生命周期」，iframe 就仍是不可替代的。
