<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 ermöglicht URL-Navigationen. Die Navigationen jedes eingebetteten Browsing-Kontextes werden in die Sitzungsverlauf des obersten Browsing-Kontextes linearisiert. Der Browsing-Kontext, der die anderen einbettet, wird der übergeordnete Browsing-Kontext genannt. Der oberste Browsing-Kontext — der ohne Übergeordneten — ist normalerweise das Browserfenster, das durch das Window-Objekt repräsentiert wird.

Attribute

Dieses Element enthält die globalen Attribute.

allow

Gibt eine Berechtigungsrichtlinie für das <iframe> an. Die Richtlinie definiert, welche Funktionen für das <iframe> verfügbar sind (zum Beispiel Zugriff auf Mikrofon, Kamera, Batterie, Web-Share usw.) basierend auf dem Ursprung der Anfrage.

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

Hinweis: Eine durch das allow-Attribut spezifizierte Berechtigungsrichtlinie stellt eine weitere Einschränkung zusätzlich zu der im Permissions-Policy-Header spezifizierten Richtlinie dar. Sie ersetzt sie nicht.

allowfullscreen

Auf true gesetzt, wenn das <iframe> den Vollbildmodus aktivieren kann, indem die Methode requestFullscreen() aufgerufen wird.

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

allowpaymentrequest Veraltet Nicht standardisiert

Auf true gesetzt, wenn ein cross-origin <iframe> in der Lage sein sollte, die Payment Request API aufzurufen.

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

browsingtopics Nicht standardisiert Veraltet

Ein Boolean-Attribut, das, falls vorhanden, angibt, dass die ausgewählten Themen für den aktuellen Benutzer mit der Anfrage für die Quelle des <iframe> gesendet werden sollten. Weitere Details finden Sie unter Verwendung der Topics API.

credentialless Experimentell

Auf true gesetzt, um das <iframe> ohne Anmeldeinformationen zu machen, was bedeutet, dass sein Inhalt in einem neuen, temporären Kontext geladen wird. Es hat keinen Zugriff auf das Netzwerk, Cookies und Speicherungsdaten, die mit seinem Ursprung verbunden sind. Es verwendet einen neuen Kontext, der lokal zur Lebensdauer des obersten Dokuments ist. Im Gegenzug können die Cross-Origin-Embedder-Policy (COEP) Einbettungsregeln aufgehoben werden, so dass Dokumente mit gesetztem COEP Drittanbieterdokumente einbetten können, die dies nicht tun. Weitere Details finden Sie unter IFrame credentialless.

csp Experimentell

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

height

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

loading

Gibt an, wann der Browser das iframe laden soll:

eager

Ladet das iframe sofort beim Laden der Seite (dies ist der Standardwert).

lazy

Verzögert das Laden des iframe, bis es eine berechnete Entfernung vom visuellen Viewport erreicht hat, wie vom Browser definiert. Die Absicht ist, das Netzwerk und die Speicherkapazität, die zum Abrufen des Rahmens erforderlich sind, nicht zu nutzen, bis der Browser vernünftigerweise sicher ist, dass es benötigt wird. Dies verbessert die Leistung und die Kosten in den meisten typischen Anwendungsfällen, insbesondere durch Reduzierung der anfänglichen Ladezeiten.

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

name

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

privateToken Experimentell

Enthält eine string-Darstellung eines Optionsobjekts, das einen Private State Token-Vorgang repräsentiert; dieses Objekt hat die gleiche Struktur wie die RequestInit-Wörterbuchs privateToken-Eigenschaft. IFrames, die dieses Attribut enthalten, können Vorgänge wie das Ausgeben oder Einlösen von Token initiieren, wenn ihr eingebetteter Inhalt geladen ist.

referrerpolicy

Gibt an, welcher 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 Ursprungs 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 im gleichen Ursprung enthalten weiterhin den Pfad.

same-origin

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

strict-origin

Nur den Ursprung des Dokuments als Referrer senden, wenn das Protokollsicherheitsniveau gleich bleibt (HTTPS→HTTPS), aber nicht an ein weniger sicheres Ziel senden (HTTPS→HTTP).

strict-origin-when-cross-origin (standardmäßig)

Eine vollständige URL beim Ausführen einer gleichartigen Ursprungsanfrage senden, nur den Ursprung senden, wenn das Protokollsicherheitsniveau gleich bleibt (HTTPS→HTTPS), und keinen Header an ein weniger sicheres Ziel senden (HTTPS→HTTP).

unsafe-url

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

sandbox

Steuert die Einschränkungen, die auf den in das <iframe> eingebetteten Inhalt angewendet werden. Der Wert des Attributs kann entweder leer sein, um alle Einschränkungen zu aktivieren, oder durch Leerzeichen getrennte 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 JS-Code es ohne Benutzerinteraktion initiiert hat.

allow-forms

Erlaubt der Seite das Absenden von Formularen. Wenn dieses Schlüsselwort nicht verwendet wird, wird ein Formular normal angezeigt, aber das Absenden löst keine Eingabeüberprüfung aus, sendet keine Daten an einen Webserver oder schließt einen Dialog.

