<iframe> HTML 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-Kontexts werden in die Sitzungshistorie des obersten Browsing-Kontexts linearisiert. Der Browsing-Kontext, der die anderen einbettet, wird als Eltern-Browsing-Kontext bezeichnet. Der oberste Browsing-Kontext derjenige ohne Eltern ist normalerweise das Browserfenster, das durch das Window-Objekt reprsentiert wird.

Attribute

Dieses Element schliet die globalen Attribute ein.

allow

Gibt eine Permissions Policy fr das <iframe> an. Die Richtlinie definiert, welche Funktionen fr das <iframe> verfgbar sind (zum Beispiel Zugriff auf das Mikrofon, die Kamera, die Batterie, Web-Sharing usw.) basierend auf dem Ursprung der Anfrage.

Beispiele finden Sie unter iframes im Thema Permissions-Policy.

Hinweis: Eine durch das allow-Attribut festgelegte Permissions Policy stellt eine weitere Einschrnkung zustzlich zu der im Permissions-Policy-Header angegebenen Richtlinie dar. Sie ersetzt diese nicht.

allowfullscreen

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

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

allowpaymentrequest

Auf true setzen, 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

Ein boolesches Attribut, das, falls vorhanden, angibt, dass die ausgewhlten Themen fr den aktuellen Benutzer mit der Anfrage fr die Quelle des <iframe>s gesendet werden sollen.

credentialless

Auf true gesetzt, wird das <iframe> ohne Anmeldeinformation, was bedeutet, dass sein Inhalt in einem neuen, flchtigen Kontext geladen wird. Es hat keinen Zugriff auf das Netzwerk, Cookies oder Speicherdaten, die mit seinem Ursprung verbunden sind. Es verwendet einen neuen Kontext lokal zur Lebensdauer des obersten Dokuments. Im Gegenzug knnen die Einbettungsregeln des Cross-Origin-Embedder-Policy (COEP) aufgehoben werden, sodass Dokumente mit gesetztem COEP Drittanbieterdokumente einbetten knnen, die dies nicht tun. Weitere Einzelheiten finden Sie unter IFrame credentialless.

csp

Eine Content Security Policy, die fr die eingebettete Ressource erzwungen wird. Einzelheiten finden Sie unter HTMLIFrameElement.csp.

height

Die Hhe des Rahmens in CSS-Pixeln. Standardwert ist 150.

loading

Gibt an, wann der Browser das <iframe> laden soll:

eager

Ldt das <iframe> sofort beim Seitenaufruf (dies ist der Standardwert).

lazy

Verzgert das Laden des <iframe>, bis es eine berechnete Entfernung vom visuellen Viewport erreicht, wie vom Browser definiert. Die Absicht besteht darin, das Netzwerk und die Speicherbandbreite, die zum Abrufen des Rahmens erforderlich sind, nicht zu verwenden, bis der Browser vernnftigerweise sicher ist, dass es bentigt wird. Dies verbessert die Leistung und die Kosten in den meisten typischen Anwendungsfllen, insbesondere durch Reduzierung der anfnglichen Seitenladezeiten.

Das Laden wird nur verzgert, wenn JavaScript aktiviert ist. Dies ist eine Anti-Tracking-Manahme, weil, wenn ein Benutzeragent verzgertes Laden untersttzte, wenn Skripting deaktiviert ist, es trotzdem mglich wre, dass eine Seite die ungefhre Scrollposition eines Benutzers whrend einer Sitzung verfolgt, indem strategisch iframes im Markup der Seite platziert werden, so dass ein Server nachverfolgen kann, wie viele iframes angefordert werden und wann.

name

Ein ansprechbarer Name fr den eingebetteten Browsing-Kontext. Dieser kann im target-Attribut der <a>, <form>, oder <base>-Elemente; im formtarget-Attribut der <input> oder <button>-Elemente; oder im windowName-Parameter in der -Methode verwendet werden. Zustzlich wird der Name zu einer Eigenschaft der Window und Document-Objekte, die einen Verweis auf das eingebettete Fenster oder das Element selbst enthalten.

privateToken

