<iframe>: Das Inline-Frame-Element

Probieren Sie es aus

<iframe
  id="inlineFrameExample"
  title="Inline Frame Example"
  width="300"
  height="200"
  src="https://www.openstreetmap.org/export/embed.html?bbox=-0.004017949104309083%2C51.47612752641776%2C0.00030577182769775396%2C51.478569861898606&amp;layer=mapnik">
</iframe>

iframe {
  border: 1px solid black;
  width: 100%; /* takes precedence over the width set with the HTML width attribute */
}

Jeder eingebettete Browsing-Kontext hat sein eigenes Dokument und erlaubt URL-Navigationen. Die Navigationen jedes eingebetteten Browsing-Kontextes werden in die Sitzungshistorie des obersten Browsing-Kontextes linearisiert. Der Browsing-Kontext, der die anderen einbettet, wird als Eltern-Browsing-Kontext bezeichnet. Der oberste Browsing-Kontext — derjenige ohne Eltern — ist in der Regel das Browserfenster, repräsentiert durch das Window-Objekt.

Attribute

Dieses Element enthält die globalen Attribute.

allow

Legt eine Berechtigungsrichtlinie für das <iframe> fest. Die Richtlinie definiert, welche Funktionen dem <iframe> basierend auf dem Ursprung der Anfrage zur Verfügung stehen (z.B. Zugriff auf das Mikrofon, die Kamera, die Batterie, den Web-Share, etc.).

Siehe iframes im Abschnitt Permissions-Policy für Beispiele.

Hinweis: Eine durch das allow-Attribut festgelegte Berechtigungsrichtlinie stellt eine weitere Einschränkung zusätzlich zu der in der Permissions-Policy-Überschrift festgelegten Richtlinie dar. Sie ersetzt diese nicht.

allowfullscreen

Setzen Sie true, wenn das <iframe> den Vollbildmodus durch Aufruf der Methode requestFullscreen() aktivieren kann.

Hinweis: Dieses Attribut wird als veraltet betrachtet und als allow="fullscreen" neu definiert.

allowpaymentrequest Veraltet Nicht standardisiert

Setzen Sie true, wenn einem ursprüngsübergreifenden <iframe> erlaubt wird, die Payment Request API aufzurufen.

Hinweis: Dieses Attribut wird als veraltet betrachtet und als allow="payment" neu definiert.

browsingtopics Nicht standardisiert Veraltet

Ein boolesches Attribut, das, wenn vorhanden, angibt, dass die ausgewählten Themen für den aktuellen Benutzer mit der Anforderung für die Quelle des <iframe>s gesendet werden sollen. Einzelheiten finden Sie unter Die Topics API verwenden.

credentialless Experimentell

Setzen Sie true, um das <iframe> ohne Anmeldeinformationen zu machen, was bedeutet, dass seine Inhalte in einem neuen, ephemeren Kontext geladen werden. Es hat keinen Zugriff auf das Netzwerk, Cookies und Speicherdaten, die mit seinem Ursprung verbunden sind. Es verwendet einen neuen Kontext, der an die Lebensdauer des obersten Dokuments lokal ist. Im Gegenzug können die Einbettungsregeln der Cross-Origin-Embedder-Policy (COEP) aufgehoben werden, sodass Dokumente mit COEP Einstellung Drittanbieter-Dokumente einbetten können, die dies nicht sind. Siehe IFrame credentialless für weitere Details.

csp Experimentell

Eine Content Security Policy, die für die eingebettete Ressource durchgesetzt wird. Siehe HTMLIFrameElement.csp für Details.

height

Die Höhe des Frames in CSS-Pixeln. Der Standardwert ist 150.

loading

Gibt an, wann der Browser das iframe laden soll:

eager

Lädt das iframe sofort beim Seitenladen (dies ist der Standardwert).

lazy

Verzögert das Laden des iframes, bis es eine berechnete Entfernung vom sichtbaren Viewport erreicht, wie vom Browser definiert. Der Zweck besteht darin, die Netzwerk- und Speicherbandbreite zu vermeiden, die erforderlich ist, um den Frame abzurufen, bis der Browser mit hoher Wahrscheinlichkeit davon ausgeht, dass er benötigt wird. Dies verbessert die Leistung und senkt die Kosten in den meisten typischen Anwendungsfällen, insbesondere durch Verkürzung der anfänglichen Ladezeiten der Seite.

Hinweis: Das Laden wird nur verschoben, wenn JavaScript aktiviert ist. Dies ist eine Anti-Tracking-Maßnahme.

