在html5中语法非法,浏览器直接忽略并退入怪异模式;它被标准彻底移除,dom中不生成任何节点,必须用css grid/flexbox配合替代。

frameset 在 HTML5 中直接无效,不是“不推荐”而是语法错误
浏览器解析到 <frameset></frameset> 时,会跳过整个标签及其所有子 <frame>,DOM 中根本不会生成节点——document.querySelector('frameset') 永远返回 null。这不是兼容性问题,是标准层面的移除:HTML5 规范里压根没定义这个元素。哪怕写了 ,只要出现 <code><frameset></frameset>,解析器就中断 HTML5 规则,退入 quirks mode(怪异模式),导致样式计算、JS 执行上下文、甚至 内容都可能被丢弃。
frame 标签无法跨上下文通信,且彻底破坏语义与可访问性
<frame> 是 <frameset></frameset> 的子元素,必须嵌套使用,每个 <frame> 加载的是独立文档,拥有自己的 document、window 和 JS 全局作用域。这带来几个硬伤:
- JS 无法直接访问其他 frame 的 DOM,必须用
window.parent.frames[0].document这类脆弱路径,且跨域时完全失效 - 屏幕阅读器无法识别 frame 之间的逻辑关系,
title属性被忽略,aria-属性不生效 - SEO 归属混乱:搜索引擎把
nav.html当作独立页面抓取,而非当前页的导航模块 - 每个 frame 都要单独加载 CSS/JS,重复请求多,首屏性能差
iframe 不是 frameset 的平替,但它是唯一合法的现代替代入口
<iframe></iframe> 没被废弃,但它和 <frame> 本质不同:它是个流式内容容器,可放在任意合法 HTML 上下文中,比如 <main></main> 或 <aside></aside> 里。但直接替换 <frameset></frameset> 会踩一堆坑:
- 默认有边框和滚动条,必须显式清除:
border: none; overflow: hidden; - 设
height: 100%时,父容器必须有明确高度(如height: 100vh),否则 iframe 塌缩为 0 - 必须加
title属性(如title="主菜单"),否则 Lighthouse 报“iframe 缺少描述” - 若需执行 JS,
sandbox至少得写sandbox="allow-scripts",不能留空 - 不要指望它自动继承父页面样式或字体,内部文档完全隔离
CSS Grid + iframe 才是真正可行的重构路径
想复现旧 <frameset cols="250px,1fr"></frameset> 的布局意图,正确做法是:
- 用普通
<div class="layout"> 包裹,里面放语义化区域(如 <code><aside class="sidebar"></aside>+<main></main>) - 给容器设
display: grid; grid-template-columns: 250px 1fr;,而不是试图让 iframe 自己撑开 - 把
<iframe></iframe>放进对应格子,并控制其宽高为 100%,同时确保父格子有明确尺寸 - 局部滚动要加在区域容器上(如
.sidebar { overflow-y: auto; }),不是给 iframe 加 - 避免用纯百分比列(如
20% 80%),改用minmax(250px, 20%) 1fr保证最小可用宽度
真正难的不是写对 CSS,而是把原来分散在多个 HTML 文件里的逻辑(比如菜单状态、路由同步、登录态共享)收束到单个上下文里——这一步没法靠布局方案解决,得靠 SPA 路由或服务端 include 重构交互契约。











