<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.
Das <iframe>
HTML-Element repräsentiert einen verschachtelten Browsing-Kontext und bettet eine andere HTML-Seite in die aktuelle ein.
Probieren Sie es aus
Jeder eingebettete Browsing-Kontext hat sein eigenes Dokument und ermöglicht URL-Navigations. Die Navigations jedes eingebetteten Browsing-Kontexts werden in die Sitzungshistorie des obersten Browsing-Kontexts linearisiert. Der Browsing-Kontext, der die anderen einbettet, wird als Übergeordneter 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 Computerressourcen. Theoretisch können Sie so viele <iframe>
s verwenden, wie Sie möchten, achten Sie jedoch auf Leistungsprobleme.
Attribute
Dieses Element beinhaltet die globalen Attribute.
allow
-
Bestimmt eine Permissions Policy für das
<iframe>
. Die Richtlinie definiert, welche Funktionen dem<iframe>
zur Verfügung stehen (z. B. Zugriff auf Mikrofon, Kamera, Akku, Web-Share usw.) basierend auf dem Ursprung der Anfrage.Siehe iframes im
Permissions-Policy
-Thema für Beispiele.Hinweis: Eine durch das
allow
-Attribut festgelegte Permissions Policy ist eine zusätzliche Einschränkung zur Richtlinie, die imPermissions-Policy
-Header festgelegt ist. Sie ersetzt diese nicht. allowfullscreen
-
Auf
true
gesetzt, wenn das<iframe>
den Vollbildmodus durch Aufrufen derrequestFullscreen()
-Methode aktivieren kann.Hinweis: Dieses Attribut wird als veraltet angesehen 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 veraltet angesehen und als
allow="payment"
neu definiert. browsingtopics
Experimentell Nicht standardisiert-
Ein boolesches Attribut, das, wenn vorhanden, spezifiziert, dass die ausgewählten Themen für den aktuellen Benutzer mit der Anfrage für die Quelle des
<iframe>
gesendet werden sollten. Siehe Using the Topics API für weitere Details. 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, die Cookies und Datenspeicher, die mit seinem Ursprung verbunden sind. Es verwendet einen neuen Kontext, der an die Lebensdauer des obersten Dokuments gebunden ist. Im Gegenzug können dieCross-Origin-Embedder-Policy
(COEP)-Einbettungsregeln aufgehoben werden, sodass Dokumente mit festgelegtem COEP Drittanbieter-Dokumente einbetten können, die dies nicht tun. Weitere Informationen finden Sie unter IFrame credentialless. csp
Experimentell-
Eine Content Security Policy, die für die eingebettete Ressource durchgesetzt wird. Weitere Details siehe
HTMLIFrameElement.csp
. height
-
Die Höhe des Rahmens in CSS-Pixeln. Standard ist
150
. loading
-
Gibt an, wann der Browser das iframe laden soll:
eager
-
Lässt das iframe sofort beim Laden der Seite laden (dies ist der Standardwert).
lazy
-
Verzögert das Laden des iframes, bis es eine berechnete Entfernung vom visuellen Ansichtsfenster, wie vom Browser definiert, erreicht. Die Absicht ist, den Netzwerk- und Speicherbedarf, der benötigt wird, um den Frame abzurufen, zu vermeiden, bis der Browser vernünftigerweise sicher ist, dass er benötigt wird. Dies verbessert die Leistung und Kosten in den meisten typischen Anwendungsfällen, insbesondere durch Verkürzung der anfänglichen Seitenladezeiten.
Hinweis: Das Laden wird nur verzögert, wenn JavaScript aktiviert ist. Dies ist eine Anti-Tracking-Maßnahme.
name
-
Ein zielgerichteter Name für den eingebetteten Browsing-Kontext. Dieser kann im
target
-Attribut der<a>
,<form>
oder<base>
Elemente oder imformtarget
-Attribut der<input>
oder<button>
Elemente oder imwindowName
-Parameter derwindow.open()
-Methode verwendet werden. referrerpolicy
-
Gibt an, welcher Referrer 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 Ursprünges ohne TLS (HTTPS) gesendet. origin
-
Der gesendete Referrer wird auf den Ursprung der verweisenden Seite beschränkt: sein Scheme, Host und Port.
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 selben Ursprung enthalten weiterhin den Pfad.
same-origin
-
Ein Referrer wird für den selben Ursprung gesendet, aber bei Cross-Origin-Anfragen wird keine Referrer-Information enthalten sein.
strict-origin
-
Sendet nur den Ursprung des Dokuments als Referrer, wenn das Sicherheitsniveau des Protokolls gleich bleibt (HTTPS→HTTPS), jedoch nicht an ein weniger sicheres Ziel (HTTPS→HTTP).
strict-origin-when-cross-origin
(Standard)-
Sendet eine vollständige URL, wenn eine Anfrage im selben Ursprung erfolgt, sendet nur den Ursprung, wenn das Sicherheitsniveau des Protokolls gleich bleibt (HTTPS→HTTPS), und sendet keinen Header an ein weniger sicheres Ziel (HTTPS→HTTP).
unsafe-url
-
Der Referrer enthält den Ursprung und den Pfad (jedoch nicht das Fragment, das Passwort oder den Benutzernamen). Dieser Wert ist unsicher, da er Ursprünge und Pfade von TLS-geschützten Ressourcen an unsichere Ursprünge weitergibt.
sandbox
-
Kontrolliert 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 anzuwenden, oder leerzeichenseparierte 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 nicht und ob der Aufruf ohne Benutzereingriff durch JS-Code gestartet wurde. allow-forms
-
Ermöglicht es der Seite, Formulare zu übermitteln. Wenn dieses Schlüsselwort nicht verwendet wird, wird ein Formular wie gewohnt angezeigt, aber beim Absenden werden keine Eingabevalidierungen ausgelöst, Daten an einen Webserver gesendet oder ein Dialog geschlossen.
allow-modals
-
Ermöglicht es der Seite, modale Fenster durch
Window.alert()
,Window.confirm()
,Window.print()
undWindow.prompt()
zu öffnen, während das Öffnen eines<dialog>
unabhängig von diesem Schlüsselwort erlaubt ist. Es erlaubt der Seite auch, einBeforeUnloadEvent
Ereignis zu empfangen. allow-orientation-lock
-
Lässt die Ressource die Bildschirmorientierung sperren.
allow-pointer-lock
-
Ermöglicht es der Seite, die Pointer Lock API zu verwenden.
allow-popups
-
Erlaubt Pop-ups (wie von
Window.open()
,target="_blank"
,Window.showModalDialog()
). Wenn dieses Schlüsselwort nicht verwendet wird, schlägt diese Funktionalität stillschweigend fehl. allow-popups-to-escape-sandbox
-
Erlaubt es einem im Sandkasten befindlichen Dokument, einen neuen Browsing-Kontext zu öffnen, ohne die Sandkasten-Flags darauf anzuwenden. Dies erlaubt es beispielsweise, eine Anzeige von Drittanbietern sicher zu sandkasten, ohne die gleichen Einschränkungen für die Seite zu erzwingen, auf die die Anzeige verlinkt. Wenn dieses Flag nicht enthalten ist, unterliegt eine umgeleitete Seite, ein Popup-Fenster oder ein neuer Tab denselben Sandbox-Einschränkungen wie das ursprüngliche
<iframe>
. allow-presentation
-
Erlaubt es Einbettern, zu steuern, ob ein iframe eine Präsentationssitzung starten kann.
allow-same-origin
-
Wenn dieses Token nicht verwendet wird, wird die Ressource als aus einem speziellen Ursprung stammend betrachtet, der immer die same-origin policy fehlschlägt (was möglicherweise den Zugriff auf Datenspeicherung/Cookies und einige JavaScript-APIs verhindert).
allow-scripts
-
Ermöglicht es der Seite, Skripte auszuführen (aber keine Pop-up-Fenster zu erstellen). Wenn dieses Schlüsselwort nicht verwendet wird, ist dieser Vorgang nicht erlaubt.
allow-storage-access-by-user-activation
Experimentell-
Erlaubt es einem im
<iframe>
geladenen Dokument, die Storage Access API zu verwenden, um Zugang zu nicht partitionierten Cookies anzufordern. -
Lässt die Ressource den obersten Browsing-Kontext (denjenigen, der
_top
genannt wird) navigieren. -
Lässt die Ressource den obersten Browsing-Kontext navigieren, jedoch nur, wenn dies durch eine Benutzeraktion initiiert wird.
-
Erlaubt Navigierungen zu nicht-
http
-Protokollen, die im Browser eingebaut sind oder von einer Website registriert wurden. 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, wird dringend davon 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 wenn man dassandbox
-Attribut überhaupt nicht verwenden würde. - Das Sandboxing ist nutzlos, wenn der Angreifer Inhalte außerhalb eines sandboxed
iframe
anzeigen kann — zum Beispiel, wenn der Betrachter den 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>
s mit demsandbox
-Attribut unterliegt der neue Browsing-Kontext denselbensandbox
-Einschränkungen. Dies kann zu Problemen führen — beispielsweise wenn eine Seite, die innerhalb eines<iframe>
s ohne ein gesetztessandbox="allow-forms"
odersandbox="allow-popups-to-escape-sandbox"
Attribut eingebettet ist, eine neue Seite in einem separaten Tab öffnet, dann schlägt das Absenden des Formulars in diesem neuen Browsing-Kontext stillschweigend fehl. src
-
Die URL der einzubettenden Seite. Verwenden Sie einen Wert von
about:blank
, um eine leere Seite einzubetten, die der same-origin policy entspricht. Beachten Sie auch, dass das programmatische Entfernen einessrc
-Attributes eines<iframe>
s (z. B. durchElement.removeAttribute()
) dazu führt, dassabout:blank
im Frame in Firefox (ab Version 65), browsern auf Chromium-Basis und Safari/iOS geladen wird.Hinweis: Die
about:blank
-Seite verwendet die URL des einbettenden Dokuments als Basis-URL, wenn relative 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. beinhaltet, obwohl die meisten davon weggelassen werden können, sodass nur der Body-Inhalt übrig bleibt. Dieses Dokument wirdabout:srcdoc
als Standort haben. Wenn ein Browser dassrcdoc
-Attribut nicht unterstützt, fällt er auf die URL imsrc
-Attribut zurück.Hinweis: Die
about:srcdoc
-Seite verwendet die URL des einbettenden Dokuments als Basis-URL, wenn relative URLs aufgelöst werden, wie z.B. Anker-Links. width
-
Die Breite des Rahmens in CSS-Pixeln. Standard ist
300
.
Veraltete Attribute
Diese Attribute sind veraltet und möglicherweise nicht mehr von allen Benutzeragenten unterstützt. Sie sollten in neuem Inhalt nicht verwendet und aus bestehendem Inhalt entfernt werden.
align
Veraltet-
Die Ausrichtung dieses Elements in Bezug auf den umgebenden Kontext.
frameborder
Veraltet-
Der Wert
1
(der Standard) 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 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 eine Bildlaufleiste für den Frame bereitstellen soll:
Skripting
Inline-Frames, wie die <frame>
-Elemente, sind im window.frames
Pseudo-Array enthalten.
Mit dem DOM-Objekt HTMLIFrameElement
können Skripte auf das window
-Objekt der gezeichneten Ressource über die contentWindow
-Eigenschaft zugreifen. Die contentDocument
-Eigenschaft bezieht sich auf das document
innerhalb des <iframe>
, dasselbe wie contentWindow.document
.
Von innen eines Frames aus kann ein Skript eine Referenz zu seinem übergeordneten Fenster mit window.parent
erhalten.
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 einem anderen Ursprung geladen wurde, einschließlich Skripten innerhalb eines Frames, die auf das Elternteil des Frames zugreifen. Die Cross-Origin-Kommunikation kann mit Window.postMessage()
erreicht werden.
Positionierung und Skalierung
Da es sich um ein ersetztes Element handelt, kann die Position des eingebetteten Dokuments innerhalb seiner Box mit der object-position
Eigenschaft angepasst werden.
Hinweis: Die object-fit
Eigenschaft hat keine Auswirkungen auf <iframe>
-Elemente.
error
- und load
-Ereignisverhalten
Die error
- und load
-Ereignisse, die an <iframe>
s ausgelöst werden, könnten verwendet werden, um den URL-Bereich der lokalen Netzwerkeinstellungen von HTTP-Servern zu durchsuchen. Daher feuern Benutzeragenten aus Sicherheitsgründen das error Ereignis bei <iframe>
s nicht, und das load Ereignis wird immer ausgelöst, selbst wenn das <iframe>
-Inhaltsladen fehlschlägt.
Barrierefreiheit
Personen, die mit unterstützender Technologie wie einem Bildschirmlesegerät navigieren, können das title
-Attribut auf einem <iframe>
verwenden, um dessen Inhalt zu kennzeichnen. 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 zu bestimmen, was sein eingebetteter Inhalt ist. Dieser Kontextwechsel kann verwirrend und zeitaufwändig 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 für iframes: um Inhalte von einer anderen Seite einzubetten. Beispielsweise sind der Live-Sample selbst und das try it Beispiel oben beide <iframe>
-Einbettungen von Inhalten aus einer anderen MDN-Seite.
HTML
<iframe
src="https://example.org"
title="iframe Example 1"
width="400"
height="300">
</iframe>
Ergebnis
Einbetten von Quellcode in ein <iframe>
Dieses Beispiel rendert den Quellcode direkt in einem iframe. Dies kann als Technik verwendet werden, um Skript-Injektion 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 Anker-Links verwenden möchten, die auf Stellen im eingebetteten Inhalt verweisen, müssen Sie about:srcdoc
explizit 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="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 schreibt, wenn man srcdoc
benutzt:
- Schreiben Sie zuerst das HTML aus und escapen Sie alles, was Sie in einem normalen HTML-Dokument escapen würden (wie
<
,>
,&
, etc.). <
und<
stellen dasselbe Zeichen imsrcdoc
-Attribut dar. Daher, um es zu einer tatsächlichen Escape-Sequenz im HTML-Dokument zu machen, ersetzen Sie jedes Kaufmännische Und (&) durch&
. Beispielsweise wird<
zu&lt;
und&
wird zu&amp;
.- 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 generiert wurde, nicht zu&quot;
wird.
Ergebnis
Technische Zusammenfassung
Inhaltskategorien | Fließender Inhalt, Phraseninhalt, eingebetteter Inhalt, interaktiver Inhalt, fühlbarer Inhalt. |
---|---|
Zugelassener Inhalt | Keiner. |
Tag-Auslassung | Keine, sowohl die Start- als auch die End-Tags sind obligatorisch. |
Zugelassene Eltern | Jedes Element, das eingebetteten Inhalt akzeptiert. |
Implizite ARIA-Rolle | Keine entsprechende Rolle |
Zulässige ARIA-Rollen |
application , document ,
img , none ,
presentation
|
DOM-Schnittstelle | [`HTMLIFrameElement`](/de/docs/Web/API/HTMLIFrameElement) |
Spezifikationen
Specification |
---|
HTML Standard # the-iframe-element |
Browser-Kompatibilität
BCD tables only load in the browser