<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-Kontexts werden in die Sitzungshistorie des obersten Browsing-Kontexts linearisiert. Der Browsing-Kontext, der die anderen einbettet, wird als Eltern-Browsing-Kontext bezeichnet. Der oberste Browsing-Kontext — derjenige ohne Eltern — ist normalerweise das Browserfenster, repräsentiert durch das Window-Objekt.

Attribute

Dieses Element enthält die globalen Attribute.

allow

Spezifiziert eine Berechtigungsrichtlinie für das <iframe>. Die Richtlinie definiert, welche Funktionen dem <iframe> zur Verfügung stehen (zum Beispiel Zugriff auf Mikrofon, Kamera, Batterie, Web-Sharing, etc.) basierend auf dem Ursprung der Anfrage.

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

Hinweis: Eine per allow-Attribut spezifizierte Berechtigungsrichtlinie stellt eine weitere Einschränkung zusätzlich zur im Permissions-Policy-Header spezifizierten Richtlinie dar. Sie ersetzt diese nicht.

allowfullscreen

Wird auf true gesetzt, wenn das <iframe> den Vollbildmodus durch Aufrufen der requestFullscreen()-Methode aktivieren kann.

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

allowpaymentrequest Veraltet Nicht standardisiert

Wird auf true gesetzt, wenn ein Corpüstebenen <iframe> erlauben sollte, die Payment Request API aufzurufen.

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

browsingtopics Experimentell Nicht standardisiert

Ein boolesches Attribut, das, falls vorhanden, angibt, dass die ausgewählten Themen für den aktuellen Benutzer mit der Anfrage für die Quelle des <iframe>s gesendet werden sollten. Siehe Using the Topics API für weitere Details.

credentialless Experimentell

Wird auf true gesetzt, um das <iframe> credentialless zu machen, was bedeutet, dass sein Inhalt in einem neuen, flüchtigen Kontext geladen wird. Es hat keinen Zugriff auf das Netzwerk, Cookies und Speicherdaten, die mit seinem Ursprung verbunden sind. Es verwendet einen neuen Kontext, der auf die Lebensdauer des obersten Dokuments beschränkt ist. Im Gegenzug können die Einbettungsregeln des Cross-Origin-Embedder-Policy (COEP) gelockert werden, sodass Dokumente mit gesetztem COEP Dokumente Dritter einbetten können, die dies nicht tun. Siehe IFrame credentialless für weitere Details.

csp Experimentell

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

height

Die Höhe des Rahmens in CSS-Pixeln. Standard ist 150.

loading

Gibt an, wann der Browser das iframe laden soll:

eager

Lade das iframe sofort beim Seitenladen (dies ist der Standardwert).

lazy

Verzögere das Laden des iframes, bis es eine berechnete Entfernung vom visuellen Viewport erreicht, wie es der Browser definiert. Der Zweck ist, den erforderlichen Netzwerk- und Speicher-Bandbreitebedarf zum Abrufen des Rahmens zu vermeiden, bis der Browser relativ sicher ist, dass es benötigt wird. Dies verbessert die Leistung und die Kosten in den meisten typischen Anwendungsfällen, insbesondere durch die Reduzierung der anfänglichen Ladezeiten der Seite.

Hinweis: Das Laden wird nur dann verzögert, wenn JavaScript aktiviert ist. Dies ist eine Maßnahme gegen Tracking.

name

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

referrerpolicy

Gibt an, welche referrer gesendet werden soll, wenn die Ressource des Rahmens abgerufen wird:

no-referrer

Der Referer Header wird nicht gesendet.

no-referrer-when-downgrade

Der Referer Header wird nicht an Ursprünge ohne TLS (HTTPS) gesendet.

origin

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

origin-when-cross-origin

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

same-origin

Ein Referrer wird für gleichens Ursprungs gesendet, aber Cross-Origin-Anfragen enthalten keine Referrer-Informationen.

strict-origin

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

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

Senden Sie eine vollständige URL bei einer Anfrage am 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 Benutzernamen). Dieser Wert ist unsicher, da er Ursprünge und Pfade von TLS-geschützten Ressourcen an unsichere Ursprünge leakt.

