HTML内联框架元素()表示嵌套的browsing context。它能够将另一个HTML页面嵌入到当前页面中。
浏览器支持
示例
标记一个内联框架:
标签定义及使用说明
- 标签创建包含另一个文档的行内框架,被用来在当前 HTML 文档中嵌入另一个文档。
- 可以把需要的文本放置在和之间,这样就可以应对不支持的浏览器。
- 使用 CSS 为(包括滚动条)定义样式。
脚本
内联的框架,就像元素一样,会被包含在window.frames伪数组(类数组的对象)中。
有了DOMHTMLIFrameElement对象,脚本可以通过contentWindow访问内联框架的window对象。contentDocument属性则引用了内部的document元素,(等同于使用contentWindow.document),但IE8-不支持。
在框架内部,脚本可以通过window.parent引用父窗口对象。
脚本访问框架内容必须遵守同源策略,并且无法访问非同源的window对象的几乎所有属性。同源策略同样适用于子窗体访问父窗体的window对象。跨域通信可以通过window.postMessage来实现。
定位和缩放
作为一个可替换元素,可以使用object-position和object-fit来定位、对齐、缩放元素内的文档。
属性
属性值描述
align | leftrighttopmiddlebottom | HTML5 不支持。HTML 4.01 已废弃。规定如何根据周围的元素来对齐。 |
frameborder | 10 | HTML5 不支持。规定是否显示周围的边框。 |
height | pixels | 规定的高度。 |
longdesc | URL | HTML5 不支持。规定一个页面,该页面包含了有关的较长描述。 |
marginheight | pixels | HTML5 不支持。规定的顶部和底部的边距。 |
marginwidth | pixels | HTML5 不支持。规定的左侧和右侧的边距。 |
name | name | 规定的名称。 |
sandbox HTML5新增 | ""allow-formsallow-same-originallow-scriptsallow-top-navigation | 对的内容定义一系列额外的限制。 |
scrolling | yesnoauto | HTML5 不支持。规定是否在中显示滚动条。 |
seamless HTML5新增 | seamless | 规定看起来像是父文档中的一部分。 |
src | URL | 规定在中显示的文档的 URL。 |
srcdoc HTML5新增 | HTML_code | 规定页面中的 HTML 内容显示在中。 |
width | pixels | 规定的宽度。 |
HTML 4.01 与 HTML 5 之间的差异
HTML5 新增了一些新的属性,同时去掉了 HTML 4.01 中的一些属性。
HTML 与 XHTML 之间的差异
在 XHTML 中,name 属性已被废弃,并将被去掉。请使用 id 属性代替。
全局属性
标签支持HTML 的全局属性。
事件属性
标签支持HTML 的事件属性。
无障碍环境
使用的title属性来标识框架的主要内容,这样可以极大方便使用辅助技术(例如屏幕阅读器)浏览网页的人。框架的标题应该清楚地描述框架的内容,例如:

如果没有标题,他们就只能浏览每一个框架来获取需要的内容。这非常耗时间,也很容易让人迷惑,尤其是当页面中包含很多框架或者互动内容如音视频等的时候。
例子
下面的例子中,我们创建了一个框架。当用户点击框架中的按钮时,浏览器会弹出一个提示框。
your browser does not support iframes.
下面的例子演示了在框架中展示谷歌地图。
see bigger map