allow-modals

Erlaubt der Seite, modale Fenster zu öffnen, zum Beispiel 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 ermöglicht der Seite auch, das BeforeUnloadEvent Ereignis zu empfangen.

allow-orientation-lock

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

allow-pointer-lock

Erlaubt der Seite, die Pointer Lock API zu verwenden.

allow-popups

Erlaubt Popupfenster (erstellt zum Beispiel 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 es einem sandbekten Dokument, einen neuen Browsing-Kontext zu öffnen, ohne dass die Sandbox-Flags darauf angewendet werden. Dies ermöglicht zum Beispiel, dass eine Drittanbieter-Werbung sicher in einem Sandkasten eingebettet wird, ohne dass die gleichen Einschränkungen auf die Seite angewendet werden, auf die die Werbung verlinkt ist. Wenn dieses Flag nicht enthalten ist, wird eine umgeleitete Seite, ein Popup-Fenster oder ein neuer Tab denselben Sandbox-Einschränkungen wie das ursprüngliche <iframe> unterliegen.

allow-presentation

Erlaubt es den Embeddern, die Kontrolle darüber zu haben, 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 stets die gleichartige Ursprungsrichtlinie fehlschlägt (möglicherweise wird der Zugriff auf Datenstorage/Cookies und einige JavaScript-APIs verhindert).

Hinweis: Wenn allow-same-origin vorhanden ist, kann ein gleichartiges übergeordnetes Dokument immer noch auf das DOM des iframes zugreifen und damit interagieren, selbst wenn allow-scripts nicht gesetzt ist. Das allow-scripts-Token kontrolliert nur die Skriptausführung innerhalb des eingebetteten Browsing-Kontextes und beeinflusst nicht den DOM-Zugriff vom übergeordneten Dokument.

allow-scripts

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

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

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

allow-top-navigation

Ermöglicht es der Ressource, den obersten Browsing-Kontext (den, der _top genannt wird) zu navigieren.

allow-top-navigation-by-user-activation

Ermöglicht es der Ressource, den obersten Browsing-Kontext zu navigieren, jedoch nur, wenn es durch eine Benutzeraktion initiiert wird.

allow-top-navigation-to-custom-protocols

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

Hinweis:

• Wenn das eingebettete Dokument denselben Ursprung wie die Einbettungsseite hat, wird es stark 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 das sandbox-Attribut gar nicht zu verwenden.
• Sandboxing ist nutzlos, wenn der Angreifer Inhalte außerhalb eines gesandbakten <iframe> darstellen kann — wie wenn der Betrachter den Rahmen in einem neuen Tab öffnet. Solche Inhalte sollten ebenfalls von einem separaten Ursprung bedient werden, um potenziellen Schaden zu begrenzen.

Hinweis: Beim Weiterleiten der Benutzer, Öffnen eines Popup-Fensters oder Öffnen eines neuen Tabs aus einer eingebetteten Seite innerhalb eines <iframe> mit dem sandbox-Attribut unterliegt der neue Browsing-Kontext den gleichen sandbox-Einschränkungen. Dies kann zu Problemen führen — zum Beispiel, wenn eine Seite, die in einem <iframe> ohne gesetztes sandbox="allow-forms" oder sandbox="allow-popups-to-escape-sandbox"-Attribut eingebettet ist, eine neue Site in einem separaten Tab öffnet, wird die Formularübermittlung 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 der gleichartigen Ursprungsrichtlinie entspricht. Beachten Sie auch, dass das programmgesteuerte Entfernen eines <iframe>-src-Attributs (z. B. über Element.removeAttribute()) in Firefox (ab Version 65), auf Chromium-basierten Browsern und Safari/iOS dazu führt, dass about:blank im Rahmen geladen wird.

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

srcdoc

Inline-HTML, das eingebettet wird und das src-Attribut überschreibt. Sein Inhalt sollte der Syntax eines vollständigen HTML-Dokuments folgen, zu dem die Doctype-Direktive, <html>, <body>-Tags, usw. gehören, obwohl die meisten davon ausgelassen werden können, sodass nur der Body-Inhalt übrig bleibt. Dieses Dokument hat about:srcdoc als seinen Standort. Wenn ein Browser das srcdoc-Attribut nicht unterstützt, wird auf die URL im src-Attribut zurückgegriffen.

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

width

Die Breite des Rahmens 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 bestehenden Inhalten zu entfernen.

align Veraltet

Die Ausrichtung dieses Elements in Bezug auf den umgebenden Kontext.

frameborder Veraltet

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

longdesc Veraltet

Eine URL einer langen Beschreibung des Rahmensinhalts. Aufgrund weitverbreiteter Fehlanwendung 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 Grenzen.

marginwidth Veraltet

Der Abstand in Pixeln zwischen dem Inhalt des Rahmens und seinen linken und rechten Grenzen.

scrolling Veraltet

Gibt an, wann der Browser eine Scrollleiste für den Rahmen bereitstellen soll:

auto

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

yes

Immer eine Scrollleiste anzeigen.

no

Niemals eine Scrollleiste anzeigen.

Scripting

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

Mit dem DOM-Objekt HTMLIFrameElement 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>, genauso wie contentWindow.document.

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

Der Skriptzugriff auf den Inhalt eines Rahmens unterliegt der gleichartigen Ursprungsrichtlinie. Skripte können nicht auf die meisten Eigenschaften in anderen window-Objekten zugreifen, wenn das Skript von einem anderen Ursprung geladen wurde, einschließlich von Skripten innerhalb eines Rahmens, die auf das übergeordnete Rahmen zugreifen. Cross-Origin-Kommunikation kann durch die Verwendung der Methode Window.postMessage() erreicht werden.

Top-Navigation in Cross-Origin-Frames

Skripte, die in einem gleichartigen Rahmen ausgeführt werden, können auf die Window.top Eigenschaft zugreifen und window.top.location setzen, um die oberste Seite auf eine neue Position umzuleiten. Dieses Verhalten wird als "Top-Navigation" bezeichnet.

Ein Cross-Origin-Frame kann die oberste Seite nur mit top umleiten, wenn der Rahmen sticky activation hat. Wenn die oberen Navigation blockiert ist, zeigen die Browser möglicherweise entweder eine Benutzererlaubnis zum Umleiten an oder berichten den Fehler in der Entwicklerkonsole (oder beides). Diese Einschrä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 sandgekastetes Frame blockiert alle Top-Navigationen, es sei denn, die Werte des sandbox-Attributs sind auf allow-top-navigation oder allow-top-navigation-by-user-activation gesetzt. Beachten Sie, dass Top-Navigationsberechtigungen vererbt werden, sodass ein verschachtelter Rahmen nur dann eine Top-Navigation durchführen kann, wenn auch seine übergeordneten Frames dazu berechtigt sind.

Positionierung und Skalierung

Als ersetze Element ermöglicht es das <iframe>, die Position des eingebetteten Dokuments innerhalb seines Rahmens mit der object-position-Eigenschaft anzupassen.

error und load Ereignisverhalten

Die error und load Ereignisse, die auf <iframe>s ausgelöst werden könnten, könnten verwendet werden, um die URL-Space-Explorer eines lokalen Netzwerks zu prüfen. Aus Sicherheitsgründen lösen Benutzeragenten daher nicht das error Ereignis auf <iframe>s aus, und das load Ereignis wird immer ausgelöst, auch wenn der <iframe>-Inhalt nicht geladen wird.

Barrierefreiheit

Personen, die mit Hilfstechnologie wie einem Screenreader navigieren, können das title Attribut eines <iframe> verwenden, um dessen Inhalt zu beschriften. Der Wert des Titels sollte den eingebetteten Inhalt kurz und bündig beschreiben:

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

Ohne diesen Titel müssen sie in das <iframe> hinein navigieren, um festzustellen, was sein eingebetteter Inhalt ist. Dieser Kontextwechsel kann verwirrend und zeitraubend sein, insbesondere auf Seiten mit mehreren <iframe>s und/oder wenn Einbettungen interaktive Inhalte wie Video oder Audio enthalten.

Beispiele

Ein grundlegendes <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 einzubetten. Zum Beispiel sind das Live-Beispiel selbst und das try it-Beispiel oben beides <iframe>-Einbettungen von Inhalten von einer anderen MDN-Website.

HTML

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

Ergebnis

Quellcode in einem <iframe> einbetten

In diesem Beispiel wird Quellcode direkt in einem iframe gerendert. Dies kann als Technik verwendet werden, um Skriptinjektionen zu verhindern, wenn Benutzergenerierte Inhalte angezeigt werden, in Kombination mit dem sandbox-Attribut.

Beachten Sie, dass bei der Verwendung 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 zeigen, müssen Sie ausdrücklich about:srcdoc als Basis-URL 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 Sie Escape-Sequenzen bei der Verwendung von srcdoc schreiben:

• Schreiben Sie zuerst das HTML heraus, wobei Sie alles maskieren, was Sie in einem normalen HTML-Dokument maskieren würden (wie <, >, & usw.).
• < und < repräsentieren dasselbe Zeichen im srcdoc-Attribut. Um es zu einer tatsächlichen Escape-Sequenz im HTML-Dokument zu machen, ersetzen Sie alle kaufmännischen Unds (&) durch &. Zum Beispiel wird aus < <, und & wird &.
• Ersetzen Sie alle Anführungszeichen (") durch ", um zu verhindern, dass das srcdoc-Attribut vorzeitig beendet wird (wenn Sie stattdessen ' verwenden, sollten Sie ' durch ' ersetzen). Dieser Schritt erfolgt nach dem vorherigen, sodass ", das in diesem Schritt erzeugt wird, nicht " wird.

Ergebnis

Technische Zusammenfassung

Spezifikationen

Browser-Kompatibilität

Siehe auch

• CSP: frame-ancestors
• Privacy, permissions, and information security