框架集的基本概念(frameset)

作者：陈川阅读数：33043人阅读分类： HTML

框架集（frameset）是HTML早期用于分割浏览器窗口的技术，允许在同一页面中加载多个独立的HTML文档。虽然现代Web开发已逐渐弃用frameset，但了解其基本概念仍有助理解历史遗留项目或特定场景的应用。

frameset的基本结构

frameset通过<frameset>标签定义，替代传统HTML文档中的<body>标签。其核心属性包括：

cols：垂直分割窗口，定义各列的宽度比例
rows：水平分割窗口，定义各行的高度比例

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN">
<html>
<head>
    <title>框架集示例</title>
</head>
<frameset cols="25%,50%,25%">
    <frame src="left.html">
    <frame src="main.html">
    <frame src="right.html">
</frameset>
</html>

框架的嵌套使用

frameset支持多层嵌套，实现复杂布局：

<frameset rows="20%,80%">
    <frame src="header.html">
    <frameset cols="30%,70%">
        <frame src="nav.html">
        <frame src="content.html">
    </frameset>
</frameset>

frame标签的特定属性

每个<frame>元素可配置以下关键属性：

name：为框架命名以便超链接定向
scrolling：控制滚动条显示（auto|yes|no）
noresize：禁止用户调整框架大小
marginwidth/marginheight：设置边距

<frame src="chat.html" name="chatFrame" noresize scrolling="no">

目标框架与链接控制

通过target属性指定链接打开位置：

<!-- 在导航框架中 -->
<a href="chapter1.html" target="mainFrame">第一章</a>
<a href="chapter2.html" target="mainFrame">第二章</a>

<!-- 对应frameset定义 -->
<frameset cols="200,*">
    <frame src="nav.html" name="navFrame">
    <frame src="welcome.html" name="mainFrame">
</frameset>

noframes备用内容

为不支持框架的浏览器提供备用内容：

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

框架间的JavaScript通信

不同框架间可通过parent对象进行交互：

<!-- 在frameA.html中 -->
<script>
function showMessage() {
    parent.frames["frameB"].document.getElementById("display").innerHTML = "Hello!";
}
</script>

<!-- 在frameB.html中 -->
<div id="display"></div>

框架集的安全限制

现代浏览器对框架集施加了严格限制：

跨域框架无法直接访问彼此DOM
某些HTTP头（如X-Frame-Options）可阻止框架加载
响应式设计困难，移动设备支持差

替代方案对比

相比现代布局技术，frameset存在明显缺陷：

<!-- 现代替代方案示例：Flexbox -->
<div style="display: flex;">
    <div style="flex: 1;">左侧内容</div>
    <div style="flex: 3;">主内容区</div>
</div>

<!-- 替代方案：iframe -->
<div class="container">
    <iframe src="widget.html" class="responsive-iframe"></iframe>
</div>

实际应用场景

特定情况下仍可能使用frameset：

遗留系统维护
需要严格隔离的插件系统
某些管理后台的固定布局

<!-- 经典三栏管理后台布局 -->
<frameset cols="200px,*,200px">
    <frame src="menu.html">
    <frame src="dashboard.html" name="main">
    <frame src="notifications.html">
</frameset>