结论是iframe为HTML5中唯一合法且语义正确的内嵌页面方式，frameset和frame已被彻底废弃，强行使用会导致页面无法通过验证、部分浏览器拒绝渲染，甚至被现代构建工具在HTML解析阶段报错。
直接说结论：iframe 是 HTML5 中唯一合法且语义正确的内嵌页面方式，frameset 和 frame 已被彻底废弃，强行使用会导致页面无法通过验证、部分浏览器拒绝渲染，甚至被现代构建工具（如 Vite、Webpack）在 HTML 解析阶段报错。
为什么不能用 frameset？它到底哪里不行
这不是兼容性“差一点”的问题，而是标准层面的移除：HTML5 规范明确不包含 frameset，浏览器解析器遇到它会降级为普通元素（即不生效），DOM 中也不会生成对应节点。你写 <frameset cols="20%,80%"><frame src="nav.html"><frame src="main.html"></frameset>，实际效果等同于写了几个没闭合的空标签——页面结构完全失控。
常见错误现象包括：
- 页面空白或只显示部分子页面
- 开发者工具里看不到
frame元素，只有文本节点残留 - SEO 爬虫直接跳过整个区域，子页面内容不被索引
iframe 的 src 路径怎么写才不会 404
路径错误是嵌入失败最常见原因，尤其当子页面和父页面不在同一目录层级时。iframe 的 src 是相对于父页面 URL 解析的，不是相对于当前 HTML 文件位置。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 用绝对路径最稳：例如父页在
https://example.com/app/index.html，子页在/app/parts/header.html，就写src="/app/parts/header.html" - 避免相对路径中的
../—— 构建工具（如 Webpack 的 html-webpack-plugin）常会重写路径，导致运行时解析错乱 - 本地开发时若用 file:// 协议，某些浏览器（如 Chrome）会因安全策略直接拦截
src为本地文件的iframe，必须起本地服务（如npx serve） - 检查 Network 面板中
iframe请求的 Status 是否为 200；如果是 404，点开请求看 “Initiator” 是哪个脚本或标签，再反推路径逻辑
如何让 iframe 填满容器且不出现双滚动条
默认 iframe 有边框、有内边距、尺寸不继承父容器，加上子页面自身也可能溢出，极易出现外层页面和 iframe 内部两套滚动条，体验极差。
关键样式组合必须同时设置：
-
border: none或frameborder="0"（后者仅作兼容，优先用 CSS） -
width: 100%; height: 100%—— 但前提是父容器有明确高度（比如height: 600px或flex: 1） -
overflow: hidden放在iframe上，或用overflow: auto仅在内部需要时显示滚动条 - 如果用 CSS Grid/Flex 布局，确保网格项或 flex 项设了
min-height: 0，否则iframe可能撑不开
示例：
<div style="display: flex; flex-direction: column; height: 100vh;"> <iframe src="header.html" style="border: none; width: 100%; height: 80px;"></iframe> <iframe src="main.html" style="border: none; width: 100%; flex: 1; overflow: hidden;"></iframe> </div>
跨域子页面怎么通信？别硬试 window.frames[0].document
只要 iframe 的 src 和父页不同源（协议、域名、端口任一不同），JavaScript 就无法直接访问其 DOM —— 这是浏览器同源策略铁律，不是权限没开或代码写错。
正确做法只有 postMessage：
- 父页发消息：
iframe.contentWindow.postMessage({type: "init", data: "hello"}, "https://target.com") - 子页监听：
window.addEventListener("message", (e) => { if (e.origin === "https://parent.com") { /* 处理 */ } }) - 务必校验
e.origin，不能只看e.data，否则存在 XSS 风险 - 子页若需回传，同样用
e.source.postMessage()，不能直接调父页函数
容易被忽略的点：子页面必须已加载完成才能接收消息，所以父页应在 iframe.onload 或 iframe.addEventListener("load") 后再发 postMessage，否则消息丢失。
