Das<iframe>HTML-Element repräsentiert einen eingebettetenBrowsing-Kontext und bettet eine weitere HTML-Seite in die aktuelle 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 alsEltern-Browsing-Kontext bezeichnet. Deroberste Browsing-Kontext — derjenige ohne Eltern — ist in der Regel 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 dem<iframe> zur Verfügung stehen (zum Beispiel Zugriff auf Mikrofon, Kamera, Batterie, Web-Sharing usw.) basierend auf dem Ursprung der Anfrage.

Sieheiframes im ThemaPermissions-Policy für Beispiele.

Hinweis:Eine durch dasallow-Attribut angegebene Berechtigungsrichtlinie setzt eine weitere Einschränkung über die imPermissions-Policy-Header angegebene Richtlinie hinaus. Sie ersetzt sie nicht.

allowfullscreen

Auftrue gesetzt, wenn das<iframe> den Vollbildmodus durch Aufruf derrequestFullscreen()-Methode aktivieren kann.

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

allowpaymentrequestVeraltetNicht standardisiert

Auftrue gesetzt, wenn einem cross-origin<iframe> erlaubt werden soll, diePayment Request API aufzurufen.

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

browsingtopicsExperimentellNicht standardisiert

Ein boolesches Attribut, das, falls vorhanden, angibt, dass die ausgewählten Themen des aktuellen Benutzers mit der Anfrage für die<iframe>-Quelle gesendet werden sollen. SieheVerwendung der Topics API für weitere Details.

credentiallessExperimentell

Auftrue gesetzt, um das<iframe> als credentialless zu machen, was bedeutet, dass sein Inhalt in einem neuen, flüchtigen Kontext geladen wird. Es hat keinen Zugriff auf Netzwerk-, Cookie- und Speicherndaten, die seinem Ursprung zugeordnet sind. Es nutzt einen neuen Kontext, der lokal zur Laufzeit des übergeordneten Dokuments ist. Im Gegenzug können dieCross-Origin-Embedder-Policy (COEP)-Einbettungsregeln aufgehoben werden, sodass Dokumente mit gesetztem COEP eingebettete Drittanbieter-Dokumente einbinden können, die dies nicht tun. SieheIFrame credentialless für mehr Details.

cspExperimentell

EineContent-Security-Policy, die für die eingebettete Ressource durchgesetzt wird. SieheHTMLIFrameElement.csp für Details.

height

Die Höhe des Frames in CSS-Pixeln. Standard ist150.

loading

Gibt an, wann der Browser das iframe laden soll:

eager

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

lazy

Verzögert das Laden des iframes, bis es eine berechnete Entfernung vomvisuellen Viewport erreicht, wie vom Browser definiert.Der Zweck besteht darin, die für das Abrufen des Frames erforderliche Netzwerk- und Speicherressource zu vermeiden, bis der Browser einigermaßen sicher ist, dass er 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 verzögert, wenn JavaScript aktiviert ist.Dies ist eine Maßnahme gegen Tracking.

name

Ein zielgerichteter Name für den eingebetteten Browsing-Kontext. Dies kann imtarget-Attribut der<a>,<form>, oder<base>-Elemente verwendet werden; dasformtarget-Attribut der<input> oder<button>-Elemente; oder derwindowName-Parameter in derwindow.open()-Methode. Darüber hinaus wird der Name zu einer Eigenschaft derWindow undDocument-Objekte, die einen Verweis auf das eingebettete Fenster oder das Element selbst enthält.

referrerpolicy

Gibt an, welcherReferrer gesendet wird, wenn die Ressource des Frames abgerufen wird:

no-referrer

DerReferer-Header wird nicht gesendet.

no-referrer-when-downgrade

DerReferer-Header wird nicht anUrsprünge ohneTLS (HTTPS) gesendet.

origin

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

origin-when-cross-origin

Der Referrer, der an andere Ursprünge gesendet wird, 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ürden gleichen Ursprung gesendet, aber Anfragen zwischen verschiedenen Ursprüngen enthalten keine Referrer-Informationen.

strict-origin