Enthlt eine string-Darstellung eines Optionsobjekts, das einen Vorgang mit einem private state token darstellt; dieses Objekt hat die gleiche Struktur wie die RequestInit-Diktionreigenschaft privateToken. IFrames mit diesem Attribut knnen Operationen wie das Ausgeben oder Einlsen von Token einleiten, wenn ihr eingebetteter Inhalt geladen ist.

referrerpolicy

Gibt an, welchen Referrer beim Abrufen der Ressource des Rahmens 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 Referrer wird auf den Ursprung der verweisenden Seite beschrnkt: ihr Schema, Host und Port.

origin-when-cross-origin

Der an andere Ursprnge gesendete Referrer wird auf das Schema, den Host und den Port beschrnkt. Navigationen im gleichen Ursprung umfassen weiterhin den Pfad.

same-origin

Ein Referrer wird fr same origin gesendet, aber Anfragen mit verschiedenen Ursprngen enthalten keine Referrer-Informationen.

strict-origin

Sendet den Ursprung des Dokuments als Referrer nur, wenn das Sicherheitsniveau des Protokolls gleich bleibt (HTTPSHTTPS), sendet ihn jedoch nicht an ein weniger sicheres Ziel (HTTPSHTTP).

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

Sendet eine vollstndige URL bei der Durchfhrung einer Anfrage im gleichen Ursprung, sendet nur den Ursprung, wenn das Sicherheitsniveau des Protokolls gleich bleibt (HTTPSHTTPS), und sendet keinen Header an ein weniger sicheres Ziel (HTTPSHTTP).

unsafe-url

Der Referrer wird den Ursprung und den Pfad enthalten (jedoch nicht das Fragment, Passwort oder Benutzername). Dieser Wert ist unsicher, da er Ursprnge und Pfade von TLS-geschtzten Ressourcen an unsichere Ursprnge leakt.

sandbox

Steuert die Beschrnkungen, die auf den im <iframe> eingebetteten Inhalt angewendet werden. Der Wert des Attributs kann entweder leer sein, um alle Beschrnkungen anzuwenden, oder durch Leerzeichen getrennte Token enthalten, um bestimmte Beschrnkungen aufzuheben:

allow-downloads

Ermglicht das Herunterladen von Dateien ber ein <a> oder <area>-Element mit dem download Attribut sowie ber die Navigation, die zu einem Download einer Datei fhrt. Dies funktioniert unabhngig davon, ob der Benutzer auf den Link geklickt hat oder JS-Code es ohne Benutzerinteraktion initiiert hat.

allow-forms

Ermglicht der Seite das Senden von Formularen. Wenn dieses Schlsselwort nicht verwendet wird, wird ein Formular normal angezeigt, aber das Absenden lst keine Eingabevalidierung aus, sendet Daten an einen Webserver oder schliet einen Dialog.

allow-modals

Ermglicht der Seite das ffnen von Modal-Fenstern durch Window.alert(), Window.confirm(), Window.print() und Window.prompt(), whrend das ffnen eines <dialog> unabhngig von diesem Schlsselwort erlaubt ist. Es ermglicht der Seite auch den Empfang des BeforeUnloadEvent-Ereignisses.

allow-orientation-lock

Ermglicht der Ressource das Sperren der Bildschirmausrichtung.

allow-pointer-lock

Ermglicht der Seite die Nutzung der Pointer Lock API.

allow-popups

Ermglicht Pop-ups (die zum Beispiel durch oder target="_blank" erstellt werden). Wenn dieses Schlsselwort nicht verwendet wird, schlgt eine solche Funktionalitt stillschweigend fehl.

allow-popups-to-escape-sandbox

Ermglicht einem sandboxed Dokument das ffnen eines neuen Browsing-Kontexts, ohne die Sandboxing-Flags darauf zu erzwingen. Dies ermglicht zum Beispiel, dass eine Drittanbieter-Anzeige sicher in einem Sandbox-Modus angezeigt wird, ohne dass dieselben Einschrnkungen auf die Seite angewendet werden, zu der die Anzeige verlinkt. Wenn diese Markierung nicht enthalten ist, unterliegt eine umgeleitete Seite, ein Popup-Fenster oder ein neuer Tab denselben Sandbox-Beschrnkungen wie das ursprngliche <iframe>.

allow-presentation