sandbox

Kontrolliert die Einschränkungen, die auf den eingebetteten Inhalt im <iframe> angewendet werden. Der Wert des Attributs kann entweder leer sein, um alle Einschränkungen anzuwenden, oder space-separated Tokens, um bestimmte Einschränkungen aufzuheben:

allow-downloads

Erlaubt das Herunterladen von Dateien über ein <a> oder <area> Element mit dem download-Attribut, sowie durch die Navigation, die zu einem Download einer Datei führt. Dies funktioniert unabhängig davon, ob der Benutzer auf den Link geklickt hat oder der JavaScript-Code ihn ohne Benutzerinteraktion initiiert hat.

allow-forms

Erlaubt der Seite, Formulare abzusenden. Wenn dieses Schlüsselwort nicht verwendet wird, wird ein Formular wie gewohnt angezeigt, aber das Absenden wird keine Eingabevalidierung auslösen, Daten an einen Webserver senden oder einen Dialog schließen.

allow-modals

Erlaubt der Seite das Öffnen von Modal-Fenstern durch Window.alert(), Window.confirm(), Window.print() und Window.prompt(), während das Öffnen eines <dialog> unabhängig von diesem Schlüsselwort erlaubt ist. Es erlaubt auch der Seite, das BeforeUnloadEvent-Ereignis zu empfangen.

allow-orientation-lock

Erlaubt der Ressource die Bildschirmorientierung zu sperren.

allow-pointer-lock

Erlaubt der Seite, die Pointer Lock API zu verwenden.

allow-popups

Erlaubt Pop-ups (erstellt zum Beispiel durch Window.open() oder target="_blank"). Wenn dieses Schlüsselwort nicht verwendet wird, wird eine solche Funktionalität stillschweigend fehlschlagen.

allow-popups-to-escape-sandbox

Erlaubt einem in der Sandbox befindlichen Dokument, einen neuen Browsing-Kontext zu öffnen, ohne die Sandboxing-Flags darauf zu erzwingen. Dies wird zum Beispiel ein Drittanbieter-Werbeelement sicher in einer Sandbox platzieren, ohne die gleichen Einschränkungen auf die Seite zu erzwingen, zu der die Anzeige verlinkt ist. Wenn dieses Flag nicht enthalten ist, unterliegt eine umgeleitete Seite, ein Popup-Fenster oder ein neuer Tab den gleichen Sandbox-Einschränkungen wie das Ursprungs-<iframe>.

allow-presentation

Erlaubt Einbettungen zu entscheiden, ob ein <iframe> eine Präsentationssitzung starten kann.

allow-same-origin

Wenn dieses Token nicht verwendet wird, wird die Ressource als von einem speziellen Ursprung behandelt, der immer die gleiche Ursprungsrichtlinie (potenziell verhindernder Zugang zu Datenspeicherung/Cookies und einigen JavaScript-APIs) verletzt.

allow-scripts

Erlaubt der Seite, Skripte auszuführen (aber keine Pop-up-Fenster zu erstellen). Wenn dieses Schlüsselwort nicht verwendet wird, ist diese Operation nicht erlaubt.

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

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

allow-top-navigation

Erlaubt der Ressource die Navigation des obersten Browsing-Kontexts (derjenige, der _top genannt wird).

allow-top-navigation-by-user-activation

Erlaubt der Ressource die Navigation des obersten Browsing-Kontexts, aber nur, wenn dies durch eine Benutzerhandlung initiiert wird.

allow-top-navigation-to-custom-protocols

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

Hinweis:

• Wenn das eingebettete Dokument denselben Ursprung wie die einbettende Seite hat, wird es dringend abgeraten, sowohl allow-scripts als auch allow-same-origin zu verwenden, da dies dem eingebetteten Dokument ermöglicht, das sandbox-Attribut zu entfernen — was es nicht sicherer macht als wenn das sandbox-Attribut überhaupt nicht verwendet würde.
• Eine Sandbox ist nutzlos, wenn der Angreifer Inhalte außerhalb eines sandboxed iframe anzeigen kann — wie wenn der Betrachter das Frame in einem neuen Tab öffnet. Solche Inhalte sollten auch von einem separaten Ursprung bereitgestellt werden, um potenziellen Schaden zu begrenzen.

