Das<iframe>HTML-Element stellt einen verschachteltenBrowsing-Kontext dar und bettet eine andere HTML-Seite in die aktuelle Seite ein.

Probieren Sie es aus

<iframe   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 eigenesDokument und ermöglicht URL-Navigationen. Die Navigationen jedes eingebetteten Browsing-Kontextes werden in dieSitzungsverlauf desobersten Browsing-Kontextes linearisiert. Der Browsing-Kontext, der die anderen einbettet, wird derübergeordnete Browsing-Kontext genannt. Deroberste Browsing-Kontext — der ohne Übergeordneten — ist normalerweise das Browserfenster, das durch dasWindow-Objekt repräsentiert wird.

Attribute

Dieses Element enthält dieglobalen Attribute.

allow

Gibt eineBerechtigungsrichtlinie 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.

Sieheiframes im ThemaPermissions-Policy für Beispiele.

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

allowfullscreen

Auftrue gesetzt, wenn das<iframe> den Vollbildmodus aktivieren kann, indem die MethoderequestFullscreen() aufgerufen wird.

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

allowpaymentrequestVeraltetNicht standardisiert

Auftrue gesetzt, wenn ein cross-origin<iframe> in der Lage sein sollte, diePayment Request API aufzurufen.

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

browsingtopicsNicht standardisiertVeraltet

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 unterVerwendung der Topics API.

credentiallessExperimentell

Auftrue 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 dieCross-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 unterIFrame credentialless.

cspExperimentell

EineContent Security Policy, die für die eingebettete Ressource durchgesetzt wird. Details finden Sie unterHTMLIFrameElement.csp.

height

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

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 vomvisuellen 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 imtarget-Attribut der<a>,<form>, oder<base>-Elemente; demformtarget-Attribut der<input> oder<button>-Elemente; oder demwindowName-Parameter in derwindow.open()-Methode verwendet werden. Zusätzlich wird der Name zu einer Eigenschaft derWindow undDocument Objekte, die einen Verweis auf das eingebettete Fenster oder das Element selbst enthalten.

privateTokenExperimentell

Enthält eine string-Darstellung eines Optionsobjekts, das einenPrivate State Token-Vorgang repräsentiert; dieses Objekt hat die gleiche Struktur wie dieRequestInit-WörterbuchsprivateToken-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, welcherReferrer gesendet werden soll, wenn die Ressource des Rahmens abgerufen wird:

no-referrer

DerReferer-Header wird nicht gesendet.

no-referrer-when-downgrade

DerReferer-Header wird nicht anUrsprungs ohneTLS (HTTPS) gesendet.

origin

Der gesendete Referrer wird auf den Ursprung der verweisenden Seite beschränkt: seinSchema,Host, undPort.

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ürgleichartigen 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 Ursprungund den Pfad (aber nicht dasFragment,Passwort oderBenutzername).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 demDownload 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 durchWindow.alert(),Window.confirm(),Window.print() undWindow.prompt(), während das Öffnen eines<dialog> unabhängig von diesem Schlüsselwort erlaubt ist. Es ermöglicht der Seite auch, dasBeforeUnloadEvent Ereignis zu empfangen.

allow-orientation-lock

Ermöglicht es der Ressource, dieBildschirmorientierung zu sperren.

allow-pointer-lock

Erlaubt der Seite, diePointer Lock API zu verwenden.

allow-popups

