框架的分割方式(rows, cols)

框架的分割方式(rows, cols)

HTML中实现页面布局分割主要依赖<frameset>元素及其rows和cols属性。这种传统方式虽然逐渐被现代CSS布局替代，但在某些遗留系统中仍能看到其应用。

rows属性纵向分割

rows属性通过逗号分隔的值定义垂直方向的分割比例。每个值代表对应框架的高度，可以是像素值、百分比或相对比例（用星号表示）。

<frameset rows="20%, 60%, 20%">
  <frame src="header.html">
  <frame src="content.html">
  <frame src="footer.html">
</frameset>

这个例子创建了三个水平框架：

• 顶部框架占20%高度
• 中间框架占60%高度
• 底部框架占20%高度

使用星号表示剩余空间分配：

<frameset rows="100, *, 50">
  <frame src="toolbar.html">
  <frame src="main.html">
  <frame src="statusbar.html">
</frameset>

这里：

• 顶部固定100像素
• 底部固定50像素
• 中间占据剩余所有空间

cols属性横向分割

cols属性控制水平方向的分割，语法与rows相同：

<frameset cols="150, *">
  <frame src="sidebar.html">
  <frame src="article.html">
</frameset>

更复杂的嵌套示例：

<frameset cols="25%, 75%">
  <frame src="menu.html">
  <frameset rows="30%, 70%">
    <frame src="header.html">
    <frame src="content.html">
  </frameset>
</frameset>

混合使用rows和cols

两种属性可以组合创建复杂布局：

<frameset rows="80, *" cols="200, *">
  <frame src="logo.html">
  <frame src="nav.html">
  <frame src="ads.html">
  <frame src="main.html">
</frameset>

这个布局产生四个区域：

1. 左上角(80px高, 200px宽)
2. 右上角(80px高, 剩余宽度)
3. 左下角(剩余高度, 200px宽)
4. 右下角(剩余空间)

框架边框控制

通过frameborder和border属性调整框架外观：

<frameset cols="30%, 70%" frameborder="0" border="0">
  <frame src="panel.html" noresize>
  <frame src="display.html">
</frameset>

现代替代方案

虽然<frameset>仍被部分浏览器支持，但更推荐使用CSS实现类似布局：

<div class="container">
  <header>页眉</header>
  <aside>侧边栏</aside>
  <main>主内容</main>
  <footer>页脚</footer>
</div>

<style>
.container {
  display: grid;
  grid-template-rows: 80px 1fr 50px;
  grid-template-columns: 200px 1fr;
  height: 100vh;
}
header {
  grid-column: 1 / 3;
}
footer {
  grid-column: 1 / 3;
}
</style>

框架间通信

传统框架间可以通过parent对象访问其他框架：

<!-- frame1.html -->
<script>
function updateFrame2(text) {
  parent.frames[1].document.getElementById('output').innerText = text;
}
</script>

<!-- frame2.html -->
<div id="output">等待数据...</div>

现代替代方案使用postMessage：

// 发送方
window.parent.postMessage({ type: 'update', data: '新内容' }, '*');

// 接收方
window.addEventListener('message', (event) => {
  if(event.data.type === 'update') {
    document.getElementById('display').textContent = event.data.data;
  }
});

响应式框架布局

通过JavaScript动态调整框架尺寸：

<frameset id="mainFrameset" cols="200, *">
  <frame src="nav.html">
  <frame src="content.html">
</frameset>

<script>
function adjustLayout() {
  const frameset = document.getElementById('mainFrameset');
  frameset.cols = window.innerWidth < 768 ? "0, *" : "200, *";
}
window.addEventListener('resize', adjustLayout);
</script>

框架嵌套深度限制

浏览器通常限制框架嵌套层级（通常最多20层），过度嵌套会导致性能问题：

<!-- 不推荐的做法 -->
<frameset cols="50%, 50%">
  <frameset rows="50%, 50%">
    <frameset cols="50%, 50%">
      <!-- 更多嵌套... -->
    </frameset>
  </frameset>
</frameset>

框架与SEO

搜索引擎爬虫处理框架内容存在困难，重要内容应避免放在框架中：

<noframes>
  您的浏览器不支持框架，这是替代内容...
  <a href="no-frames-version.html">访问无框架版本</a>
</noframes>

框架安全限制

同源策略会影响框架间交互，跨域框架访问受到限制：

// 仅当同源时有效
try {
  const otherFrame = window.parent.frames[0];
  console.log(otherFrame.document.title);
} catch (e) {
  console.error('跨域访问被拒绝');
}

框架打印问题

打印包含框架的页面时需要特殊处理：

<frameset rows="*, 0">
  <frame src="content.html">
  <frame src="print.css" media="print">
</frameset>

print.css内容：

@media print {
  body {
    visibility: visible;
    position: static;
  }
}