Ermglicht Einbettungen zu kontrollieren, ob ein iframe eine Prsentationssitzung starten kann.

allow-same-origin

Wird dieses Token nicht verwendet, wird die Ressource als eine Sonderherkunft betrachtet, die immer an der gleichen Ursprungsrichtlinie scheitert (mglicherweise den Zugriff auf Datenspeicherung/Cookies und einige JavaScript-APIs verhindernd).

Hinweis: Wenn allow-same-origin vorhanden ist, kann ein gleichartiges bergeordnetes Dokument immer noch auf das DOM des iframes zugreifen und damit interagieren, selbst wenn allow-scripts nicht gesetzt ist. Das allow-scripts-Token kontrolliert nur die Skriptausfhrung im eingebetteten Browsing-Kontext und beeinflusst nicht den DOM-Zugriff des bergeordneten Dokuments.

allow-scripts

Ermglicht der Seite das Ausfhren von Skripten (aber nicht das Erstellen von Pop-up-Fenstern). Wenn dieses Schlsselwort nicht verwendet wird, ist dieser Vorgang nicht erlaubt.

allow-storage-access-by-user-activation

Erlaubt ein im <iframe> geladenes Dokument die Nutzung der Storage Access API, um Zugriff auf unpartitionierte Cookies anzufordern.

allow-top-navigation

Ermglicht der Ressource die Navigation des obersten Browsing-Kontexts (desjenigen, der als _top benannt ist).

allow-top-navigation-by-user-activation

Ermglicht der Ressource die Navigation des obersten Browsing-Kontexts, aber nur, wenn dies durch eine Benutzeraktion initiiert wird.

allow-top-navigation-to-custom-protocols

Erlaubt Navigationen zu nicht-http Protokollen, die im Browser eingebaut sind oder von einer Webseite registriert wurden. Diese Funktion wird auch durch das allow-popups oder allow-top-navigation Schlsselwort aktiviert.

Hinweis:

• Wenn das eingebettete Dokument den gleichen Ursprung wie die einbettende Seite hat, wird dringend davon abgeraten, sowohl allow-scripts als auch allow-same-origin zu verwenden, da dies dem eingebetteten Dokument ermglicht, das sandbox Attribut zu entfernen wodurch es nicht sicherer ist als die Nichtverwendung des sandbox Attributs.
• Sandboxing ist nutzlos, wenn der Angreifer Inhalte auerhalb eines sandboxed iframe anzeigen kann beispielsweise, wenn der Betrachter den Frame in einem neuen Tab ffnet. Solche Inhalte sollten ebenfalls von einem separaten Ursprung bereitgestellt werden, um potenziellen Schaden zu begrenzen.

Hinweis: Bei der Weiterleitung des Benutzers, dem ffnen eines Popup-Fensters oder dem ffnen eines neuen Tabs von einer auf einer eingebetteten Seite innerhalb eines <iframe>s mit dem Attribut sandbox wird der neue Browsing-Kontext denselben sandbox-Beschrnkungen unterzogen. Dies kann Probleme hervorrufen zum Beispiel, wenn eine Seite innerhalb eines <iframe>s ohne gesetztes sandbox="allow-forms" oder sandbox="allow-popups-to-escape-sandbox"-Attribut darauf eine neue Seite in einem separaten Tab ffnet, schlgt die Formularbermittlung in diesem neuen Browsing-Kontext stillschweigend fehl.

src

Die URL der Seite zum Einbetten. Verwenden Sie einen Wert von about:blank, um eine leere Seite einzubetten, die sich an die Sicherheitspolitik desselben Ursprungs hlt. Beachten Sie auch, dass das Entfernen eines <iframe>-src-Attributs programmgesteuert (z. B. ber Element.removeAttribute()) dazu fhrt, dass about: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, wie Anker-Links, aufgelst werden.

srcdoc

Inline-HTML zum Einbetten, das das src-Attribut berschreibt. Sein Inhalt sollte der Syntax eines vollstndigen HTML-Dokuments entsprechen, das die Doctype-Direktive, <html>, <body>-Tags usw. umfasst, obwohl die meisten davon weggelassen werden knnen, sodass nur der Body-Inhalt bleibt. Dieses Dokument hat about:srcdoc als seinen Standort. Wenn ein Browser das srcdoc-Attribut nicht untersttzt, wird auf die URL im src-Attribut zurckgegriffen.