Sendet nur den Ursprung des Dokuments als Referrer, wenn die Protokollsicherheitsstufe gleich bleibt (HTTPS→HTTPS), sendet ihn jedoch nicht zu einem weniger sicheren Ziel (HTTPS→HTTP).

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

Sendet eine vollständige URL, wenn eine Anfrage innerhalb des gleichen Ursprungs erfolgt, sendet nur den Ursprung, wenn die Protokollsicherheitsstufe gleich bleibt (HTTPS→HTTPS), und sendet keinen Header zu einem weniger sicheren Ziel (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 weitergibt.

sandbox

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

allow-downloads

Erlaubt das Herunterladen von Dateien über ein<a> oder<area>-Element mit demdownload-Attribut sowie über die Navigation, die zum Download einer Datei führt. Dies funktioniert unabhängig davon, ob der Benutzer auf den Link geklickt hat oder JS-Code dies ohne Benutzereingriff 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 wird keine Eingabevalidierung auslösen, keine Daten an einen Webserver senden oder einen Dialog schließen.

allow-modals

Erlaubt der Seite, modale Fenster durchWindow.alert(),Window.confirm(),Window.print() undWindow.prompt() zu öffnen, während das Öffnen eines<dialog> unabhängig von diesem Schlüsselwort erlaubt ist. Es ermöglicht der Seite auch,BeforeUnloadEvent Ereignisse zu empfangen.

allow-orientation-lock

Lässt die Ressourcedie Bildschirmorientierung sperren.

allow-pointer-lock

Ermöglicht der Seite die Verwendung derPointer Lock API.

allow-popups

Erlaubt Popups (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 einem eingebetteten Dokument, einen neuen Browsing-Kontext zu öffnen, ohne die Sandboxing-Flags darauf anzuwenden. Dies ermöglicht es beispielsweise, dass eine Drittwerbung sicher in einem Sandkasten enthalten ist, ohne die gleichen Einschränkungen auf die Seite anzuwenden, auf die die Anzeige verlinkt. Wenn dieses Flag nicht enthalten ist, werden eine umgeleitete Seite, ein Popup-Fenster oder ein neuer Tab denselben Sandboxing-Einschränkungen unterworfen wie das ursprünglich eingebettete<iframe>.

allow-presentation

Erlaubt Einbettungsmitteln zu kontrollieren, ob ein iframe einePräsentationssitzung starten kann.

allow-same-origin

Wenn dieses Token nicht verwendet wird, wird die Ressource als aus einem speziellen Ursprung stammend behandelt, der immer diegleiche Ursprungsrichtlinie fehlschlagen lässt (was möglicherweise den Zugriff aufDatenspeicherung/Cookies und einige JavaScript-APIs verhindert).

allow-scripts

Erlaubt der Seite das Ausführen von Skripten (aber nicht das Erstellen von Popup-Fenstern). Wenn dieses Schlüsselwort nicht verwendet wird, ist diese Operation nicht erlaubt.

allow-storage-access-by-user-activationExperimentell

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

allow-top-navigation

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

allow-top-navigation-by-user-activation

Erlaubt der Ressource, den oberen Browsing-Kontext zu navigieren, aber nur, wenn diese Aktion durch eine Benutzerinteraktion initiiert wurde.

allow-top-navigation-to-custom-protocols

Erlaubt Navigationsvorgänge zu nicht-http-Protokollen, die im Browser integriert odervon einer Website registriert werden. Diese Funktion wird auch durch das Schlüsselwortallow-popups oderallow-top-navigation aktiviert.

Hinweis:

• Wenn das eingebettete Dokument den gleichen Ursprung wie die einbettende Seite hat, ist esstark entmutigt, sowohlallow-scripts als auchallow-same-origin zu verwenden, da dadurch das eingebettete Dokument dassandbox-Attribut löschen kann — was es nicht sicherer macht, als dassandbox-Attribut überhaupt nicht zu verwenden.
• Sandboxing ist nutzlos, wenn ein Angreifer Inhalte außerhalb eines sandboxediframe darstellen kann — wie wenn der Betrachter das Frame in einem neuen Tab öffnet. Solche Inhalte sollten ebenfalls von einemseparaten Ursprung bereitgestellt werden, um möglichen Schaden zu begrenzen.

Hinweis:Beim Weiterleiten des Benutzers, beim Öffnen eines Popup-Fensters oder eines neuen Tabs von einer eingebetteten Seite in einem<iframe> mit demsandbox-Attribut, unterliegt der neue Browsing-Kontext denselbensandbox-Einschränkungen. Dies kann Probleme verursachen — zum Beispiel, wenn eine Seite, die in einem<iframe> ohne einsandbox="allow-forms" odersandbox="allow-popups-to-escape-sandbox"-Attribut eingebettet ist, eine neue Seite in einem separaten Tab öffnet, und Formularübermittlungen in diesem neuen Browsing-Kontext stillschweigend fehlschlagen.

src

Die URL der Seite, die eingebettet werden soll. Verwenden Sie einen Wert vonabout:blank, um eine leere Seite einzubetten, die dengleichen Ursprungsrichtlinien entspricht. Beachten Sie auch, dass das programmgesteuerte Entfernen einessrc-Attributs von einem<iframe> (z.B. überElement.removeAttribute()) dazu führt, dassabout:blank im Frame in Firefox (ab Version 65), in browserbasierten Chromium-Browsern und in Safari/iOS geladen wird.

Hinweis:Dieabout:blank-Seite verwendet die URL des einbettenden Dokuments als basis URL beim Auflösen aller relativen URLs, wie z.B. Ankerlinks.

srcdoc

Inline-HTML, das eingebettet werden soll und dassrc-Attribut überschreibt. Der Inhalt sollte der Syntax eines vollständigen HTML-Dokuments folgen, welches die Doctype-Direktive,<html>,<body>-Tags usw. enthält, obwohl die meisten davon weggelassen werden können, sodass nur der Body-Inhalt verbleibt. 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 beim Auflösen aller relativen URLs, wie z.B. Ankerlinks.

width

Die Breite des Frames in CSS-Pixeln. Standard ist300.

Veraltete Attribute

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

alignVeraltet

Die Ausrichtung dieses Elements im Verhältnis zum umgebenden Kontext.

frameborderVeraltet

Der Wert1 (Standard) zeichnet einen Rahmen um diesen Frame. Der Wert0 entfernt den Rahmen um diesen Frame, jedoch sollten Sie stattdessen die CSS-Eigenschaftborder verwenden, um<iframe> Ränder zu steuern.

longdescVeraltet

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

marginheightVeraltet

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

marginwidthVeraltet

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

scrollingVeraltet

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

auto

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

yes

Immer eine Scrollleiste anzeigen.

no

Niemals eine Scrollleiste anzeigen.

Skripterstellung

Inline-Frames, wie<frame>-Elemente, sind in demwindow.frames Pseudo-Array enthalten.

Mit dem DOMHTMLIFrameElement Objekt können Skripte auf daswindow Objekt der eingerahmten Ressource über diecontentWindow Eigenschaft zugreifen. DiecontentDocument Eigenschaft verweist auf dasdocument innerhalb des<iframe>, genau wiecontentWindow.document.

Aus dem Inneren eines Frames kann ein Skript eine Referenz auf sein übergeordnetes Fenster mitwindow.parent erhalten.

Der Skriptzugriff auf den Inhalt eines Frames unterliegt dergleiche Ursprungsrichtlinie. Skripte können auf die meisten Eigenschaften in anderenwindow-Objekten nicht zugreifen, wenn das Skript aus einem anderen Ursprung geladen wurde, einschließlich Skripten innerhalb eines Frames, die auf das übergeordnete Frame zugreifen. Übergreifende Kommunikation kann durch Verwendung vonWindow.postMessage() erreicht werden.

Navigation auf oberster Ebene in cross-origin Frames

Skripte, die in einem Frame aus dem gleichen Ursprung ausgeführt werden, können auf dieWindow.top Eigenschaft zugreifen undwindow.top.location setzen, um die oberste Seite auf eine neue URL umzuleiten. Dieses Verhalten wird als "Navigation auf oberster Ebene" bezeichnet.

Ein Cross-Origin-Frame darf nur dann die oberste Seite umleiten, wenn der Frameklebrige Aktivierung hat. Wenn die Navigation auf oberster Ebene blockiert ist, können Browser entweder die Berechtigung des Benutzers zur Umleitung anfordern oder den Fehler in der Entwicklerkonsole melden (oder beides). Diese Einschränkung durch Browser wird alsFramebusting-Intervention bezeichnet. Das bedeutet, dass ein Cross-Origin-Frame nicht sofort die oberste Seite umleiten kann — der Benutzer muss zuvor mit dem Frame interagiert oder die Berechtigung zur Umleitung erteilt haben.

Ein sandboxed Frame blockiert alle Navigationen auf oberster Ebene, es sei denn, diesandbox-Attributwerte sind aufallow-top-navigation oderallow-top-navigation-by-user-activation eingestellt. Beachten Sie, dass Navigationsberechtigungen auf oberster Ebene vererbt werden, sodass ein verschachteltes Frame nur dann eine Navigation auf oberster Ebene durchführen kann, wenn seine übergeordneten Frames ebenfalls dazu berechtigt sind.

Positionierung und Skalierung

Alsersetzendes Element erlaubt das<iframe>, die Position des eingebetteten Dokuments innerhalb seines Rahmens mithilfe derobject-position Eigenschaft anzupassen.

error undload Ereignisverhalten

Dieerror undload Ereignisse, die auf<iframe>s ausgelöst werden, könnten verwendet werden, um den URL-Bereich der HTTP-Server des lokalen Netzwerks zu sondieren. Daher löst aus Sicherheitsgründen der Benutzeragent daserror Ereignis bei<iframe>s nicht aus, und dasload Ereignis wird immer ausgelöst, auch wenn der<iframe>-Inhalt nicht geladen werden kann.

Barrierefreiheit

Personen, die mit Hilfstechnologien wie einem Bildschirmleser navigieren, können dastitle-Attribut auf einem<iframe> verwenden, um seinen Inhalt zu beschriften. 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 festzustellen, was sein eingebetteter Inhalt ist. Dieser Kontextwechsel kann verwirrend und zeitaufwändig sein, insbesondere für Seiten mit mehreren<iframe>s und/oder wenn eingebettete Inhalte interaktive Inhalte wie Video oder Audio enthalten.

Beispiele

Ein einfaches<iframe>

Dieses Beispiel bettet die Seite unterhttps://example.org in einem iframe ein. Dies ist ein häufiger Anwendungsfall für iframes: Einbetten von Inhalten von einer anderen Seite. Beispielsweise sind das Live-Beispiel selbst und dasversuchs es-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

Quellcode in einem<iframe> einbetten

Mit diesem Beispiel wird Quellcode direkt in einem iframe gerendert. Dies kann als Technik verwendet werden, um Skriptinjektionen beim Anzeigen von benutzergenerierten Inhalten zu verhindern, wenn es mit demsandbox-Attribut kombiniert wird.

Beachten Sie, dass bei Verwendung vonsrcdoc alle relativen URLs im eingebetteten Inhalt relativ zur URL der einbettenden Seite aufgelöst werden. Wenn Sie Ankerlinks verwenden möchten, die an Stellen im eingebetteten Inhalt verweisen, müssen Sie explizitabout: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>

So schreiben Sie Escape-Sequenzen bei Verwendung vonsrcdoc:

• Schreiben Sie zuerst das HTML heraus und escapen Sie alles, was Sie in einem normalen HTML-Dokument escapen würden (wie<,>,& usw.).
• < und< repräsentieren dasselbe Zeichen imsrcdoc-Attribut. Um es jedoch zu einer tatsächlichen Escape-Sequenz im HTML-Dokument zu machen, ersetzen Sie alle kaufmännischen Und-Zeichen (&) mit&. Zum Beispiel wird< zu<, und& wird zu&.
• Ersetzen Sie alle doppelten 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, so dass", das in diesem Schritt erzeugt wird, nicht zu" wird.

Ergebnis

Technische Zusammenfassung

Spezifikationen

Browser-Kompatibilität

Siehe auch

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