HTML <iframe> 标签

iframe 标签作用是文档中的文档,或者浮动的框架(FRAME)。iframe元素会创建包含另外一个文档的内联框架(即行内框架)。


实例
  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  4. <h1>iframe 元素</h1>
  5. <iframe src="https://cankaoshouce.com" title="编程必备的参考手册">
  6. </iframe>
  7. </body>
  8. </html>

定义和用法

iframe 元素会创建包含另外一个文档的内联框架(即行内框架)。

提示:最好总是为<iframe>包含title属性。屏幕阅读器使用它来读取<iframe>的内容。

提示:页面上的每个<iframe>都需要增加内存和其它计算资源,这是因为每个浏览上下文都拥有完整的文档环境。虽然理论上来说你能够在代码中写出来无限多的<iframe>,但是你最好还是先看看这么做会不会导致某些性能问题。


浏览器支持

元素
<iframe>YesYesYesYesYes

所有浏览器都支持 <iframe> 标签。


HTML 与 XHTML 之间的差异

在 HTML 4.1 Strict DTD 和 XHTML 1.0 Strict DTD 中,不支持 iframe 元素。


提示和注释:

提示:您可以把需要的文本放置在 <iframe> 和 </iframe> 之间,这样就可以应对无法理解 iframe 的浏览器。


属性

HTML5 中的新属性。

属性描述
align
  • left
  • right
  • top
  • middle
  • bottom

不建议使用。请使用样式代替。

规定如何根据周围的元素来对齐此框架。

frameborder
  • 1
  • 0
规定是否显示框架周围的边框。
height
  • pixels
  • %
规定 iframe 的高度。
longdescURL规定一个页面,该页面包含了有关 iframe 的较长描述。
marginheightpixels定义 iframe 的顶部和底部的边距。
marginwidthpixels定义 iframe 的左侧和右侧的边距。
nameframe_name规定 iframe 的名称。
sandbox
  • ""
  • allow-forms
  • allow-same-origin
  • allow-scripts
  • allow-top-navigation
启用一系列对 <iframe> 中内容的额外限制。
scrolling
  • yes
  • no
  • auto
规定是否在 iframe 中显示滚动条。
seamlessseamless规定 <iframe> 看上去像是包含文档的一部分。
srcURL规定在 iframe 中显示的文档的 URL。
srcdocHTML_code规定在 <iframe> 中显示的页面的 HTML 内容。
width
  • pixels
  • %
定义 iframe 的宽度。

全局属性

<iframe> 标签支持 HTML 中的 全局属性


事件属性

<iframe> 标签支持 HTML 中的 事件属性


更多实例

用css样式来使用iframe标签

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  4. <h1>iframe 元素 + CSS</h1>
  5. <p>默认边框的iframe:</p>
  6. <iframe src="/" width="100%" height="300">
  7. </iframe>
  8. <p>黑色细边框的iframe:</p>
  9. <iframe src="/" width="100%" height="300" style="border:1px solid black;">
  10. </iframe>
  11. <p>无边框的iframe:</p>
  12. <iframe src="/" width="100%" height="300" style="border:none;">
  13. </iframe>
  14. </body>
  15. </html>

CSS默认样式

  1. iframe:focus {
  2. outline: none;
  3. }
  4. iframe[seamless] {
  5. display: block;
  6. }