<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 Session-Historie 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, dargestellt durch das Window Objekt.

Attribute

Dieses Element enthält die globalen Attribute.

allow

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

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

Hinweis: Eine durch das allow-Attribut angegebene Berechtigungsrichtlinie stellt eine zusätzliche Einschränkung zur in der Permissions-Policy Header angegebenen Richtlinie dar. Sie ersetzt diese nicht.

allowfullscreen

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

Hinweis: Dieses Attribut gilt als ein veraltetes Attribut und wurde als allow="fullscreen *" neu definiert.

allowpaymentrequest Veraltet Nicht standardisiert

Auf true gesetzt, wenn einem cross-origin <iframe> erlaubt sein soll, die Verwendung der Zahlungsanforderungs-API zu initiieren.

Hinweis: Dieses Attribut gilt als ein veraltetes Attribut und wurde 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 Anfrage für die Quelle des <iframe> gesendet werden sollen. Siehe Verwendung der Themen-API für weitere Details.

credentialless Experimentell

Auf true gesetzt, um das <iframe> credentialsfrei zu machen, was bedeutet, dass sein Inhalt in einem neuen, temporären Kontext geladen wird. Es hat keinen Zugriff auf das Netzwerk, Cookies und Speicherdaten, die mit seiner Herkunft assoziiert sind. Es verwendet einen neuen Kontext, der lokal zur Lebenszeit des obersten Dokuments ist. Im Gegenzug können die Einbettungsregeln der Cross-Origin-Embedder-Policy (COEP) aufgehoben werden, so dass Dokumente mit gesetztem COEP Drittanbieterdokumente einbetten können, die dies nicht tun. Siehe IFrame credentialless für weitere Details.

csp Experimentell

Eine Content Security Policy, die für die eingebettete Ressource erzwungen 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

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 vom visuellen Viewport erreicht, wie vom Browser definiert. Das Ziel ist es, die Netzwerk- und Speicherbandbreite zu sparen, die erforderlich ist, um das Frame abzurufen, bis der Browser vernünftigerweise sicher ist, dass es benötigt wird. Dies verbessert die Leistung und die Kosten in den meisten Anwendungsfällen, insbesondere durch die Reduzierung der anfänglichen Seitenladezeiten.

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. Dieser kann im target-Attribut der <a>, <form>, oder <base> Elemente verwendet werden; im formtarget-Attribut der <input> oder <button> Elemente; oder im windowName-Parameter in der window.open() Methode. Darüber hinaus wird der Name zu einer Eigenschaft der Window und Document Objekte, die eine Referenz auf das eingebettete Fenster oder das Element selbst enthält.

privateToken Experimentell

Enthält eine String-Darstellung eines Optionsobjekts, das eine private State Token Operation darstellt; dieses Objekt hat die gleiche Struktur wie die RequestInit Wörterbuchs privateToken Eigenschaft. IFrames mit diesem Attribut können Operationen wie das Ausgeben oder Einlösen von Tokens initiieren, wenn ihr eingebetteter Inhalt geladen ist.

referrerpolicy

Gibt an, welcher Referrer beim Abrufen der Ressource des iframes gesendet werden soll:

no-referrer

Der Referer Header wird nicht gesendet.

no-referrer-when-downgrade

Der Referer Header wird nicht an Herkünfte gesendet, die kein TLS (HTTPS) verwenden.

origin

Der gesendete Referrer wird auf die Herkunft der referenzierenden Seite beschränkt: ihr Schema, Host und Port.

origin-when-cross-origin

Der Referrer, der an andere Herkünfte gesendet wird, wird auf das Schema, den Host und den Port beschränkt. Navigierungen auf der gleichen Herkunft enthalten weiterhin den Pfad.

same-origin

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

strict-origin

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

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

Senden Sie eine vollständige URL bei einer Anfrage innerhalb derselben Herkunft, senden Sie nur die Herkunft, wenn das Protokoll-Sicherheitsniveau gleich bleibt (HTTPS→HTTPS), und senden Sie keinen Header an ein weniger sicheres Ziel (HTTPS→HTTP).

unsafe-url

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

sandbox

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

allow-downloads

Ermöglicht das Herunterladen von Dateien über ein <a> oder <area> Element mit dem download Attribut sowie durch die Navigation, die zum Herunterladen einer Datei führt. Dies funktioniert unabhängig davon, ob der Benutzer auf den Link geklickt hat oder es durch JS-Code ohne Benutzerinteraktion initiiert wurde.

allow-forms

Ermöglicht der Seite das Absenden von Formularen. Wenn dieses Schlüsselwort nicht verwendet wird, wird ein Formular wie gewohnt angezeigt, aber das Absenden wird weder die Eingabevalidierung auslösen, Daten an einen Webserver senden noch einen Dialog schließen.

