标签不定义内容,仅通过src属性指定子页面路径,HTML5已废弃;src是唯一有效加载方式,路径以/开头从根目录解析,否则相对frameset页面所在目录。

frame 标签本身不定义内容,只定义载入位置——真正的内容由 src 属性指向的 HTML 文件决定。HTML5 已废弃该机制,现代项目中不应新用;但若维护旧系统,必须严格按规则写,否则框架空白、链接失效、脚本异常。
frame 的 src 属性是唯一生效的加载入口
浏览器只认src,其他如 href、url、拼错的 scr 全部忽略,帧直接留空。
路径解析规则必须明确:
- 以 / 开头 → 从站点根目录开始找(例如 src="/admin/menu.html")
- 不以 / 开头 → 相对于 frameset 页面所在目录(例如 frameset.html 在 /app/ 下,则 src="nav.html" 就去 /app/nav.html)
- 完整 URL 也合法(src="https://cdn.example.com/widget.html"),但需注意跨域限制
常见错误现象:
- 框架显示空白,控制台无报错 → 很可能是
src路径 404,浏览器静默失败 - 点击导航链接后整个页面跳转 →
frame缺少name,或<a target="xxx"></a>中的xxx和name值不一致(大小写敏感!)
frameset 和 frame 必须严格隔离 body
frameset 和 body 互斥:
- frameset 必须是 html 的直接子元素,不能嵌套在 body 里
- 一旦用了 frameset,整个 body 内容会被浏览器彻底忽略(哪怕你写了 <h1>test</h1>)
- 若混用,部分老浏览器可能渲染异常,JS 执行时报 Uncaught DOMException: Failed to execute 'write' on 'Document' —— 实际是文档结构错乱导致上下文丢失
典型错误写法:
<html>
<body>
<frameset cols="200,*">
<frame src="menu.html">
<frame src="main.html">
</frameset>
</body>
</html>
这会导致所有框架不渲染,且 body 内容也不出现。
name 和 target 匹配是框架间通信的唯一方式
没有 JS 或 CSS 能绕过这个机制: - 每个frame 必须显式设 name(如 <frame name="nav" src="menu.html">)
- 导航链接必须用 target 指向该 name(如 <a href="detail.html" target="nav"></a>)
- name 值区分大小写,且不能纯数字(如 name="1" 在某些 IE 版本中解析失败)
- 多个 frame 的 name 不能重复,否则行为未定义
如果漏设 name,点击链接默认在当前窗口打开,破坏框架布局;如果 target 名字拼错,链接会在新标签页打开。
立即学习“前端免费学习笔记(深入)”;
替代方案比硬扛 frameset 更实际
frameset 和 frame 在 HTML5 中已完全移除,无法通过任何 polyfill 恢复标准兼容性。
真实维护场景中,更可行的做法是:
- 用 iframe + CSS Grid/Flexbox 重构布局(保留语义,支持响应式)
- 把原 frame 加载的页面改造成独立路由,用前端框架(如 React Router、Vue Router)管理视图切换
- 若必须保持旧结构,至少把 frameset 页面的 DOCTYPE 显式设为 Frameset DTD(),否则连基本校验都通不过
<p><code>frame 的 scrolling、noresize、border 等属性现在基本无效,现代浏览器要么忽略,要么仅部分支持;别指望靠它们做精细控制。



















