HTML <iframe> Tag

  • Vorherige Seite <i>
  • Nächste Seite <img>

Definition und Verwendung

<iframe> Der Tag definiert den Inline-Frames (Inhaltsrahmen).

Inline-Frames werden verwendet, um einen anderen Dokument in das aktuelle HTML-Dokument einzubetten.

Hinweis:Verwenden Sie CSS, um <iframe> Stil zu setzen (siehe untenstehendes Beispiel).

Hinweis:Es ist am besten immer <iframe> Enthält die title-Attribut. Screen Reader können diesen Attribut verwenden, um über <iframe> Beschreibung des Inhalts.

Weitere Informationen:

HTML-Tutorial:HTML Iframe

HTML DOM Referenzhandbuch:IFrame-Objekt

Beispiel

Beispiel 1

Der Inline-Frames-Tag ist wie folgt definiert:

<iframe src="https://www.codew3c.com" title="CodeW3C.com Online Tutorial"></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> Der Tag unterstützt auch Globale Eigenschaften in HTML.

Ereignis Eigenschaften

<iframe> Der Tag unterstützt auch Ereignis Eigenschaften in HTML.

Standardmäßige CSS-Einstellungen

Die meisten Browser verwenden folgende Standardwerte zum Anzeigen <iframe> Element:

iframe:focus {
  outline: none;
{}
iframe[seamless] {
  display: block;
{}

Browserunterstützung

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Unterstützung Unterstützung Unterstützung Unterstützung Unterstützung
  • Vorherige Seite <i>
  • Nächste Seite <img>