<iframe>: Das Inline-Frame-Element
Baseline Widely available *
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
* Some parts of this feature may have varying levels of support.
Das <iframe>
-Element in HTML stellt einen verschachtelten Browsing-Kontext dar, der eine andere HTML-Seite in die aktuelle einbettet.
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&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 Document und ermöglicht URL-Navigationen. Die Navigationen jedes eingebetteten Browsing-Kontextes werden in die Sitzungshistorie 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.
Warnung:
Da jeder Browsing-Kontext eine vollständige Dokumentenumgebung ist, benötigt jedes <iframe>
auf einer Seite mehr Speicher und andere Rechenressourcen. Theoretisch können Sie so viele <iframe>
s verwenden, wie Sie möchten, aber überprüfen Sie auf Leistungsprobleme.
Attribute
Dieses Element umfasst die globalen Attribute.
allow
-
Gibt eine Permissions Policy für das
<iframe>
an. Die Richtlinie definiert, welche Funktionen für das<iframe>
verfügbar sind (z. B. Zugriff auf das Mikrofon, die Kamera, den Akku, Web-Sharing usw.) basierend auf dem Ursprung der Anfrage.Sehen Sie sich iframes im Thema
Permissions-Policy
für Beispiele an.Hinweis: Eine durch das
allow
-Attribut angegebene Berechtigungsrichtlinie setzt zusätzliche Einschränkungen neben der imPermissions-Policy
-Header angegebenen Richtlinie durch. Sie ersetzt diese nicht. allowfullscreen
-
Auf
true
gesetzt, wenn das<iframe>
den Vollbildmodus durch Aufrufen derrequestFullscreen()
-Methode aktivieren kann.Hinweis: Dieses Attribut wird als veraltetes Attribut betrachtet und als
allow="fullscreen"
neu definiert. allowpaymentrequest
Veraltet Nicht standardisiert-
Auf
true
gesetzt, wenn ein Cross-Origin-<iframe>
die Payment Request API aufrufen darf.Hinweis: Dieses Attribut wird als veraltetes Attribut betrachtet und als
allow="payment"
neu definiert. browsingtopics
Experimentell Nicht standardisiert-
Ein boolesches Attribut, das, wenn es vorhanden ist, angibt, dass die ausgewählten Themen für den aktuellen Benutzer mit der Anfrage für die
<iframe>
-Quelle gesendet werden sollen. Siehe Using the Topics API für weitere Details. credentialless
Experimentell-
Auf
true
gesetzt, um das<iframe>
credentorienlos 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 seinem Ursprung verbunden sind. Es verwendet einen neuen Kontext, der lokal zur Lebensdauer des Top-Level-Dokuments ist. Im Gegenzug können die Einbettungsregeln desCross-Origin-Embedder-Policy
(COEP) aufgehoben werden, sodass 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 durchgesetzt wird. Siehe
HTMLIFrameElement.csp
für Details. height
-
Die Höhe des Frames in CSS-Pixeln. Standard ist
150
. loading
-
Gibt an, wann der Browser das
<iframe>
laden soll:eager
-
Laden Sie das
<iframe>
sofort beim Laden der Seite (dies ist der Standardwert). lazy
-
Verzögern Sie das Laden des
<iframe>
, bis es eine berechnete Entfernung vom visuellen Viewport erreicht, wie vom Browser definiert. Ziel ist es, das erforderliche Netzwerk- und Speicherbandbreite zur Erfassung des Frames zu vermeiden, bis der Browser hinreichend sicher ist, dass es benötigt wird. Dies verbessert die Leistung und Kosten in den meisten typischen Anwendungsfällen, insbesondere durch Reduzierung der anfänglichen Ladezeiten der Seite.Hinweis: Das Laden wird nur verzögert, wenn JavaScript aktiviert ist. Dies ist eine Anti-Tracking-Maßnahme.
name
-
Ein zielbarer Name für den eingebetteten Browsing-Kontext. Dies kann im
target
-Attribut der<a>
,<form>
oder<base>
-Elemente verwendet werden; dasformtarget
-Attribut der<input>
oder<button>
-Elemente; oder denwindowName
-Parameter in derwindow.open()
-Methode. Darüber hinaus wird der Name eine Eigenschaft derWindow
undDocument
-Objekte, die einen Verweis auf das eingebettete Fenster oder das Element selbst enthält. referrerpolicy
-
Gibt an, welcher Referer beim Abrufen der Ressource des Frames gesendet werden soll:
no-referrer
-
Der
Referer
-Header wird nicht gesendet. no-referrer-when-downgrade
-
Der
Referer
-Header wird nicht an Origins ohne TLS (HTTPS) gesendet. origin
-
Der gesendete Referer wird auf den Origin der verweisenden Seite beschränkt sein: ihr Schema, Host und Port.
origin-when-cross-origin
-
Der an andere Origins gesendete Referer wird auf das Schema, den Host und den Port beschränkt. Navigationsvorgänge innerhalb desselben Origins enthalten weiterhin den Pfad.
same-origin
-
Ein Referer wird für Same-Origin gesendet, aber Cross-Origin-Anfragen enthalten keine Referer-Informationen.
strict-origin
-
Sendet nur den Origin des Dokuments als Referer, wenn das Sicherheitsniveau des Protokolls gleich bleibt (HTTPS→HTTPS), aber schickt ihn nicht zu einem weniger sicheren Ziel (HTTPS→HTTP).
strict-origin-when-cross-origin
(Standard)-
Sendet eine vollständige URL, wenn eine Same-Origin-Anfrage durchgeführt wird, sendet nur den Origin, wenn das Sicherheitsniveau des Protokolls gleich bleibt (HTTPS→HTTPS) und sendet keinen Header an ein weniger sicheres Ziel (HTTPS→HTTP).
unsafe-url
-
Der Referer wird den Origin und den Pfad umfassen (aber nicht das Fragment, Passwort oder Benutzername). Dieser Wert ist unsicher, da er Origins und Pfade von TLS-geschützten Ressourcen an unsichere Origins leakt.
sandbox
-
Steuert 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 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 JS-Code dies ohne Benutzereingriff initiiert hat. 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 löst keine Eingabevalidierung aus, sendet keine Daten an einen Webserver oder schließt einen Dialog.
allow-modals
-
Ermöglicht der Seite das Öffnen von modalen Fenstern durch
Window.alert()
,Window.confirm()
,Window.print()
undWindow.prompt()
, während das Öffnen eines<dialog>
unabhängig von diesem Schlüsselwort erlaubt ist. Es ermöglicht auch der Seite,BeforeUnloadEvent
-Ereignisse zu empfangen. allow-orientation-lock
-
Lässt die Ressource die Bildschirmausrichtung sperren.
allow-pointer-lock
-
Erlaubt der Seite die Nutzung der Pointer Lock API.
allow-popups
-
Erlaubt Popups (erstellt z. B. von
Window.open()
odertarget="_blank"
). Wenn dieses Schlüsselwort nicht verwendet wird, schlägt diese Funktionalität lautlos fehl. allow-popups-to-escape-sandbox
-
Ermöglicht einem im Sandkasten ausgeführten Dokument das Öffnen eines neuen Browsing-Kontextes, ohne dass die Sandkasten-Flags darauf angewendet werden. Dies ermöglicht es beispielsweise, eine Drittanbieter-Werbung sicher zu sandboxen, ohne die gleichen Einschränkungen auf die Seite auferlegen zu müssen, auf die die Anzeige verlinkt. Wenn dieses Flag nicht eingeschlossen ist, unterliegt eine umgeleitete Seite, ein Popup-Fenster oder ein neuer Tab den gleichen Sandbox-Einschränkungen wie das ursprüngliche
<iframe>
. allow-presentation
-
Ermöglicht Einbettern 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 einem speziellen Origin stammend behandelt, der immer die same-origin policy verletzt (was möglicherweise den Zugriff auf Daten-/Cookie-Speicher und bestimmte JavaScript-APIs verhindert).
allow-scripts
-
Ermöglicht der Seite das Ausführen von Skripten (aber nicht die Erstellung von Popup-Fenstern). Wenn dieses Schlüsselwort nicht verwendet wird, ist dieser Vorgang 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. -
Lässt die Ressource den Top-Level-Browsing-Kontext (denjenigen, der als
_top
benannt ist) navigieren. -
Gestattet der Ressource die Navigation im Top-Level-Browsing-Kontext, jedoch nur, wenn sie durch eine Benutzerinteraktion initiiert wurde.
-
Erlaubt Navigationen zu nicht-
http
-Protokollen, die im Browser integriert oder von 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 einbettende Seite hat, wird es dringend abgeraten, sowohl
allow-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 überhaupt nicht zu verwenden. - Sandboxing ist nutzlos, wenn der Angreifer Inhalte außerhalb eines sandboxed
iframe
anzeigen kann — beispielsweise, wenn der Betrachter das Frame in einem neuen Tab öffnet. Solche Inhalte sollten auch von einem separaten Ursprung bereitgestellt werden, um möglichen Schaden zu begrenzen.
Hinweis: Beim Weiterleiten des Benutzers, beim Öffnen eines Popup-Fensters oder beim Öffnen eines neuen Tabs von einer eingebetteten Seite innerhalb eines
<iframe>
mit demsandbox
-Attribut unterliegt der neue Browsing-Kontext denselbensandbox
-Einschränkungen. Dies kann Probleme verursachen — zum Beispiel, wenn eine Seite, die innerhalb eines<iframe>
ohne einsandbox="allow-forms"
odersandbox="allow-popups-to-escape-sandbox"
-Attribut darauf gesetzt ist, eine neue Site in einem separaten Tab öffnet, wird das Absenden von Formularen in diesem neuen Browsing-Kontext lautlos fehlschlagen. src
-
Die URL der einzubettenden Seite. Verwenden Sie den Wert
about:blank
, um eine leere Seite einzubetten, die der same-origin policy entspricht. Beachten Sie auch, dass das programmgesteuerte Entfernen dessrc
-Attributs eines<iframe>
(z. B. überElement.removeAttribute()
) dazu führt, dassabout:blank
im Frame in Firefox (ab Version 65), 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 aufgelöst werden, wie z. B. Anker-Links. 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 usw. enthält, obwohl die meisten von ihnen weggelassen werden können, wobei 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: Die
about:srcdoc
-Seite verwendet die URL des einbettenden Dokuments als Basis-URL, wenn irgendwelche relativen URLs aufgelöst werden, wie z. B. Anker-Links. width
-
Die Breite des Frames in CSS-Pixeln. Standard 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 im Verhältnis zum umgebenden Kontext.
frameborder
Veraltet-
Der Wert
1
(die Standardeinstellung) zeichnet einen Rahmen um diesen Frame. Der Wert0
entfernt den Rahmen um diesen Frame, aber Sie sollten stattdessen die CSS-Eigenschaftborder
verwenden, um<iframe>
-Rahmen zu steuern. longdesc
Veraltet-
Eine URL einer langen Beschreibung des Inhalts des Frames. Aufgrund weitverbreiteten Missbrauchs ist dies nicht nützlich für nicht-visuelle Browser.
marginheight
Veraltet-
Die Menge an Platz in Pixeln zwischen dem Inhalt des Frames und seinen oberen und unteren Rändern.
marginwidth
Veraltet-
Die Menge an Platz in Pixeln zwischen dem Inhalt des Frames und seinen linken und rechten Rändern.
scrolling
Veraltet-
Gibt an, wann der Browser einen Scrollbalken für den Frame bereitstellen soll:
Scripting
Inline-Frames, wie <frame>
-Elemente, sind im window.frames
-Pseudo-Array enthalten.
Mit dem DOM-Objekt HTMLIFrameElement
können Skripte über die contentWindow
-Eigenschaft auf das window
-Objekt der eingerahmten Ressource zugreifen. Die contentDocument
-Eigenschaft bezieht sich auf das document
innerhalb des <iframe>
, gleich wie contentWindow.document
.
Von innerhalb eines Frames kann ein Skript über window.parent
einen Verweis auf sein Elternfenster erhalten.
Skriptzugriff auf den Inhalt eines Frames unterliegt der same-origin policy. Skripte können nicht auf die meisten Eigenschaften in anderen window
-Objekten zugreifen, wenn das Skript von einem anderen Ursprung geladen wurde, einschließlich Skripten innerhalb eines Frames, die auf das Eltern-Frame zugreifen. Cross-Origin-Kommunikation kann erreicht werden, indem Window.postMessage()
verwendet wird.
Positionierung und Skalierung
Als ersetztes Element ermöglicht das <iframe>
, die Position des eingebetteten Dokuments innerhalb seines Kastens mit der object-position
-Eigenschaft anzupassen.
Hinweis:
Die object-fit
-Eigenschaft hat auf <iframe>
-Elemente keinen Einfluss.
error
und load
Ereignisverhalten
Die error
- und load
-Ereignisse, die bei <iframe>
s ausgelöst werden, könnten verwendet werden, um den URL-Raum der HTTP-Server des lokalen Netzwerks zu erkunden. Daher feuern Benutzeragenten aus Sicherheitsgründen das error-Ereignis auf <iframe>
s nicht ab, und das load-Ereignis wird immer ausgelöst, selbst wenn der <iframe>
-Inhalt nicht geladen werden kann.
Barrierefreiheit
Personen, die mit Hilfe von Assistenztechnologien wie Bildschirmlesern navigieren, können das title
-Attribut auf einem <iframe>
verwenden, um den Inhalt zu beschriftstellen. 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 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 unter https://example.org in ein iframe ein. Dies ist ein gängiger Anwendungsfall von iframes: um Inhalte von einer anderen Seite einzubetten. Zum Beispiel sind das Live-Beispiel selbst und das Probiere es aus 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
Einbetten von Quellcode in einem <iframe>
Dieses Beispiel rendert direkt Quellcode in einem iframe. Dies kann als Technik verwendet werden, um Skriptinjektionen zu verhindern, wenn Benutzergenerierter Inhalt angezeigt wird, in Kombination mit dem sandbox
-Attribut.
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="about:srcdoc#embed_another">To embed content from another page</a></li>
<li><a href="about:srcdoc#embed_user">To embed user-generated content</a></li>
</ol>
<h2 id="embed_another">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>&lt;iframe src="https://example.org"&gt;&lt;/iframe&gt;</code></pre>
<h2 id="embed_user">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 ist, wie man Escape-Sequenzen beim Verwenden von srcdoc
schreibt:
- Schreiben Sie zuerst das HTML, wobei alles so es umgedreht werden muss, wie Sie es in einem normalen HTML-Dokument tun würden (wie
<
,>
,&
usw.). <
und<
repräsentieren dasselbe Zeichen imsrcdoc
-Attribut. Daher ersetzen Sie jedes Ampersand (&
) mit&
, um es zu einer tatsächlichen Escape-Sequenz im HTML-Dokument zu machen. Zum Beispiel wird<
zu&lt;
, und&
wird zu&amp;
.- Ersetzen Sie alle doppelten Anführungszeichen (
"
) mit"
, um zu verhindern, dass dassrcdoc
-Attribut vorzeitig beendet wird (wenn Sie'
verwenden, sollten Sie'
durch'
ersetzen). Dieser Schritt erfolgt nach dem vorherigen, damit nicht"
, der in diesem Schritt generiert wird, zu&quot;
wird.
Ergebnis
Technische Zusammenfassung
Inhaltskategorien | Fließender Inhalt, Phrasierung Inhalt, eingebetteter Inhalt, interaktiver Inhalt, greifbarer Inhalt. |
---|---|
Erlaubter Inhalt | Kein. |
Tag-Auslassung | Keine, sowohl die Start- als auch die End-Tags sind obligatorisch. |
Erlaubte Eltern | Jedes Element, das eingebetteten Inhalt akzeptiert. |
Implizite ARIA-Rolle | Keine entsprechende Rolle |
Erlaubte ARIA-Rollen |
application , document ,
img , none ,
presentation
|
DOM-Interface | [`HTMLIFrameElement`](/de/docs/Web/API/HTMLIFrameElement) |
Spezifikationen
Specification |
---|
HTML # the-iframe-element |