Baseline Widely available *
Das <iframe> HTML Element repräsentiert einen verschachtelten Browsing-Kontext, der eine andere HTML-Seite in die aktuelle einbettet.
<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 Dokument und ermöglicht URL-Navigationen. Die Navigationen jedes eingebetteten Browsing-Kontexts werden in den Sitzungsverlauf des obersten Browsing-Kontexts linearisiert. Der Browsing-Kontext, der die anderen einbettet, wird übergeordneter Browsing-Kontext genannt. Der oberste Browsing-Kontext â derjenige ohne Eltern â ist normalerweise das Browserfenster, dargestellt durch das Window-Objekt.
Warnung: Da jeder Browsing-Kontext eine vollständige Dokumentenumgebung ist, erfordert jedes <iframe> auf einer Seite erhöhte Speicherkapazität und andere Computerressourcen. Theoretisch können Sie so viele <iframe>s verwenden, wie Sie möchten, aber prüfen Sie auf Leistungsprobleme.
Dieses Element beinhaltet die globalen Attribute.
allow
Gibt eine Berechtigungen-Politik für das <iframe> an. Die Politik definiert, welche Funktionen dem <iframe> basierend auf dem Ursprung der Anfrage zur Verfügung stehen (zum Beispiel Zugriff auf Mikrofon, Kamera, Batterie, Web-Share, etc.).
Siehe iframes im Thema Permissions-Policy für Beispiele.
Hinweis: Eine durch das allow-Attribut spezifizierte Berechtigungen-Politik implementiert eine weitere Einschränkung zusätzlich zu der im Permissions-Policy Header angegebenen Politik. Sie ersetzt sie nicht.
allowfullscreen
Auf true gesetzt, wenn das <iframe> den Vollbildmodus aktivieren kann, indem es die Methode requestFullscreen() aufruft.
Hinweis: Dieses Attribut gilt als veraltetes Attribut und wurde 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 gilt als veraltetes Attribut und wurde als allow="payment" neu definiert.
browsingtopics Experimentell Nicht standardisiert
Ein boolesches Attribut, das, falls vorhanden, angibt, dass die für den aktuellen Benutzer ausgewählten Themen 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 Anmeldedaten zu machen, was bedeutet, dass sein Inhalt in einem neuen, kurzlebigen 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 für die Lebensdauer des obersten Dokuments ist. Im Gegenzug können die Cross-Origin-Embedder-Policy (COEP) Einbettungsregeln aufgehoben werden, sodass Dokumente mit gesetztem COEP Drittpartei-Dokumente 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
Lade das iframe sofort beim Laden der Seite (dies ist der Standardwert).
lazy
Verzögere das Laden des iframe, bis es eine berechnete Entfernung vom visuellen Viewport erreicht hat, wie vom Browser definiert. Die Absicht besteht darin, die Netzwerk- und Speicherbandbreite zu vermeiden, die erforderlich ist, um den Frame abzurufen, 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 die Verringerung der anfänglichen Seitenladezeiten.
Hinweis: Das Laden wird nur verzögert, wenn JavaScript aktiviert ist. Dies ist eine MaÃnahme gegen Tracking.
name
Ein ansprechbarer Name für den eingebetteten Browsing-Kontext. Dies kann im target-Attribut der <a>, <form> oder <base> Elemente verwendet werden; das formtarget-Attribut der <input> oder <button> Elemente; oder der windowName Parameter in der window.open() Methode.
referrerpolicy
Gibt an, welcher Referrer gesendet werden soll, wenn die Ressource des Frames abgerufen wird:
no-referrer
Der Referer Header wird nicht gesendet.
no-referrer-when-downgrade
Der Referer Header wird nicht an Ursprünge ohne TLS (HTTPS) gesendet.
origin
Der gesendete Referrer wird auf den Ursprung der verweisenden Seite begrenzt: Schema, 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 begrenzt. Navigationen im selben Ursprung enthalten weiterhin den Pfad.
same-origin
Ein Referrer wird für den gleichen Ursprung gesendet, aber Cross-Origin-Anfragen enthalten keine Referrer-Informationen.
strict-origin
Senden Sie nur den Ursprung des Dokuments als Referrer, wenn das Sicherheitsniveau des Protokolls gleich bleibt (HTTPSâHTTPS), aber senden Sie es nicht an ein weniger sicheres Ziel (HTTPSâHTTP).
strict-origin-when-cross-origin (Standard)
Sende eine vollständige URL bei einer gleichen Ursprungs Anfrage, sende nur den Ursprung, wenn das Sicherheitsniveau des Protokolls gleich bleibt (HTTPSâHTTPS), und sende keinen Header an ein weniger sicheres Ziel (HTTPSâHTTP).
unsafe-url
Der Referrer enthält sowohl den Ursprung als auch den Pfad (aber nicht das Fragment, Passwort oder Benutzername). Dieser Wert ist unsicher, da er Ursprünge und Pfade von TLS-geschützten Ressourcen an unsichere Ursprünge weitergeben kann.
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 leerzeichengetrennte Tokens, 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 eine Navigation, die zum Herunterladen einer Datei führt. Dies funktioniert unabhängig davon, ob der Benutzer auf den Link klickte oder JS-Code dies ohne Benutzereingriff initiierte.
allow-forms
Ermöglicht der Seite das Absenden von Formularen. Wenn dieses Schlüsselwort nicht verwendet wird, wird ein Formular normal 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() und Window.prompt(), während das Ãffnen eines <dialog> unabhängig von diesem Schlüsselwort erlaubt ist. Es ermöglicht auch der Seite die Empfang von BeforeUnloadEvent.
allow-orientation-lock
Ermöglicht der Ressource das Arretieren der Bildschirmorientierung.
allow-pointer-lock
Ermöglicht der Seite die Verwendung der Pointer Lock API.
Ermöglicht Popups (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
Ermöglicht einem sandkäfigierten Dokument das Ãffnen eines neuen Browsing-Kontexts, ohne die Sandboxflags darauf anzuwenden. Dies ermöglicht es z.B. einer Drittanbieter-Werbung sicher gesandkäfigt zu werden, ohne dieselben Einschränkungen auf die Seite zu erzwingen, auf die die Anzeige verweist. Wenn dieses Flag nicht enthalten ist, unterliegt eine weitergeleitete Seite, ein Popup-Fenster oder ein neuer Tab den gleichen Sandboxing-Einschränkungen wie das ursprüngliche <iframe>.
allow-presentation
Ermöglicht Embedders 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 aus einem speziellen Ursprung stammend behandelt, der immer die Same-Origin-Politik nicht erfüllt (was möglicherweise den Zugriff auf Datenspeicherung/Cookies und einige JavaScript-APIs verhindert).
allow-scripts
Ermöglicht der Seite das Ausführen von Skripten (aber keine Popup-Fenster zu erstellen). Wenn dieses Schlüsselwort nicht verwendet wird, ist diese Operation nicht erlaubt.
allow-storage-access-by-user-activation Experimentell
Ermöglicht einem Dokument im <iframe>, die Storage Access API zu verwenden, um Zugriff auf unpartitionierte Cookies anzufordern.
allow-top-navigation
Ermöglicht der Ressource die Navigation des obersten Browsing-Kontexts (desjenigen mit dem Namen _top).
allow-top-navigation-by-user-activation
Ermöglicht der Ressource die Navigation des obersten Browsing-Kontexts, jedoch nur, wenn initiiert durch eine Benutzeraktion.
allow-top-navigation-to-custom-protocols
Ermöglicht Navigationen zu nicht-http-Protokollen, die in den Browser eingebaut sind oder von einer Website registriert wurden. Diese Funktion wird auch durch das Schlüsselwort allow-popups oder allow-top-navigation aktiviert.
Hinweis:
allow-scripts als auch allow-same-origin zu verwenden, da dies dem eingebetteten Dokument ermöglicht, das sandbox-Attribut zu entfernen â was genauso unsicher ist, wie das sandbox-Attribut überhaupt nicht zu verwenden.iframe anzeigen kann â zum Beispiel, wenn der Betrachter das Frame in einem neuen Tab öffnet. Solche Inhalte sollten auch von einem separaten Ursprung bereitgestellt werden, um potenzielle Schäden zu begrenzen.Hinweis: Beim Weiterleiten des Benutzers, Ãffnen eines Popup-Fensters oder Ãffnen eines neuen Tabs von einer eingebetteten Seite innerhalb eines <iframe> mit dem Attribut sandbox, unterliegt der neue Browsing Kontext den gleichen sandbox-Beschränkungen. Dies kann Probleme verursachen â zum Beispiel, wenn eine Seite, die innerhalb eines <iframe> eingebettet ist, das kein sandbox="allow-forms" oder sandbox="allow-popups-to-escape-sandbox"-Attribut enthält, eine neue Webseite in einem separaten Tab öffnet, schlägt das Absenden von Formularen in diesem neuen Browsing-Kontext stillschweigend fehl.
src
Die URL der einzubettenden Seite. Verwenden Sie den Wert about:blank, um eine leere Seite einzubetten, die mit der Same-Origin-Politik übereinstimmt. Beachten Sie auch, dass das programmatische Entfernen eines src-Attributs eines <iframe> (z.B. über Element.removeAttribute()) dazu führt, dass about:blank im Frame geladen wird, in Firefox (ab Version 65), Chromium-basierten Browsern und Safari/iOS.
Hinweis: Die about:blank-Seite verwendet die URL des einbettenden Dokuments als Basis-URL beim Auflösen relativer URLs, z.B. von Ankerlinks.
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. umfasst, obwohl die meisten von ihnen weggelassen werden können, was nur den Körperinhalt hinterlässt. Dieses Dokument hat about:srcdoc als seinen Standort. 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 beim Auflösen relativer URLs, z.B. von Ankerlinks.
width
Die Breite des Frames in CSS-Pixeln. Standard ist 300.
Diese Attribute sind veraltet und werden möglicherweise nicht mehr von allen User Agents unterstützt. Sie sollten sie in neuen Inhalten nicht 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 Standardwert) zeichnet einen Rahmen um diesen Frame. Der Wert 0 entfernt den Rahmen um diesen Frame, aber Sie sollten stattdessen die CSS-Eigenschaft border verwenden, um <iframe>-Rahmen zu steuern.
longdesc Veraltet
Eine URL einer langen Beschreibung des Frame-Inhalts. Aufgrund weitverbreiteten Missbrauchs ist dies nicht hilfreich für nicht-visuelle Browser.
marginheight Veraltet
Der Abstand in Pixeln zwischen dem Inhalt des Frames und seinen oberen und unteren Rahmen.
marginwidth Veraltet
Der Abstand in Pixeln zwischen dem Inhalt des Frames und seinen linken und rechten Rahmen.
scrolling Veraltet
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.
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 bezieht sich auf das document innerhalb des <iframe>, ebenso wie contentWindow.document.
Von innerhalb eines Frames kann ein Skript eine Referenz auf sein Elternfenster mit window.parent erhalten.
Der Skriptzugriff auf den Inhalt eines Frames unterliegt der Same-Origin-Politik. 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 Elternfenster zugreifen. Eine plattformübergreifende Kommunikation kann mit Window.postMessage() erreicht werden.
Als ersetztes Element ermöglicht das <iframe>, die Position des eingebetteten Dokuments innerhalb seines Feldes mit der object-position Eigenschaft anzupassen.
Hinweis: Die object-fit Eigenschaft hat keine Wirkung auf <iframe> Elemente.
error und load Ereignisverhalten
Die error und load Ereignisse, die auf <iframe> ausgelöst werden, könnten verwendet werden, um den URL-Raum der HTTP-Server des lokalen Netzwerks zu untersuchen. Daher lösen Benutzeragenten aus Sicherheitsgründen das error Ereignis auf <iframe> nicht aus, und das load Ereignis wird immer ausgelöst, auch wenn der Inhalt des <iframe> nicht geladen werden kann.
Personen, die mit unterstützender Technologie wie einem Bildschirmleser navigieren, können das title Attribut auf einem <iframe> verwenden, um seinen Inhalt zu beschriften. Der Wert des Titels sollte den eingebetteten Inhalt kurz und 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 dessen eingebetteter Inhalt ist. Dieser Kontextwechsel kann verwirrend und zeitaufwendig sein, besonders für Seiten mit mehreren <iframe> oder wenn Einbettungen interaktiven Inhalt wie Video oder Audio enthalten.
Dieses Beispiel bettet die Seite unter https://example.org in ein iframe ein. Dies ist ein häufiger Anwendungsfall von iframes: Inhalte von einer anderen Website einzubetten. Zum Beispiel sind das Live-Sample selbst und das Try it Beispiel oben beides <iframe> Einbettungen von Inhalten einer anderen MDN-Seite.
<iframe
src="https://example.org"
title="iframe Example 1"
width="400"
height="300">
</iframe>
Dieses Beispiel rendert Quellcode direkt in einem iframe. Dies kann als Technik verwendet werden, um Skriptinjektionen bei der Anzeige von benutzergenerierten Inhalten zu verhindern, 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 Ankerlinks verwenden möchten, die auf Stellen im eingebetteten Inhalt verweisen, müssen Sie about:srcdoc explizit als Basis-URL angeben.
<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>
So schreiben Sie Escape-Sequenzen bei Verwendung von srcdoc:
<, >, &, etc.).< und < repräsentieren exakt dasselbe Zeichen im srcdoc Attribut. Um daraus eine tatsächliche Escape-Sequenz im HTML-Dokument zu machen, ersetzen Sie alle Kaufmannsund-Zeichen (&) durch &. Beispielsweise wird aus < &lt;, und aus & wird &amp;.") durch ", um zu verhindern, dass das srcdoc Attribut vorzeitig terminiert wird (wenn Sie ' verwenden, sollten Sie ' statt dessen verwenden). Dieser Schritt erfolgt nach dem vorherigen, sodass ", das in diesem Schritt generiert wird, nicht zu &quot; wird.application, document, img, none, presentation DOM-Schnittstelle [`HTMLIFrameElement`](/de/docs/Web/API/HTMLIFrameElement) Spezifikationen Browser-Kompatibilität Siehe auch
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.3