Hinweis: Bei der Weiterleitung des Benutzers, dem Öffnen eines Popup-Fensters oder dem Ö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 innerhalb eines <iframe> ohne ein auf ihr gesetztes sandbox="allow-forms" oder sandbox="allow-popups-to-escape-sandbox" Attribut eingebettet ist, eine neue Seite in einem separaten Tab öffnet, wird das Absenden eines Formulars in diesem neuen Browsing-Kontext stillschweigend fehlschlagen.

src

Die URL der einzubettenden Seite. Verwenden Sie einen Wert von about:blank, um eine leere Seite einzubetten, die die same-origin-policy einhält. Beachten Sie auch, dass das programmgesteuerte Entfernen eines <iframe>'s src-Attributes (z.B. über Element.removeAttribute()) verursacht, dass about:blank im Frame in Firefox (ab Version 65), auf Chromium-basierten Browsern und Safari/iOS geladen wird.

Hinweis: Die about:blank-Seite verwendet die URL des einbettenden Dokuments als Basis-URL, wenn irgendwelche relativen URLs, wie Ankerlinks, aufgelöst werden.

srcdoc

Inline-HTML zum Einbetten, das das src-Attribut überschreibt. Sein Inhalt sollte der Syntax eines vollständigen HTML-Dokuments folgen, das die Doctype-Direktive, <html>, <body>-Tags, etc. enthält, obwohl die meisten davon weggelassen werden können, sodass nur der Body-Inhalt verbleibt. Dieses Dokument wird about:srcdoc als seinen Speicherort haben. Wenn ein Browser das srcdoc-Attribut nicht unterstützt, fällt es auf die URL im src-Attribut zurück.

Hinweis: Die about:srcdoc-Seite verwendet die URL des einbettenden Dokuments als Basis-URL, wenn irgendwelche relativen URLs, wie Ankerlinks, aufgelöst werden.

width

Die Breite des Rahmens in CSS-Pixeln. Standard ist 300.

Veraltete Attribute

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

align Veraltet

Die Ausrichtung dieses Elements in Bezug auf den umgebenden Kontext.

frameborder Veraltet

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

longdesc Veraltet

Eine URL einer langen Beschreibung des Inhalts des Rahmens. Aufgrund weitverbreiteten Missbrauchs ist dies für nicht-visuelle Browser nicht hilfreich.

marginheight Veraltet

Der Abstand in Pixeln zwischen dem Inhalt des Rahmens und seinen oberen und unteren Rändern.

marginwidth Veraltet

Der Abstand in Pixeln zwischen dem Inhalt des Rahmens und seinen linken und rechten Rändern.

scrolling Veraltet

Gibt an, wann der Browser eine Scrollbar für das Frame bereitstellen soll:

auto

Nur dann, wenn der Inhalt des Rahmens größer als seine Abmessungen ist.

yes

Immer eine Scrollbar anzeigen.

no

Nie eine Scrollbar anzeigen.

Scripting

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 gerahmten Ressource über die contentWindow-Eigenschaft zugreifen. Die contentDocument-Eigenschaft bezieht sich auf das document innerhalb des <iframe>, gleich wie contentWindow.document.

Von innerhalb eines Rahmens kann ein Skript eine Referenz auf sein Elternfenster mit window.parent erhalten.

Skriptzugriff auf den Inhalt eines Rahmens unterliegt der same-origin-policy. Skripte können auf die meisten Eigenschaften in anderen window-Objekten nicht zugreifen, wenn das Skript von einem anderen Ursprung geladen wurde, einschließlich Skripte innerhalb eines Rahmens, die auf den Elternrahmen zugreifen. Eine cross-origin-Kommunikation kann mit Window.postMessage() erreicht werden.

Top-Navigation in cross-origin-Frames

