HTML <iframe> 标签

定义和用法

<iframe> 标签定义行内框架（内联框架）。

行内框架用于在当前 HTML 文档中嵌入另一个文档。

提示：请使用 CSS 来设置 <iframe> 的样式（请参见下面的例子）。

提示：最好始终为 <iframe> 包含 title 属性。屏幕阅读器可使用此属性来读取关于 <iframe> 内容的描述。

另请参阅：

HTML 教程：HTML Iframe

HTML DOM 参考手册：IFrame 对象

实例

例子 1

行内框架标记如下：

<iframe src="https://www.w3school.com.cn" title="W3School 在线教程"></iframe>

亲自试一试

例子 2

添加并删除 iframe 的边框（使用 CSS）：

<iframe src="/index.asp" width="100%" height="300" style="border:1px solid black;">
</iframe>

<iframe src="/index.asp" width="100%" height="300" style="border:none;">
</iframe>

亲自试一试

属性

属性 值 描述
allow 规定 <iframe> 的功能策略。
allowfullscreen
  • true
  • false
 如果 <iframe> 可以通过调用 requestFullscreen() 方法激活全屏模式，则设置为 true。
allowpaymentrequest
  • true
  • false
 如果允许跨源 <iframe> 调用 Payment Request API，则设置为 true。
height 像素 规定 <iframe> 的高度。默认高度为 150 像素。
loading
  • eager
  • lazy
 规定浏览器是应立即加载 iframe 还是推迟加载 iframe，直到满足某些条件为止。
name 文本 规定 <iframe> 的名称。
referrerpolicy
  • no-referrer
  • no-referrer-when-downgrade
  • origin
  • origin-when-cross-origin
  • same-origin
  • strict-origin-when-cross-origin
  • unsafe-url
 规定在获取 iframe 时要发送的引用信息。
sandbox
  • allow-forms
  • allow-pointer-lock
  • allow-popups
  • allow-same-origin
  • allow-scripts
  • allow-top-navigation
 启用一系列对 <iframe> 中内容的额外限制。
src URL 规定要嵌入到 <iframe> 中的文档的地址。
srcdoc HTML 代码 规定要在 <iframe> 中显示的页面的 HTML 内容。
width 像素 规定 <iframe> 的宽度。默认宽度为 300 像素。

全局属性

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

事件属性

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

默认的 CSS 设置

大多数浏览器将使用以下默认值显示 <iframe> 元素：

iframe:focus {
  outline: none;
}

iframe[seamless] {
  display: block;
}

浏览器支持

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
支持 支持 支持 支持 支持