<frame>-框架(已废弃)

<frame> 是 HTML 早期用于实现多窗口布局的标签，允许在同一个浏览器窗口中加载多个独立的 HTML 文档。随着 Web 标准的演进，它因可访问性、SEO 和维护性问题被废弃，取而代之的是更现代的 <iframe> 和 CSS 布局技术。

<frame> 的基本用法

<frame> 必须嵌套在 <frameset> 标签内，通过 src 属性指定要加载的文档。<frameset> 定义了窗口的分割方式：

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

此代码将窗口分为左右两栏，左侧加载 menu.html，右侧加载 content.html。

属性详解

核心属性

• src: 指定框架内容 URL（必需）
• name: 为框架命名，用于超链接的 target 属性
• frameborder: 控制边框显示（0/1）
• scrolling: 控制滚动条（yes/no/auto）

已淘汰属性

• marginwidth/marginheight: 定义边距（像素值）
• noresize: 禁止用户调整框架大小

典型问题与局限性

导航与书签

框架页的 URL 不随内容变化，导致无法直接分享子页面链接：

<!-- 主页面 -->
<frameset cols="200,*">
  <frame src="nav.html" name="menu">
  <frame src="home.html" name="content">
</frameset>

<!-- nav.html -->
<a href="about.html" target="content">关于我们</a>

点击链接后，地址栏仍显示主页 URL，而非 about.html。

搜索引擎优化

搜索引擎爬虫难以索引框架内内容，导致 SEO 效果极差。

现代替代方案

使用 <iframe>

<div class="layout">
  <iframe src="sidebar.html" title="导航栏"></iframe>
  <main>
    <iframe src="article.html" title="正文"></iframe>
  </main>
</div>

<style>
  .layout { display: flex; }
  iframe { border: none; width: 100%; }
</style>

CSS Grid/Flexbox 布局

<div class="grid-container">
  <nav>导航内容直接嵌入</nav>
  <article>主内容区</article>
</div>

<style>
  .grid-container {
    display: grid;
    grid-template-columns: 200px 1fr;
  }
</style>

历史案例研究

2000 年代早期，许多政府网站使用框架结构：

<frameset rows="80,*">
  <frame src="banner.html" noresize>
  <frameset cols="150,*">
    <frame src="department_list.html">
    <frame src="welcome.html" name="main">
  </frameset>
</frameset>

这种结构导致屏幕阅读器无法正确解析内容层次，现已被单页应用取代。

特殊场景下的变通方案

某些遗留系统仍需框架支持，可通过 JavaScript 动态检测：

// 检测浏览器是否支持框架
if (window.frames && window.frames.length > 0) {
  console.log('运行在框架环境中');
  // 特殊处理逻辑
}

废弃时间线

• HTML 4.01（1999）中不推荐使用
• HTML5（2014）正式移除规范
• 主流浏览器仍保持兼容，但控制台会显示警告

向后兼容的注意事项

若必须维护旧代码，需确保：

1. 添加 <noframes> 后备内容
2. 为每个 <frame> 设置 title 属性
3. 避免嵌套超过三层

<frameset cols="30%,70%">
  <frame src="menu.html" title="主菜单">
  <frame src="intro.html" title="内容区域">
  <noframes>
    <p>请使用支持框架的浏览器访问</p>
  </noframes>
</frameset>

调试技巧

在 Chrome DevTools 中：

1. 通过 document.getElementsByTagName('frame') 获取框架列表
2. 使用 window.frames[0].document 访问子框架文档对象
3. 通过 top 和 parent 变量跨框架通信

安全相关隐患

框架曾导致多种安全漏洞：

• 点击劫持（Clickjacking）
• 跨框架脚本攻击
• 父窗口 URL 欺骗

现代浏览器已默认限制框架的以下行为：

// 以下代码在现代浏览器中会被阻止
window.parent.document.cookie = "hack=1";