name

Ein Zielname für den eingebetteten Browsing-Kontext. Dies kann im target-Attribut der Elemente <a>, <form>, oder <base> verwendet werden; im formtarget-Attribut der Elemente <input> oder <button>; oder im windowName-Parameter in der Methode window.open(). Darüber hinaus wird der Name zu einer Eigenschaft der Objekte Window und Document, die eine Referenz auf das eingebettete Fenster oder das Element selbst enthält.

referrerpolicy

Gibt an, welchen Referrer zu senden ist, wenn die Ressource des Frames abgerufen wird:

no-referrer

Der Referer-Header wird nicht gesendet.

no-referrer-when-downgrade

Der Referer-Header wird nicht an Urspunge ohne TLS (HTTPS) gesendet.

origin

Der gesendete Referrer wird auf den Ursprung der verweisenden Seite beschränkt sein: ihr Schema, Host und Port.

origin-when-cross-origin

Der Referrer, der an andere Ursprünge gesendet wird, wird auf das Schema, den Host und den Port beschränkt sein. Navigationen im selben Ursprung enthalten weiterhin den Pfad.

same-origin

Es wird ein Referrer für gleich Herkunft gesendet, aber bei ursprungsübergreifenden Anfragen wird keine Referrer-Information enthalten sein.

strict-origin

Senden Sie nur den Ursprung des Dokuments als Referrer, wenn das Sicherheitsniveau des Protokolls gleich bleibt (HTTPS→HTTPS), senden Sie es aber nicht an ein weniger sicheres Ziel (HTTPS→HTTP).

strict-origin-when-cross-origin (Standard)

Senden Sie eine vollständige URL bei einer Navigation im selben Ursprung, senden Sie nur den Ursprung, wenn das Sicherheitsniveau des Protokolls gleich bleibt (HTTPS→HTTPS), und senden Sie keinen Header an ein weniger sicheres Ziel (HTTPS→HTTP).

unsafe-url

Der Referrer enthält den Ursprung und den Pfad (aber nicht das Fragment, Passwort oder den Benutzernamen). Dieser Wert ist unsicher, da er die Ursprünge und Pfade von TLS-geschützten Ressourcen an unsichere Ursprünge weitergibt.

sandbox

Steuert die auf die eingebetteten Inhalte im <iframe> angewendeten Einschränkungen. Der Wert des Attributs kann entweder leer sein, um alle Einschränkungen anzuwenden, oder durch Leerzeichen getrennte Tokens, um bestimmte Einschränkungen aufzuheben:

allow-downloads

Erlaubt das Herunterladen von Dateien über ein Element <a> oder <area> mit dem download-Attribut sowie über Navigationsvorgänge, die zum Herunterladen einer Datei führen. Dies funktioniert unabhängig davon, ob der Benutzer auf den Link geklickt hat oder der Vorgang ohne Benutzerinteraktion durch JavaScript-Code initiiert wurde.

allow-forms

Erlaubt der Seite, Formulare zu senden. Wenn dieses Schlüsselwort nicht verwendet wird, wird ein Formular wie gewohnt angezeigt, aber das Absenden löst keine Eingabevalidierung aus, sendet keine Daten an einen Webserver und schließt keinen Dialog.

allow-modals

Erlaubt der Seite, modale Fenster durch Window.alert(), Window.confirm(), Window.print() und Window.prompt() zu öffnen, während das Öffnen eines <dialog> unabhängig von diesem Schlüsselwort erlaubt ist. Es erlaubt auch, dass die Seite das BeforeUnloadEvent empfangen kann.

allow-orientation-lock

Ermöglicht es der Ressource, die Bildschirmausrichtung zu sperren.

allow-pointer-lock

Erlaubt der Seite, die Pointer Lock API zu verwenden.

allow-popups

Erlaubt Popups (erstellt z.B. durch Window.open() oder target="_blank"). Wenn dieses Schlüsselwort nicht verwendet wird, schlägt eine solche Funktionalität stillschweigend fehl.

allow-popups-to-escape-sandbox

Erlaubt einem sandboxed-Dokument einen neuen Browsing-Kontext zu öffnen, ohne die Sandbox-Flags auf diesen anzuwenden. Dadurch kann z.B. eine Drittanbieter-Werbung sicher in einem Sandbox-Modus angezeigt werden, ohne die gleichen Einschränkungen auf die Seite, auf die die Anzeige verweist, zu erzwingen. Wenn dieses Flag nicht enthalten ist, unterliegt eine umgeleitete Seite, ein Popup-Fenster oder ein neuer Tab denselben Sandbox-Einschränkungen wie das ursprüngliche <iframe>.

