Frames 框架：一段“黑历史”，看懂就能维护 20 年前的老网站

11-18 141 0 0

别被“框架”两个字吓到——在 CSS 还没支棱起来的年代，人们用 <frameset> 把浏览器窗口切成“豆腐块”，每块加载独立 HTML。
如今它基本绝迹，但接手老后台、OA、ERP 时，你仍可能遇到这些“老豆腐”。
5 分钟扫一眼，以后改旧代码不抓瞎。

1. 核心三件套：frameset → frame → noframes

<frameset>：切窗口的“案板”
<frame>：案板上的“豆腐块”
<noframes>：给不支持框架的浏览器看的“备胎提示”

注意：用了 <frameset> 就不能写 <body>，否则浏览器直接罢工。

2. 两种切法：cols 左右分，rows 上下分

① 左右 25% vs 75%

<frameset cols="25%,75%" border="1">
  <frame src="nav.html"  name="leftFrame"  noresize>
  <frame src="main.html" name="mainFrame">
</frameset>

② 上下 80 px + 剩余

<frameset rows="80,*" border="0">
  <frame src="header.html" scrolling="no">
  <frame src="content.html">
</frameset>

noresize 禁止拖拽边框；scrolling="no" 干掉滚动条，视觉更干净。

3. 嵌套：先上下再左右，想怎么拼都行

<frameset rows="80,*">
  <frame src="header.html">
  <frameset cols="200,*">
    <frame src="menu.html"  name="menu">
    <frame src="show.html"  name="show">
  </frameset>
</frameset>

思路跟 table 嵌套一样，外层定高，内层再切列。

4. 跨框跳转：target 指向 name

在导航框里写链接，把 target 设成目标框的 name 即可：

<a href="user-list.html" target="show">用户管理</a>

特殊值：

_top 突破所有框架，整页跳转
_blank 新窗口打开，老框架不动

5. 优缺点一句话记

优点	缺点
公用的 nav/header 只写一次，省流量	SEO 抓不到内容，URL 不随页面变
当年网速慢，可并行加载多块	打印、收藏、返回键全部失灵
实现纯静态“局部刷新”	移动端支持差，无障碍灾难

6. 现代替代方案

需求	当年做法	现在做法
公用头部	frame 顶部条	服务器模板 / SPA 组件
局部刷新	只重载某个 frame	AJAX + DOM 替换
分栏布局	cols/rows 硬切	CSS Flex / Grid

7. 维护老系统 3 个提醒

框架名别乱改，全站 target 都指着它
边框 border="0" 可隐身，但调试时先设 1 方便看缝
打印页最好再加 _top 链接，让用户能跳出框架再打印

8. 一句话总结

Frames 就像老式座机：现在没人用它上网，但进到老楼（老系统）还得会接打电话。
看懂 <frameset> + target 套路，改 20 年前的代码不再抓瞎；
写新站？请直接 Flex / Grid / AJAX，让 Frames 继续躺在博物馆。

快来点个赞吧

编程知识