iframe加载空白主因是目标页响应头含X-Frame-Options: DENY或Content-Security-Policy: frame-ancestors 'none'，前端无法绕过；同域静态文件正常，但file://协议被Chrome拦截；高度自适应需固定值或同源JS读取scrollHeight；fetch+innerHTML嵌片段时script不执行、相对路径失效；object标签已淘汰，不应使用。
iframe src 不生效或加载空白，先查响应头和协议
不是代码写错了，大概率是目标页主动拒绝被嵌入。浏览器看到 X-Frame-Options: DENY 或 Content-Security-Policy: frame-ancestors 'none' 就会直接拦截渲染，控制台可能只显示“Failed to load resource”，不报具体错误。
检查方式很简单：打开浏览器开发者工具 → Network → 点击那个 iframe 的请求 → 查看 Response Headers。如果存在上述任一响应头，说明服务端明确禁止嵌入，前端无解。
- 同域静态文件（如
./header.html）一般没问题，但本地双击打开file://协议时，Chrome 会因安全策略拒绝加载 iframe，必须用本地服务器（如python3 -m http.server）运行 - 跨域嵌第三方页面（如
https://baidu.com）基本都会失败，YouTube、Google Maps 等提供专用 embed 地址，是因为它们显式设置了frame-ancestors白名单 - 若你控制目标页，需在服务端添加响应头：
Content-Security-Policy: frame-ancestors 'self' https://your-main-site.com';
iframe 高度自适应失效，别信 height: 100%
height: 100% 在 iframe 上几乎没用——它依赖父容器有明确高度，而父容器往往由内容撑开，形成死循环。真正能用的方案只有两个：固定高度 or JS 动态读取子页高度。
- 固定高度最稳：用 CSS 写
height: 600px;或min-height: 400px;，适合内容长度可预期的场景（如用户协议、帮助文档） - 动态适配仅限同源：监听
load事件后，通过iframe.contentDocument.body.scrollHeight获取真实高度，再赋给 iframe 元素。跨域时该属性不可读，会报SecurityError - 避免用
scrolling="no"（HTML5 已废弃），改用 CSS：style="overflow: hidden;"
fetch + innerHTML 嵌片段，script 和相对路径会失效
这个方法只适合嵌纯结构片段（比如导航栏、页脚），且必须同源。它把 HTML 字符串直接塞进 innerHTML，但不会自动执行其中的 <script></script>，也不会重新解析 <link> 或图片路径。
立即学习“前端免费学习笔记（深入）”；
-
<script></script>标签会被忽略：需手动提取并eval()（不推荐）或改用模块化加载（如import('./widget.js')） - 相对路径图片/CSS 404：因为路径基于当前页面解析，不是原 HTML 文件位置。解决办法是让后端返回绝对路径，或在插入前临时加
<base href="https://example.com/">到 fragment 开头 - 若目标页含
完整结构，插入后可能造成 DOM 嵌套混乱，建议后端只返回 body 内部片段
object 标签已实质性淘汰，别为兼容老系统冒险
现代浏览器对 <object data="sidebar.html" type="text/html"></object> 的支持极不稳定：Chrome 自 2020 年起禁用，Firefox 行为不一致，Safari 基本不渲染。它不像 iframe 那样有明确语义和标准行为，现在用等于主动埋雷。
- 即使本地测试看似成功，部署到不同环境或升级浏览器后极易失效
- 无法通过 JS 访问嵌入页 DOM，调试困难；SEO 和屏幕阅读器支持为零
- fallback 内容（
<p>加载失败</p>）虽好，但掩盖了根本问题：这玩意儿本来就不该用
真要 fallback，就用 iframe + onerror 监听 + 显示备用 DOM，或者干脆用 fetch 尝试，失败后降级为链接跳转。
