您现在的位置是：网站首页 > <frameset>-框架集(已废弃)文章详情

<frameset>-框架集(已废弃)

陈川【 HTML 】 54125人已围观 2644字

<frameset> 是 HTML 早期用于创建多窗口布局的标签，通过分割浏览器窗口实现多个独立文档的并行展示。随着现代 Web 标准的演进，它因可用性、可访问性和维护性问题被废弃，取而代之的是更灵活的 <iframe> 和 CSS 布局技术。

`<frameset>` 的基本语法与属性

<frameset> 通过 rows 和 cols 属性定义窗口的分割方式，值可以是像素、百分比或相对比例（*）。子元素只能是 <frame> 或嵌套的 <frameset>，且不能与 <body> 共存。

<frameset cols="25%,50%,25%">
  <frame src="menu.html">
  <frame src="content.html">
  <frame src="sidebar.html">
</frameset>

关键属性：

rows：垂直分割窗口（如 rows="100,*,200" 表示上中下三部分）。
cols：水平分割窗口（如 cols="20%,80%" 表示左右两栏）。
border：控制框架边框粗细（已废弃，推荐用 CSS）。
frameborder：是否显示边框（0/1，非标准属性）。

嵌套框架与混合布局

通过嵌套 <frameset> 可实现复杂布局。例如，先水平分割为上下两部分，再对下半部分垂直分割：

<frameset rows="100,*">
  <frame src="header.html">
  <frameset cols="30%,70%">
    <frame src="nav.html">
    <frame src="main.html">
  </frameset>
</frameset>

`<frame>` 标签的辅助属性

每个 <frame> 支持以下属性：

src：指定加载的文档 URL。
name：为框架命名，用于超链接的 target 属性。
noresize：禁止用户调整框架大小。
scrolling：控制滚动条（auto|yes|no）。

<frame src="form.html" name="contentFrame" noresize scrolling="no">

与 `<noframes>` 的兼容性处理

为兼容不支持框架的浏览器，可使用 <noframes> 提供备用内容：

<frameset cols="50%,50%">
  <frame src="left.html">
  <frame src="right.html">
  <noframes>
    <p>您的浏览器不支持框架，请<a href="no-frames.html">访问无框架版本</a>。</p>
  </noframes>
</frameset>

框架间的通信与交互

通过 parent 或 top 对象可跨框架访问 DOM。例如，在子框架中修改父框架的标题：

// 子框架中的代码
parent.document.title = "新标题";

超链接通过 target 指定目标框架：

<a href="page.html" target="contentFrame">加载内容</a>

废弃原因与现代替代方案

<frameset> 的缺陷包括：

SEO 不友好：搜索引擎难以索引框架内容。
可访问性问题：屏幕朗读器处理困难。
维护成本高：URL 管理复杂，后退按钮行为异常。

替代方案示例：

CSS + <iframe>：

<div class="layout">
  <iframe src="menu.html" class="sidebar"></iframe>
  <iframe src="content.html" class="main"></iframe>
</div>
<style>
  .layout { display: flex; }
  .sidebar { width: 25%; }
  .main { width: 75%; }
</style>

CSS Grid/Flexbox：

<div class="grid-container">
  <header>页眉</header>
  <nav>导航</nav>
  <main>内容区</main>
</div>
<style>
  .grid-container {
    display: grid;
    grid-template-columns: 200px 1fr;
    grid-template-rows: 80px 1fr;
  }
</style>

历史版本中的特殊用法

HTML4 曾支持 framespacing 属性控制间距，但已被 CSS 取代：

<frameset cols="*" framespacing="10"> <!-- 已失效 -->

实际场景的局限性案例

假设一个框架集包含登录页和后台页，用户登录后需刷新整个框架集而非单个框架，导致体验割裂：

<!-- 登录框架 -->
<frameset cols="*">
  <frame src="login.html">
</frameset>

<!-- 登录成功后需完全跳转 -->
<script>
  if (loggedIn) {
    top.location.href = "admin-frameset.html"; // 强制顶层跳转
  }
</script>

上一篇： <frame>-框架(已废弃)

下一篇： <noframes>-框架替代内容(已废弃)