轻松上手,快乐学习!

HTML <iframe> 标签



实例

标记一个内联框架:

<iframe src="https://www.begtut.com" title="BEGTUT 免费在线网络教程"></iframe>
亲自试一试 »

下面有更多实例。


定义和用法

<iframe> 标签规定一个内联框架。

一个内联框架被用来在当前 HTML 文档中嵌入另一个文档。

提示: 使用 CSS 为 <iframe> (包括滚动条)定义样式。

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


浏览器支持

元素
<iframe> Yes Yes Yes Yes Yes

属性

属性 描述
allow   指定 <iframe> 其特征策略
allowfullscreen true
false
设置为true时,可以通过调用 <iframe> 的 requestFullscreen() 方法激活全屏模式。
allowpaymentrequest true
false
设置为true时,跨域的 <iframe> 就可以调用 Payment Request API
height pixels 规定 iframe 的高度。 默认值为 150 像素
name text 规定 <iframe> 的名称。
referrerpolicy no-referrer
no-referrer-when-downgrade
origin
origin-when-cross-origin
same-origin
strict-origin
strict-origin-when-cross-origin
unsafe-url
表示在获取 iframe 资源时如何发送 referrer 首部
sandbox allow-forms
allow-pointer-lock
allow-popups
allow-same-origin
allow-scripts
allow-top-navigation
在 iframe 框架中的内容启用一些额外的限制条件。
src URL 被嵌套的页面的 URL 地址。使用 about:blank 值可以嵌入一个遵从同源策略的空白页。
srcdoc HTML_code 该属性是一段 HTML 代码,这些代码会被渲染到 iframe 中。
width pixels 规定 <iframe>的宽度。默认值是 300 像素

全局属性

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


事件属性

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


更多实例

实例

添加和删除 iframe 边框 (使用 CSS):

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

<iframe src="/default.php" width="100%" height="300" style="border:none;">
</iframe>
亲自试一试 »

相关页面

HTML 教程: HTML Iframes

HTML DOM 参考手册: IFrame 对象


默认CSS设置

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

iframe:focus {
  outline: none;
}

iframe[seamless] {
  display: block;
}