Hinweis: Die about:srcdoc-Seite verwendet die URL des einbettenden Dokuments als Basis-URL, wenn relative URLs, wie Anker-Links, aufgelst werden.

width

Die Breite des Rahmens in CSS-Pixeln. Standardwert ist 300.

Veraltete Attribute

Diese Attribute sind veraltet und werden mglicherweise nicht mehr von allen Benutzeragenten untersttzt. Sie sollten sie in neuem Inhalt nicht verwenden und versuchen, sie aus bestehendem Inhalt zu entfernen.

align

Die Ausrichtung dieses Elements in Bezug auf den umgebenden Kontext.

frameborder

Der Wert 1 (der Standardwert) 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 steuern.

longdesc

Eine URL einer langen Beschreibung des Rahmeninhalts. Aufgrund weitverbreiteten Missbrauchs ist dies nicht hilfreich fr nicht-visuelle Browser.

marginheight

Der Abstand in Pixeln zwischen dem Rahmeninhalts und seinen oberen und unteren Rndern.

marginwidth

Der Abstand in Pixeln zwischen dem Rahmeninhalts und seinen linken und rechten Rndern.

scrolling

Gibt an, wann der Browser fr das Frame eine Bildlaufleiste bereitstellen soll:

auto

Nur, wenn der Inhalt des Frames grer als dessen Abmessungen ist.

yes

Bildlaufleiste immer anzeigen.

no

Bildlaufleiste nie anzeigen.

Skripting

Inline-Frames, wie <frame>-Elemente, sind im window.frames Pseudo-Array enthalten.

Mit dem DOM-Objekt HTMLIFrameElement knnen Skripte auf das window-Objekt der eingerahmten Ressource ber die contentWindow-Eigenschaft zugreifen. Die contentDocument-Eigenschaft bezieht sich auf das document im <iframe>, gleich wie contentWindow.document.

Vom Inneren eines Frames kann ein Skript ber window.parent eine Referenz zu seinem bergeordneten Fenster erhalten.

Skriptzugriff auf den Inhalt eines Frames unterliegt der Same-Origin-Policy. Skripte knnen nicht auf die meisten Eigenschaften in anderen window-Objekten zugreifen, wenn das Skript von einem anderen Ursprung geladen wurde, einschlielich Skripten innerhalb eines Frames, die auf das bergeordnete Element zugreifen. Cross-Origin-Kommunikation kann mit Window.postMessage() erreicht werden.

Top-Navigation in Cross-Origin-Frames

Skripte, die in einem Frame mit demselben Ursprung ausgefhrt werden, knnen auf die Window.top-Eigenschaft zugreifen und window.top.location setzen, um die oberste Seite an einen neuen Ort umzuleiten. Dieses Verhalten wird als "Top-Navigation" bezeichnet.

Ein Cross-Origin-Frame darf die oberste Seite nur umleiten, wenn der Frame ber eine Sticky Activation verfgt. Wenn eine Top-Navigation blockiert ist, knnen Browser entweder um die Erlaubnis des Benutzers bitten, um die Seite umzuleiten, oder den Fehler in der Entwicklerkonsole melden (oder beides). Diese Einschrnkung durch Browser wird Framebusting Intervention genannt. Dies bedeutet, dass ein Cross-Origin-Frame die oberste Seite nicht sofort umleiten kann der Benutzer muss zuvor mit dem Frame interagiert oder die Erlaubnis erteilt haben, umzuleiten.

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 Top-Navigation-Berechtigungen vererbt werden, sodass ein verschachtelter Frame nur dann eine Top-Navigation durchfhren kann, wenn seine bergeordneten Frames dies ebenfalls drfen.

Positionierung und Skalierung

Als ersetztes Element ermglicht das <iframe> die Anpassung der Position des eingebetteten Dokuments innerhalb seines Rahmens mithilfe der object-position-Eigenschaft.

Fehler- und Laden-Ereignisverhalten