allow-presentation

Erlaubt Emittenten zu kontrollieren, ob ein Iframe eine Präsentationssitzung starten kann.

allow-same-origin

Wenn dieses Token nicht verwendet wird, wird die Ressource als aus einem speziellen Ursprung stammend behandelt, der immer die Same-Origin-Policy verletzt (möglicherweise wird der Zugriff auf Datenspeicherung/Cookies und einige JavaScript-APIs verhindert).

allow-scripts

Erlaubt der Seite das Ausführen von Skripten (jedoch nicht das Erstellen von Pop-up-Fenstern). Wenn dieses Schlüsselwort nicht verwendet wird, ist die Operation nicht erlaubt.

allow-storage-access-by-user-activation Experimentell

Erlaubt einem Dokument, das im <iframe> geladen ist, die Storage Access API zu verwenden, um Zugriff auf unpartitionierte Cookies zu beantragen.

allow-top-navigation

Erlaubt der Ressource, den obersten Browsing-Kontext zu navigieren (denjenigen, der _top genannt wird).

allow-top-navigation-by-user-activation

Erlaubt der Ressource, den obersten Browsing-Kontext zu navigieren, jedoch nur, wenn dies durch eine Benutzeraktion initiiert wurde.

allow-top-navigation-to-custom-protocols

Erlaubt Navigationen zu Nicht-http-Protokollen, die im Browser integriert oder von einer Website registriert wurden. Diese Funktion wird auch vom allow-popups- oder allow-top-navigation-Schlüsselwort aktiviert.

Hinweis:

• Wenn das eingebettete Dokument denselben Ursprung wie die einbettende Seite hat, wird dringend davon abgeraten, sowohl allow-scripts als auch allow-same-origin zu verwenden, da das eingebettete Dokument dadurch das sandbox-Attribut entfernen kann, was es nicht sicherer macht als die Verwendung des sandbox-Attributs überhaupt nicht.
• Das Sandboxing ist nutzlos, wenn der Angreifer Inhalte außerhalb eines sandboxed iframe anzeigen kann, z.B. wenn der Betrachter den Frame in einem neuen Tab öffnet. Solche Inhalte sollten auch von einem separaten Ursprung bereitgestellt werden, um potenziellen Schaden zu begrenzen.

Hinweis: Beim Umleiten des Benutzers, beim Öffnen eines Popup-Fensters oder beim Öffnen eines neuen Tabs von einer eingebetteten Seite innerhalb eines <iframe> mit sandbox-Attribut unterliegt der neue Browsing-Kontext denselben sandbox-Einschränkungen. Dies kann Probleme verursachen — zum Beispiel, wenn eine Seite, die in ein <iframe> eingebettet ist, ohne dass das Attribut sandbox="allow-forms" oder sandbox="allow-popups-to-escape-sandbox" darauf gesetzt wurde, eine neue Website in einem separaten Tab öffnet, schlägt das Formular Absenden in diesem neuen Browsing-Kontext stillschweigend fehl.

src

Die URL der einzubettenden Seite. Verwenden Sie einen Wert von about:blank, um eine leere Seite einzubetten, die den Same-Origin-Policy erfüllt. Beachten Sie auch, dass das programmgesteuerte Entfernen des src-Attributs eines <iframe> (z.B. über Element.removeAttribute()) dazu führt, dass about:blank im Frame in Firefox (ab Version 65), Chromium-basierten Browsern und Safari/iOS geladen wird.

Hinweis: Die about:blank-Seite verwendet die URL des einbettenden Dokuments als Basiskatalog beim Auflösen relativer URLs, wie z.B. Ankerlinks.

srcdoc

Integriertes HTML zum Einbetten, das das src-Attribut überschreibt. Sein Inhalt sollte der Syntax eines vollständigen HTML-Dokuments entsprechen, das die Doctype-Direktive, <html>, <body>-Tags usw. beinhaltet, obwohl die meisten von ihnen weggelassen werden können, das nur den Inhalt des Körpers hinterlässt. Dieses Dokument hat about:srcdoc als seinen Standort. Wenn ein Browser das srcdoc-Attribut nicht unterstützt, wird er auf die URL im src-Attribut zurückgreifen.

Hinweis: Die about:srcdoc-Seite verwendet die URL des einbettenden Dokuments als Basiskatalog beim Auflösen relativer URLs, wie z.B. Ankerlinks.