Skripte, die in einem gleichen Ursprungsrahmen ausgeführt werden, können auf die Window.top-Eigenschaft zugreifen und window.top.location festlegen, um die oberste Seite zu einer neuen Location umzuleiten. Dieses Verhalten wird als "Top-Navigation" bezeichnet.

Ein cross-origin-Frame darf die oberste Seite nur dann mit top umleiten, wenn der Frame sticky activation hat. Wenn die Top-Navigation blockiert ist, können Browser entweder um die Erlaubnis des Benutzers bitten, umzuleiten, oder den Fehler in der Entwicklerkonsole melden (oder beides). Diese Beschränkung durch Browser wird als framebusting intervention bezeichnet. Das bedeutet, dass ein cross-origin-Frame die oberste Seite nicht sofort umleiten kann — der Benutzer muss zuvor mit dem Frame interagiert haben oder die Erlaubnis zur Umleitung erteilt haben.

Ein sandboxed-Frame blockiert alle Top-Navigation, es sei denn, die sandbox-Attributwerte sind auf allow-top-navigation oder allow-top-navigation-by-user-activation gesetzt. Beachten Sie, dass Top-Navigationsberechtigungen vererbt werden, sodass ein verschachtelter Frame nur dann eine Top-Navigation durchführen kann, wenn seine Eltern-Frames dies ebenfalls erlauben.

Positionierung und Skalierung

Als ein erstattetes Element erlaubt das <iframe> die Position des eingebetteten Dokuments innerhalb seines Kastens mit der object-position-Eigenschaft anzupassen.

error und load Ereignisverhalten

Die error- und load-Ereignisse, die auf <iframe>s ausgelöst werden, könnten verwendet werden, um den URL-Bereich der HTTP-Server des lokalen Netzwerks zu erkunden. Daher lösen Benutzeragenten aus Sicherheitsgründen das Fehler-Ereignis auf <iframe>s nicht aus, und das Laden-Ereignis wird immer ausgelöst, selbst wenn der <iframe>-Inhalt aufgrund eines Fehlers geladen wurde.

Barrierefreiheit

Personen, die mit Hilfstechnologie wie einem Screenreader navigieren, können das title Attribute auf einem <iframe> verwenden, um dessen Inhalt zu beschriften. Der Wert des Titels sollte den eingebetteten Inhalt kurz 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 sein eingebetteter Inhalt ist. Dieser Kontextwechsel kann verwirrend und zeitraubend sein, insbesondere bei Seiten mit mehreren <iframe>s und/oder wenn Einbettungen interaktiven Inhalt 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 für iframes: um Inhalte von einer anderen Seite einzubetten. Zum Beispiel sind das Live-Beispiel selbst und das Probiere es aus Beispiel oben beides <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

Einbetten von Quellcode in ein <iframe>

Dieses Beispiel rendert Quellcode direkt in einem iframe. Dies kann als Technik verwendet werden, um Skripteinfügeangriffe zu verhindern, wenn es mit dem sandbox-Attribut kombiniert wird.

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 als Basis-URL explizit 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>

Hier erfahren Sie, wie Fluchtsequenzen bei der Verwendung von srcdoc geschrieben werden:

• Zuerst schreiben Sie das HTML aus, indem Sie alles, was Sie in einem normalen HTML-Dokument entkommen würden (wie <, >, &, etc.), maskieren.
• < und < stellen im srcdoc-Attribut dasselbe Zeichen dar. Daher, um es zur tatsächlichen Escape-Sequenz im HTML-Dokument zu machen, ersetzen Sie alle Et-Zeichen (&) mit &. Zum Beispiel wird < zu <, und & wird zu &.
• Ersetzen Sie doppelte Anführungszeichen (") mit ", um zu verhindern, dass das srcdoc-Attribut vorzeitig beendet wird (wenn Sie ' stattdessen verwenden, sollten Sie ' mit ' ersetzen). Dieser Schritt erfolgt nach dem vorherigen, sodass ", das in diesem Schritt generiert wird, nicht zu " wird.

Ergebnis

Technische Zusammenfassung

Spezifikationen

Browser-Kompatibilität

Siehe auch

• CSP: frame-ancestors
• Privatsphäre, Berechtigungen und Informationssicherheit