Die Fehler- und Laden-Ereignisse, die auf <iframe>s ausgelst werden, knnten verwendet werden, um den URL-Bereich der lokalen Netzwerk-HTTP-Server zu sondieren. Daher lsen Benutzeragenten als Sicherheitsmanahme nicht das Fehler-Ereignis auf <iframe>s aus, und das Laden-Ereignis wird immer ausgelst, selbst wenn der <iframe>-Inhalt nicht geladen werden kann.

Reaktionsfhige <iframe>-Grenanpassung

Aus Sicherheits- und Datenschutzgrnden geben <iframe>-Elemente standardmig keine Informationen ber die Gre des Inhalts im Dokument, das sie einbetten, an das bergeordnete Dokument preis.

Um die reaktionsfhige Grenanpassung von <iframe>-Elementen basierend auf ihrem Inhalt zu ermglichen, kann der Tag <meta name="responsive-embedded-sizing"> in ein eingebettetes Dokument aufgenommen werden, um es einzuwilligen, die Greninformationen mit dem bergeordneten Dokument zu teilen. Die frame-sizing CSS-Eigenschaft kann dann auf das <iframe> gesetzt werden, damit es die gleiche horizontale oder vertikale Gre wie die tatschliche Inhaltsgre des eingebetteten Dokuments annimmt. Dies stellt sicher, dass <iframe>-Inhalte nahtlos in ihrer Einbetzung passen und unntige Bildlaufleisten vermieden werden.

Um die Gre des <iframe> dynamisch anzupassen, wenn sich das eingebettete Dokument in der Layoutgre ndert, knnen Sie die Methode Window.requestResize() vom eingebetteten Dokument aus aufrufen, um eine aktualisierte Gre zu melden.

Barrierefreiheit

Personen, die mit untersttzender Technologie navigieren, wie zum Beispiel ein Bildschirmlesegert, knnen das title-Attribut auf einem <iframe> verwenden, um seinen Inhalt zu beschriften. Der Wert des Titels sollte den eingebetteten Inhalt kurz beschreiben:

<iframe
  title="Wikipedia page for Avocados"
  src="https://en.wikipedia.org/wiki/Avocado"></iframe>

Ohne diesen Titel mssen sie in das <iframe> navigieren, um zu bestimmen, was sein eingebetteter Inhalt ist. Dieser Kontextwechsel kann verwirrend und zeitraubend sein, insbesondere fr 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 ein iframe ein. Dies ist eine bliche Verwendungsweise von iframes: um Inhalte von einer anderen Seite einzubetten. Beispielsweise sind die Live-Demonstration selbst und das probieren Sie es aus-Beispiel oben beide <iframe>-Einbettungen von Inhalten einer anderen MDN-Site.

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 direkt Quellcode in einem iframe. Dies kann als Technik verwendet werden, um Skriptinjektionen zu verhindern, wenn von Benutzern generierte Inhalte angezeigt werden, wenn sie mit dem sandbox-Attribut kombiniert werden.

Beachten Sie, dass beim Verwenden von srcdoc alle relativen URLs im eingebetteten Inhalt relativ zur URL der einbettenden Seite aufgelst werden. Wenn Sie Anker-Links verwenden mchten, die auf Stellen im eingebetteten Inhalt verweisen, mssen 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=&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 wird gezeigt, wie Escape-Sequenzen beim Verwenden von srcdoc geschrieben werden:

• Schreiben Sie zuerst das HTML aus, wobei Sie alles entschrfen, was Sie in einem normalen HTML-Dokument entschrfen wrden (wie <, >, & usw.).
• < und < stellen im srcdoc-Attribut genau dasselbe Zeichen dar. Um daraus also eine echte Escape-Sequenz im HTML-Dokument zu machen, ersetzen Sie alle kaufmnnischen Und-Zeichen (&) durch &. Zum Beispiel wird < zu <, und & zu &.
• Ersetzen Sie alle Anfhrungszeichen (") durch ", um zu verhindern, dass das srcdoc-Attribut vorzeitig beendet wird (wenn Sie stattdessen ' verwenden, sollten Sie ' mit ' ersetzen). Dieser Schritt erfolgt nach dem vorherigen, sodass ", das in diesem Schritt erzeugt wird, nicht zu " wird.

Ergebnis

Technische Zusammenfassung

Spezifikationen

Browser-Kompatibilitt

Siehe auch

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