Erlaubt Popupfenster (erstellt zum Beispiel durchWindow.open() odertarget="_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 einePräsentationssitzung starten kann.

allow-same-origin

Wenn dieses Token nicht verwendet wird, wird die Ressource als von einem speziellen Ursprung behandelt, der stets diegleichartige Ursprungsrichtlinie fehlschlägt (möglicherweise wird der Zugriff aufDatenstorage/Cookies und einige JavaScript-APIs verhindert).

Hinweis:Wennallow-same-origin vorhanden ist, kann ein gleichartiges übergeordnetes Dokument immer noch auf das DOM des iframes zugreifen und damit interagieren, selbst wennallow-scripts nicht gesetzt ist. Dasallow-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-activationExperimentell

Erlaubt ein Dokument, das im<iframe> geladen wird, dieStorage 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 nichthttp Protokollen, die im Browser integriert odervon einer Website registriert sind. Diese Funktion wird auch durch das Schlüsselwortallow-popups oderallow-top-navigation aktiviert.

Hinweis:

• Wenn das eingebettete Dokument denselben Ursprung wie die Einbettungsseite hat, wird esstark abgeraten, sowohlallow-scripts als auchallow-same-origin zu verwenden, da dies dem eingebetteten Dokument ermöglicht, dassandbox-Attribut zu entfernen — was es nicht sicherer macht als dassandbox-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 einemseparaten 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 demsandbox-Attribut unterliegt der neue Browsing-Kontext den gleichensandbox-Einschränkungen. Dies kann zu Problemen führen — zum Beispiel, wenn eine Seite, die in einem<iframe> ohne gesetztessandbox="allow-forms" odersandbox="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 vonabout:blank, um eine leere Seite einzubetten, die dergleichartigen Ursprungsrichtlinie entspricht. Beachten Sie auch, dass das programmgesteuerte Entfernen eines<iframe>-src-Attributs (z. B. überElement.removeAttribute()) in Firefox (ab Version 65), auf Chromium-basierten Browsern und Safari/iOS dazu führt, dassabout:blank im Rahmen geladen wird.

Hinweis:Die Seiteabout: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 dassrc-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 hatabout:srcdoc als seinen Standort. Wenn ein Browser dassrcdoc-Attribut nicht unterstützt, wird auf die URL imsrc-Attribut zurückgegriffen.

Hinweis:Dieabout: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 ist300.

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.

alignVeraltet

Die Ausrichtung dieses Elements in Bezug auf den umgebenden Kontext.

frameborderVeraltet

Der Wert1 (der Standard) zeichnet einen Rahmen um diesen Rahmen. Der Wert0 entfernt den Rahmen um diesen Rahmen, aber Sie sollten stattdessen die CSS-Eigenschaftborder verwenden, um<iframe>-Rahmen zu kontrollieren.

longdescVeraltet

Eine URL einer langen Beschreibung des Rahmensinhalts. Aufgrund weitverbreiteter Fehlanwendung ist dies für nicht-visuelle Browser nicht hilfreich.

marginheightVeraltet

Der Abstand in Pixeln zwischen dem Inhalt des Rahmens und seinen oberen und unteren Grenzen.

marginwidthVeraltet

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

scrollingVeraltet

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 imwindow.frames-Pseudo-Array enthalten.

Mit dem DOM-ObjektHTMLIFrameElement können Skripte auf daswindow-Objekt der gerahmten Ressource über diecontentWindow-Eigenschaft zugreifen. DiecontentDocument-Eigenschaft bezieht sich auf dasdocument innerhalb des<iframe>, genauso wiecontentWindow.document.

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

Der Skriptzugriff auf den Inhalt eines Rahmens unterliegt dergleichartigen Ursprungsrichtlinie.Skripte können nicht auf die meisten Eigenschaften in anderenwindow-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 MethodeWindow.postMessage() erreicht werden.

Top-Navigation in Cross-Origin-Frames

Skripte, die in einem gleichartigen Rahmen ausgeführt werden, können auf dieWindow.top Eigenschaft zugreifen undwindow.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 mittop umleiten, wenn der Rahmensticky 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 alsFramebusting-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 dessandbox-Attributs sind aufallow-top-navigation oderallow-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

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

error undload Ereignisverhalten

Dieerror undload 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 daserror Ereignis auf<iframe>s aus, und dasload Ereignis wird immer ausgelöst, auch wenn der<iframe>-Inhalt nicht geladen wird.

Barrierefreiheit

Personen, die mit Hilfstechnologie wie einem Screenreader navigieren, können dastitle 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 unterhttps://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 dastry 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 demsandbox-Attribut.

Beachten Sie, dass bei der Verwendung vonsrcdoc 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ücklichabout: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 vonsrcdoc 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 imsrcdoc-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 dassrcdoc-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