width

Die Breite des Frames in CSS-Pixeln. Der Standardwert ist 300.

Veraltete Attribute

Diese Attribute sind veraltet und werden möglicherweise nicht mehr von allen Benutzeragenten unterstützt. Sie sollten sie nicht in neuen Inhalten verwenden und versuchen, sie aus bestehendem Inhalt zu entfernen.

align Veraltet

Die Ausrichtung dieses Elements in Bezug auf den umliegenden Kontext.

frameborder Veraltet

Der Wert 1 (Standard) zeichnet einen Rahmen um diesen Frame. Der Wert 0 entfernt den Rahmen um diesen Frame, aber Sie sollten stattdessen die CSS-Eigenschaft border verwenden, um <iframe>-Rahmen zu steuern.

longdesc Veraltet

Eine URL einer lang-beschriebenen Beschreibung der Inhalte des Frames. Aufgrund weit verbreiteten Missbrauchs ist dies für nicht-visuelle Browser nicht hilfreich.

marginheight Veraltet

Die Menge an Platz in Pixeln zwischen dem Inhalt des Frames und ihren oberen und unteren Rändern.

marginwidth Veraltet

Die Menge an Platz in Pixeln zwischen dem Inhalt des Frames und ihren linken und rechten Rändern.

scrolling Veraltet

Gibt an, wenn der Browser für den Frame eine Bildlaufleiste bereitstellen soll:

auto

Nur wenn die Inhalte des Frames größer sind als ihre Abmessungen.

yes

Immer eine Bildlaufleiste anzeigen.

no

Niemals eine Bildlaufleiste anzeigen.

Skripting

Inline-Frames, wie <frame>-Elemente, sind im window.frames Pseudo-Array enthalten.

Mit dem DOM HTMLIFrameElement-Objekt können Skripte auf das window-Objekt der eingezogenen Ressource über die contentWindow-Eigenschaft zugreifen. Die contentDocument-Eigenschaft bezieht sich auf das Dokument innerhalb des <iframe>, genau wie contentWindow.document.

Aus dem Inneren eines Frames kann ein Skript eine Referenz auf sein Elternfenster mit window.parent erhalten.

Der Skriptzugang zu den Inhalten eines Frames unterliegt der Same-Origin-Policy. Skripte können die meisten Eigenschaften anderer window-Objekte nicht zugreifen, wenn das Skript aus einem anderen Ursprung geladen wurde, einschließlich Skripte innerhalb eines Frames, die auf das Elternfenster zugreifen. Ursprungsübergreifende Kommunikation kann mit Window.postMessage() erreicht werden.

Top-Navigation in ursprungsübergreifenden Frames

Skripte, die in einem gleichen Ursprungs-Frame ausgeführt werden, können auf die Window.top zugreifen und window.top.location einstellen, um die oberste Ebene der Seite an einen neuen Ort umzuleiten. Dieses Verhalten wird als "Top-Navigation" bezeichnet.

Ein Ursprungsübergreifender Frame darf die oberste Ebene der Seite nur dann umleiten, wenn der Frame sticky activation hat. Wenn die Top-Navigation blockiert wird, können Browser entweder um Benutzer die Erlaubnis bitten, um umzuleiten oder den Fehler in der Entwicklerkonsole melden (oder beides). Diese Einschränkung durch Browser wird als framebusting intervention bezeichnet. Das bedeutet, dass ein Ursprungsübergreifender Frame die oberste Ebene der Seite sofort umleiten darf — der Benutzer muss zuvor mit dem Frame interagiert haben oder die Erlaubnis haben zu umleiten.

Ein verankerter Frame blockiert jede Top-Navigation, es sei denn, die sandbox-Attributswerte sind auf allow-top-navigation oder allow-top-navigation-by-user-activation eingestellt. Beachten Sie, dass die Top-Navigator-Erlaubnisse vererbt werden, sodass ein verschachtelter Frame nur dann eine Top-Navigation ausführen kann, wenn seine Elternframes dies auch dürfen.

Positionierung und Skalierung

Als ersetztes Element ermöglicht das <iframe> die Position der eingebetteten Dokumente innerhalb seiner Box mittels der object-position Eigenschaft anzupassen.

Verhalten der error- und load-Ereignisse

