iframe引入header.html时需删去完整HTML结构，仅保留纯内容片段；否则因嵌套文档上下文导致渲染异常、空白或错误。
iframe 引入 header.html 时 body 标签报错或显示异常
直接把完整 HTML（含 <html>、<head>、<body>）放进 header.html，再用 <iframe src="header.html"> 加载，浏览器会拒绝渲染或出现空白、嵌套错误——因为 iframe 内部又生成了一个独立文档上下文，而页面已存在一个 <body>。
必须只保留纯内容片段：删掉 <html>、<head>、<body> 及其闭合标签，只留导航栏、logo、菜单等可视结构。例如：
<div class="header"> <img src="logo.png" alt="Logo"> <nav><ul><li>首页</li><li>产品</li></ul></nav> </div>
-
header.html和footer.html文件里不能有<script>或<link>标签，它们不会执行或加载 - 所有样式需提前在主页面的
<head>中引入，或用内联style写在片段里 - 如果 header 含下拉菜单，CSS 的
z-index要设足够高（如z-index: 999），否则会被 iframe 自身裁剪
iframe 高度塌陷、滚动条/边框残留
默认 <iframe> 会显示边框、滚动条，且高度常为 150px 左右，导致内容被截断或底部留白。
关键属性必须显式设置：
立即学习“前端免费学习笔记（深入）”；
-
frameborder="0"或现代写法frameBorder="0"（注意大小写，部分旧浏览器敏感） -
scrolling="no"—— 禁用滚动条；若内容动态展开，改用 JS 动态调整高度更稳妥 -
height建议用固定值（如height="80"）或 CSS 控制：style="height: 80px; border: none;" - 移除默认 margin：加
marginwidth="0" marginheight="0"，或统一用 CSS 重置iframe { margin: 0; }
iframe 中的链接点击后在新窗口打开或跳转整个父页
默认情况下，header.html 里的 <a href="..."> 点击会以 iframe 为上下文加载，导致只刷新局部区域，体验割裂；更糟的是，没设 target 时可能覆盖整个页面。
解决方式只有两个有效选择：
- 全部链接加
target="_parent"，确保跳转作用于主页面（<a href="/about" target="_parent">关于我们</a>） - 避免在
header.html中写任何<a>，改用 JS 绑定事件并调用parent.location.href = "..."; - 绝对不要用
target="_blank"—— 它会绕过当前站点上下文，破坏用户停留路径
SEO 和可访问性为什么劝退 iframe 方案
搜索引擎爬虫普遍不解析 iframe 内容源，header.html 中的导航文字、关键词、<h1> 结构不会被计入主页面权重；屏幕阅读器也难以将 iframe 内容与主文档语义连贯衔接。
这不是“能不能用”的问题，而是“值不值得用”：
- 若项目是内部系统、原型页、或完全不依赖 SEO，
<iframe>最快能跑通 - 但只要面向公众、需要百度/Google 收录，或要过无障碍审计（WCAG），就必须换方案——比如服务端 include、构建时注入，或至少改用
fetch()+innerHTML - 特别注意：本地双击打开 HTML 文件（
file://协议）时，fetch和jQuery.load()会因跨域被浏览器拦截，而<iframe>是唯一能在纯静态离线场景下勉强工作的方案
