在html5中已被彻底移除,语法非法,浏览器直接忽略或触发怪异模式;必须用css grid/flexbox配合及语义化标签替代。

frameset 标签在现代网页中已完全废弃,不能在 HTML5 页面中使用。如果你在 Chrome、Firefox 或 Edge 中直接写 frameset,浏览器会忽略它,甚至可能把整个页面渲染为空白(因为 frameset 要求移除 body,而 HTML5 解析器不认这种结构)。
别费劲调 frameset 的 rows/cols 了——它不是“用法不对”,而是“根本不能用”。
为什么 frameset 会失效?
HTML5 明确移除了 frameset、frame、noframes 这组标签。W3C 规范里它们已被标记为 obsolete。现代浏览器按 HTML5 规则解析文档时:
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图,自动匹配视觉风格。触发场景:文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 遇到
frameset开始标签,会直接进入 quirks mode 或丢弃后续内容 - 即使强制声明
,<code>frameset仍被视作无效嵌套,DOM 构建失败 - 控制台通常不报错,但 Network 面板里你看不到任何 frame 加载请求——因为压根没解析
iframe 是唯一合法的替代方案
HTML5 唯一保留的内嵌页面机制是 iframe。它不破坏主页面结构,支持同源/跨域(需服务端配合),且能用 CSS 精确控制位置和尺寸:
-
src必须指向有效 URL(本地文件需起服务,file://协议下多数浏览器会因安全策略拒绝加载) - 必须加
title属性(可访问性强制要求,否则 Lighthouse 审计失败) - 禁用滚动条用
scrolling="no"已过时,应改用 CSS:overflow: hidden - 去边框不要用
frameborder="0"(HTML5 中已废弃),改用border: none
<div class="layout">
<iframe title="顶部导航" src="top.html" style="width:100%; height:60px; border:none;"></iframe>
<div class="main-area">
<iframe title="左侧菜单" src="left.html" style="float:left; width:200px; height:calc(100vh - 60px); border:none;"></iframe>
<iframe title="主内容区" src="main.html" style="margin-left:200px; width:calc(100% - 200px); height:calc(100vh - 60px); border:none;"></iframe>
</div>
</div>
旧系统维护时遇到 frameset 怎么办?
如果是在修一个还在跑的 Struts2 或老 JSP 后台系统,页面里真有 frameset,那说明它运行在 HTML4.01 DTD 下,且服务器返回的 MIME 类型必须是 text/html(不能是 application/xhtml+xml)。此时要注意:
- 所有子页面(如
left.jsp)必须自己带完整结构,不能只写片段 -
target属性必须匹配frame的name,大小写敏感,拼错就打不开 - Chrome 90+ 对
frameset的兼容性进一步收紧,部分noresize或scrolling="NO"行为已不可靠 - 移动端 Safari 直接不渲染
frameset区域,空白一片
真正麻烦的不是怎么写,而是你得确认整个技术栈是否还允许你用这套东西——比如新部署的 Nginx 默认返回 text/html; charset=utf-8,看着没问题,但若后端模板引擎偷偷注入了 HTML5 片段(比如 <header></header>),整个 frameset 就会崩解。这种问题不会报错,只会静默失败。