Die error- und load-Ereignisse, die auf <iframe>s ausgelöst werden können, wurden verwendet, um den URL-Raum der HTTP-Server im lokalen Netzwerk zu erkunden. Daher lösen Benutzeragenten aus Sicherheitsgründen das error-Ereignis auf <iframe>s nicht aus, und das load-Ereignis wird immer ausgelöst, selbst wenn das <iframe>-Inhalt nicht geladen werden konnte.

Barrierefreiheit

Personen, die mit unterstützender Technologie, wie z.B. einem Screenreader navigieren, können das title-Attribut auf einem <iframe> verwenden, um dessen Inhalte zu beschreiben. Der Wert des Titels sollte den eingebetteten Inhalt prägnant beschreiben:

<iframe
  title="Wikipedia page for Avocados"
  src="https://en.wikipedia.org/wiki/Avocado"></iframe>

Ohne diesen Titel müssen sie in das <iframe> navigieren, um zu bestimmen, was eingebettete Inhalte sind. Diese Kontextverschiebung kann verwirrend und zeitaufwändig sein, insbesondere bei Seiten mit mehreren <iframe>s und/oder wenn die eingebetteten Inhalte interaktive Inhalte wie Video oder Audio enthalten.

Beispiele

Ein einfaches <iframe>

Dieses Beispiel bettet die Seite unter https://example.org in einem iframe ein. Dies ist ein häufiger Anwendungsfall von iframes: Inhalte von einer anderen Seite einbetten. Zum Beispiel ist das Live-Beispiel selbst und das probieren Sie es aus-Beispiel oben, beide <iframe>-Einbettungen von Inhalten von einer anderen MDN-Seite.

HTML

<iframe
  src="https://example.org"
  title="iframe Example 1"
  width="400"
  height="300">
</iframe>

Ergebnis

Einbettung von Quellcode in einem <iframe>

Dieses Beispiel rendert den Quellcode direkt in einem iframe. Dies kann als Technik verwendet werden, um Skripteinspeisungen zu verhindern, wenn Sie von Benutzern generierte Inhalte anzeigen und mit dem sandbox-Attribut kombiniert werden.

Beachten Sie, dass beim Verwenden von srcdoc alle relativen URLs im eingebetteten Inhalt relativ zur URL der einbettenden Seite aufgelöst werden. Wenn Sie Ankerlinks verwenden möchten, die auf Stellen im eingebetteten Inhalt verweisen, müssen Sie about:srcdoc explizit als Basiskatalog angeben.

HTML

<article>
  <footer>Nine minutes ago, <i>jc</i> wrote:</footer>
  <iframe
    sandbox
    srcdoc="<p>There are two ways to use the <code>iframe</code> element:</p>
<ol>
<li><a href=&quot;about:srcdoc#embed_another&quot;>To embed content from another page</a></li>
<li><a href=&quot;about:srcdoc#embed_user&quot;>To embed user-generated content</a></li>
</ol>
<h2 id=&quot;embed_another&quot;>Embedding content from another page</h2>
<p>Use the <code>src</code> attribute to specify the URL of the page to embed:</p>
<pre><code>&amp;lt;iframe src=&quot;https://example.org&quot;&amp;gt;&amp;lt;/iframe&amp;gt;</code></pre>
<h2 id=&quot;embed_user&quot;>Embedding user-generated content</h2>
<p>Use the <code>srcdoc</code> attribute to specify the content to embed. This post is already an example!</p>
"
    width="500"
    height="250"
></iframe>
</article>

So schreiben Sie Escape-Sequenzen bei Verwendung von srcdoc:

• Zuerst schreiben Sie das HTML auf, indem Sie alles entkommen, was Sie in einem normalen HTML-Dokument entkommen würden (wie <, >, &, etc.).
• < und < repräsentieren dasselbe Zeichen im srcdoc-Attribut. Um es also tatsächlich als Escape-Sequenz im HTML-Dokument zu machen, ersetzen Sie jedes "&" (&) mit &. Zum Beispiel wird < zu <, und & wird zu &.
• Ersetzen Sie eventuell doppelte Anführungszeichen (") mit ", um zu verhindern, dass das srcdoc-Attribut vorzeitig geschlossen wird (wenn Sie ' anstelle verwenden, sollten Sie ' mit ' ersetzen). Dieser Schritt erfolgt nach dem vorherigen, sodass ", das in diesem Schritt erzeugt wurde, nicht zu " wird.

Ergebnis

Technische Zusammenfassung

Spezifikationen

Browser-Kompatibilität

Siehe auch

• CSP: frame-ancestors
• Datenschutz, Berechtigungen und Informationssicherheit