HTML <frame> 元素
已废弃
该特性已经从 Web 标准中删除,虽然一些浏览器目前仍然支持它,但也许会在未来的某个时间停止支持,请尽量不要使用该特性。
<frame>
是一个 HTML 元素,它定义了可以显示另一个 HTML 文档的特定区域。框架应在 <frameset>
内使用。
由于某些缺点,例如性能问题和屏幕阅读器用户无法访问,因该不会鼓励使用 <frame>
元素。比起 <frame>
元素,<iframe>
可能是更合适的。
实例
简单的三框架页面:
<frameset cols="25%,50%,25%">
<frame src="/examples/frame_a.htm">
<frame src="/examples/frame_b.htm">
<frame src="/examples/frame_c.htm">
</frameset>
属性
该元素包含了全局属性。
src
该属性指定了展示在框架里的文档地址。
name
该属性用于指定框架的名称。如果指定名称,所有链接都会在它们所在的框架中打开。
noresize
该属性可以避免用户调整框架大小。
scrolling
该属性定义是否显示滚动条。如果不使用该属性,浏览器在必要时放置滚动条。有两个选项值:yes
表示即使没有必要也显示滚动条,no
表示即使在必要时也不显示滚动条。
marginheight
该属性定义了框架之间的边距有多高。
marginwidth
该属性定义框架之间的边距将是多宽。
frameborder
该属性允许您为框架添加边框。
事件属性
根据 W3C 的标准,在 HTML 4.01 中,<frame>
元素不支持任何的事件属性。
但是,所有的浏览器都支持 onload
事件。
如需完整的描述,请访问事件属性。
使用注意
HTML5 不支持 <frame>
标签。
<frame>
标签定义 <frameset>
中的子窗口(框架)。
<frameset>
中的每个 <frame>
都可以设置不同的属性,比如 border、scrolling, noresize 等等。
**注释:**如果您希望验证包含框架的页面,请确保 <!DOCTYPE> 被设置为 "HTML Frameset DTD" 或者 "XHTML Frameset DTD" 。
更多实例
本例演示如何使用三份不同的文档制作一个水平框架。
<!DOCTYPE html>
<html>
<frameset rows="25%,*,25%">
<frame src="/examples/frame_a.htm">
<frame src="/examples/frame_b.htm">
<frame src="/examples/frame_c.htm">
</frameset>
</html>
本例演示如何制作含有三份文档的框架结构,同时将他们混合置于行和列之中。
<!DOCTYPE html>
<html>
<frameset rows="50%,50%">
<frame src="/examples/frame_a.htm">
<frameset cols="25%,75%">
<frame src="/examples/frame_b.htm">
<frame src="/examples/frame_c.htm">
</frameset>
</frameset>
</html>
本例演示含有 noresize="noresize"
属性的框架结构。在本例中,框架是不可调整尺寸的。在框架间的边框上拖动鼠标,您会发现边框是无法移动的。
<!DOCTYPE html>
<html>
<frameset cols="50%,*,25%">
<frame src="/examples/frame_a.htm" noresize="noresize">
<frame src="/examples/frame_b.htm">
<frame src="/examples/frame_c.htm">
</frameset>
</html>
HTML 4.01 与 HTML5 之间的差异
HTML5 不支持 <frame>
元素,HTML 4.01 支持 <frame>
元素。
HTML 与 XHTML 之间的差异
在 HTML 中,<frame>
元素没有结束标签。在 XHTML 中,<frame>
元素必须被正确地关闭。
桌面浏览器兼容性
特性 | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|---|
基础支持 | 支持 | 支持 | 支持 | 支持 | 支持 | 支持 |
frameborder |
支持 | 支持 | 支持 | 支持 | 支持 | 支持 |
marginheight |
支持 | 支持 | 支持 | 支持 | 支持 | 支持 |
marginwidth |
支持 | 支持 | 支持 | 支持 | 支持 | 支持 |
name |
支持 | 支持 | 支持 | 支持 | 支持 | 支持 |
noresize |
支持 | 支持 | 支持 | 支持 | 支持 | 支持 |
scrolling |
支持 | 支持 | 支持 | 支持 | 支持 | 支持 |
src |
支持 | 支持 | 支持 | 支持 | 支持 | 支持 |
移动浏览器兼容性
特性 | Android | Chrome for Android | Edge mobile | Firefox for Android | IE mobile | Opera Android | iOS Safari |
---|---|---|---|---|---|---|---|
基础支持 | 支持 | 支持 | 支持 | 支持 | 支持 | 支持 | 支持 |
frameborder |
支持 | 支持 | 支持 | 支持 | 支持 | 支持 | 支持 |
marginheight |
支持 | 支持 | 支持 | 支持 | 支持 | 支持 | 支持 |
marginwidth |
支持 | 支持 | 支持 | 支持 | 支持 | 支持 | 支持 |
name |
支持 | 支持 | 支持 | 支持 | 支持 | 支持 | 支持 |
noresize |
支持 | 支持 | 支持 | 支持 | 支持 | 支持 | 支持 |
scrolling |
支持 | 支持 | 支持 | 支持 | 支持 | 支持 | 支持 |
src |
支持 | 支持 | 支持 | 支持 | 支持 | 支持 | 支持 |