allow-modals

Ermöglicht der Seite das Öffnen von Modalfenstern 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 Empfangen von BeforeUnloadEvent.

allow-orientation-lock

Ermöglicht der Ressource, die Bildschirmorientierung zu sperren.

allow-pointer-lock

Ermöglicht der Seite die Verwendung der Pointer Lock API.

allow-popups

Ermöglicht Popups (erstellt beispielsweise 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

Ermöglicht es einem sandboxed Dokument, einen neuen Browsing-Kontext zu öffnen, ohne die Sandboxing-Flags darauf anzuwenden. Dies erlaubt es beispielsweise, eine Drittanbieter-Anzeige sicher zu sandboxen, ohne die gleichen Einschränkungen auf die Seite anzuwenden, auf die die Anzeige verweist. Wenn dieses Flag nicht enthalten ist, unterliegt eine weitergeleitete Seite, ein Popup-Fenster oder ein neuer Tab den gleichen Sandbox-Einschränkungen wie das ursprungs <iframe>.

allow-presentation

Ermöglicht Einbettenden die Kontrolle darüber, ob ein iframe eine Präsentationssitzung starten kann.

allow-same-origin

Wenn dieses Token nicht verwendet wird, wird die Ressource als von einer speziellen Herkunft betrachtet, die immer die same-origin policy nicht besteht (möglicherweise wird der Zugriff auf Datenspeicherung/Cookies und einige JavaScript-APIs verhindert).

allow-scripts

Ermöglicht der Seite das Ausführen von Skripten (aber keine Pop-up-Fenster zu erstellen). Wenn dieses Schlüsselwort nicht verwendet wird, ist dies nicht erlaubt.

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

Ermöglicht einem Dokument, das im <iframe> geladen ist, die Storage Access API zu verwenden, um Zugriff auf nicht partitionierte Cookies anzufordern.

allow-top-navigation

Ermöglicht der Ressource die Navigation im obersten Browsing-Kontext (demjenigen, der als _top bezeichnet wird).

allow-top-navigation-by-user-activation

Ermöglicht der Ressource die Navigation im obersten Browsing-Kontext, jedoch nur, wenn dies durch eine Benutzerinteraktion initiiert wurde.

allow-top-navigation-to-custom-protocols

Ermöglicht Navigierungen zu Nicht-http-Protokollen, die im Browser eingebaut oder von einer Website registriert sind. Diese Funktion wird auch durch das allow-popups oder allow-top-navigation Schlüsselwort aktiviert.

Hinweis:

• Wenn das eingebettete Dokument die gleiche Herkunft hat wie die einbettende Seite, ist es stark abzuraten, sowohl allow-scripts als auch allow-same-origin zu verwenden, da dies dem eingebetteten Dokument erlaubt, das sandbox-Attribut zu entfernen — was es nicht sicherer macht, als das sandbox-Attribut überhaupt nicht zu verwenden.
• Sandboxing ist nutzlos, wenn der Angreifer Inhalte außerhalb eines sandboxed iframe anzeigen kann — zum Beispiel, wenn der Betrachter das Frame in einem neuen Tab öffnet. Solche Inhalte sollten auch aus einer separaten Herkunft bereitgestellt werden, um potenzielle Schäden zu begrenzen.

Hinweis: Wenn Sie den Benutzer weiterleiten, ein Popup-Fenster öffnen oder eine neue Registerkarte von einer eingebetteten Seite innerhalb eines <iframe>s mit dem sandbox-Attribut öffnen, unterliegt der neue Browsing-Kontext denselben sandbox-Einschränkungen. Dies kann Probleme verursachen — zum Beispiel, wenn eine Seite, die innerhalb eines <iframe> ohne ein sandbox="allow-forms" oder sandbox="allow-popups-to-escape-sandbox" Attribut eingebettet ist, eine neue Seite in einem separaten Tab öffnet, wird das Formular 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 mit der same-origin policy übereinstimmt. Beachten Sie auch, dass das programmgesteuerte Entfernen des src-Attributs eines <iframe> (z.B. über Element.removeAttribute()) dazu führt, dass about:blank in das Frame geladen wird in Firefox (ab Version 65), auf Chromium-basierten Browsern und Safari/iOS.

Hinweis: Die about:blank Seite verwendet die URL des einbettenden Dokuments als Basis-URL, wenn sie relative URLs auflöst, wie z.B. Anker-Links.

srcdoc

Eingebettetes HTML, das das src-Attribut überschreibt. Sein Inhalt sollte der Syntax eines vollständigen HTML-Dokuments folgen, das die Doctype-Direktive, <html>, <body> Tags usw. enthält, obwohl die meisten von ihnen weggelassen werden können, so dass nur der Inhalt des Körpers übrig bleibt. Dieses Dokument wird about:srcdoc als seinen Standort haben. Wenn ein Browser das srcdoc-Attribut nicht unterstützt, fällt er auf die URL im src-Attribut zurück.

Hinweis: Die about:srcdoc Seite verwendet die URL des einbettenden Dokuments als Basis-URL, wenn sie relative URLs auflöst, wie z.B. Anker-Links.

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 dieses Frame. Der Wert 0 entfernt den Rahmen um dieses Frame, aber Sie sollten stattdessen die CSS-Eigenschaft border verwenden, um <iframe> Rahmen zu kontrollieren.

longdesc Veraltet

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

marginheight Veraltet

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

marginwidth Veraltet

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

scrolling Veraltet

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

auto

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

yes

Immer eine Scrollleiste anzeigen.

no

Keine Scrollleiste 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 verweist auf das document innerhalb des <iframe>, gleich wie contentWindow.document.

Innerhalb eines Frames kann sich ein Skript mit window.parent auf sein Hauptfenster beziehen.

Der Skriptzugriff auf den Inhalt eines Frames unterliegt der same-origin policy. Skripte können auf die meisten Eigenschaften in anderen window Objekten nicht zugreifen, wenn das Skript von einer anderen Herkunft geladen wurde, einschließlich Skripten innerhalb eines Frames, die auf das Hauptfenster des Frames zugreifen. Cross-Origin-Kommunikation kann mit Window.postMessage() erreicht werden.

Top-Navigation in Cross-Origin-Frames

Skripte, die in einem Same-Origin-Frame 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 darf die oberste Seite nur dann mithilfe von top umleiten, wenn der Frame sticky activation hat. Wenn die Top-Navigation blockiert ist, können Browser entweder eine Benutzererlaubnis zum Weiterleiten anfordern oder den Fehler in der Entwicklerkonsole melden (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 Weiterleitung erteilt haben.

Ein sandboxed Frame blockiert alle Top-Navigationen, es sei denn, die sandbox-Attributwerte sind auf allow-top-navigation oder allow-top-navigation-by-user-activation gesetzt. Beachten Sie, dass Berechtigungen zur Top-Navigation vererbt werden, so dass ein verschachtelter Frame eine Top-Navigation nur ausführen kann, wenn auch seine übergeordneten Frames dazu befugt sind.

Positionierung und Skalierung

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

error und load Ereignisverhalten

Die error und load Ereignisse, die auf <iframe>s ausgeführt werden, könnten verwendet werden, um den URL-Bereich der HTTP-Server des lokalen Netzwerks zu sondieren. Aus Sicherheitsgründen lösen Benutzeragenten das error Ereignis bei <iframe>s nicht aus; das load Ereignis wird jedoch immer ausgelöst, selbst wenn der <iframe> Inhalt nicht geladen werden kann.

Barrierefreiheit

Personen, die mit assistiven Technologien wie einem Bildschirmleser navigieren, können das title Attribut in einem <iframe> verwenden, um dessen Inhalt zu beschriften. Der Wert des Titels sollte den eingebetteten Inhalt knapp 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 Kontexwechsel kann verwirrend und zeitaufwendig sein, insbesondere für Seiten mit mehreren <iframe>s und/oder wenn Einbettungen 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 einzubetten. Zum Beispiel ist das Live-Beispiel selbst sowie das try it 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 zeigt direkt Quellcode in einem iframe an. Dies kann als Technik zur Verhinderung von Skriptinjektionen beim Anzeigen von benutzergenerierten Inhalten verwendet werden, wenn es mit dem sandbox-Attribut kombiniert wird.

Beachten Sie, dass bei Verwendung von srcdoc alle relativen URLs im eingebetteten Inhalt relativ zur URL der einbettenden Seite aufgelöst werden. Wenn Sie Anker-Links verwenden möchten, die auf Stellen im eingebetteten Inhalt verweisen, müssen Sie explizit 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>

So schreiben Sie Escape-Sequenzen bei Verwendung von srcdoc:

• Schreiben Sie zuerst das HTML niederschriftlich, indem Sie alles entkommen, das Sie in einem normalen HTML-Dokument entkommen würden (wie <, >, &, usw.).
• < und < repräsentieren dasselbe Zeichen im srcdoc Attribut. Um es daher zu einer tatsächlichen Escape-Sequenz im HTML-Dokument zu machen, ersetzen Sie jedes kaufmännische Und (&) durch &. Zum Beispiel wird < zu <, und & wird zu &.
• Ersetzen Sie alle Anführungszeichen (") durch ", um zu verhindern, dass das srcdoc Attribut vorzeitig beendet wird (wenn Sie ' statt " verwenden, dann 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