HTML <iframe>-Tag

Das <iframe>-Tag (kurz für inline frame) bettet ein anderes HTML-Dokument in die aktuelle Seite ein. Es ist die Standardmethode, um Inhalte von Drittanbietern wie einen Videoplayer, eine Karte, eine Werbeanzeige oder ein abgeschirmtes Widget anzuzeigen. Das eingebettete Dokument wird in einen eigenen Browsing-Kontext geladen, der unabhängig von der Host-Seite ist, aber beide können über JavaScript interagieren, wenn sie denselben Ursprung teilen.

Diese Seite behandelt die <iframe>-Syntax, seine Attribute, die Größenanpassung und das Styling eines Frames, das native Lazy Loading des Browsers sowie die zwei Funktionen, die Sie immer verwenden sollten, wenn Sie Inhalte einbetten, die Sie nicht vollständig kontrollieren: sandbox und allow.

Informationen zum Einbetten von Nicht-HTML-Ressourcen finden Sie auch bei den Tags <embed> und <frame>.

Syntax

Das <iframe>-Tag ist ein normales HTML-Element, das ein schließendes Tag erfordert. Fügen Sie immer ein title-Attribut hinzu (siehe Barrierefreiheit weiter unten).

Beispiel eines HTML-`<iframe>`-Tags

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <iframe src="https://www.w3docs.com" title="W3docs homepage"></iframe>
  </body>
</html>

Probier es selbst »

Um die Größe eines iframe festzulegen, verwenden Sie die Attribute height und width oder nutzen Sie CSS. Die Attributwerte werden standardmäßig in Pixeln angegeben, können aber auch in Prozent angegeben werden.

Beispiel eines HTML-`<iframe>`-Tags mit den Attributen Height und Width

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <iframe src="https://www.w3docs.com" title="W3docs homepage" width="80%" height="300"></iframe>
  </body>
</html>

Probier es selbst »

Moderne Browser wenden keinen Standard-Rahmen auf iframes an. Sie können trotzdem die CSS-Eigenschaft border verwenden, um den Frame bei Bedarf zu gestalten.

Beispiel eines HTML-`<iframe>`-Tags mit der CSS-Eigenschaft border

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <iframe src="https://www.w3docs.com" title="W3docs homepage" width="80%" height="300" style="border: none"></iframe>
  </body>
</html>

Probier es selbst »

Inline-HTML mit srcdoc einbetten

Anstatt mit src auf eine URL zu verweisen, können Sie das gesamte Markup des Frames inline mit dem Attribut srcdoc angeben. Das ist praktisch für Vorschauen, abgeschirmte Snippets oder generierten HTML-Code, wenn Sie keine separate Datei oder URL haben. Wenn beide Attribute vorhanden sind, hat srcdoc Vorrang (wobei src als Fallback für Browser verwendet wird, die srcdoc nicht unterstützen).

<iframe
  title="Inline greeting"
  srcdoc="<!DOCTYPE html><html><body><h1>Hello from srcdoc!</h1></body></html>">
</iframe>

Da das Markup in einem HTML-Attribut enthalten ist, müssen alle wörtlichen doppelten Anführungszeichen darin als " und alle kaufmännischen Und-Zeichen als & geschrieben werden.

Lazy Loading für offscreen iframes

Das Attribut loading ermöglicht es dem Browser, das Laden eines iframe aufzuschieben, bis dieser kurz vor dem Einrollen in den viewport steht. Natives Lazy Loading ist mittlerweile ein stabiler Webstandard, der seit etwa 2020 von allen modernen Browsern unterstützt wird, sodass Sie für diesen häufigen Anwendungsfall keine JavaScript-Bibliothek mehr benötigen.

Unterstützte Werte:

lazy — schiebt das Laden auf, bis der iframe in der Nähe des viewport ist. Empfohlen für offscreen-Frames (Videoplayer, Karten, Werbeflächen), die beim ersten Laden nicht sichtbar sind.
eager — lädt die Ressource sofort, unabhängig von ihrer Position. Dies ist der Standardwert.

<iframe src="video-player.html" title="Promo video" loading="lazy"></iframe>

Das Aufschieben von offscreen-iframes reduziert das anfängliche Seitengewicht, beschleunigt das erste Laden und verhindert, dass die Bandbreite des Nutzers für Inhalte verbraucht wird, zu denen er möglicherweise nie scrollt.

Inhalte mit dem sandbox-Attribut einschränken

Standardmäßig kann eine eingebettete Seite Skripte ausführen, Formulare absenden, Pop-ups öffnen, die übergeordnete Seite navigieren und Cookies für ihren eigenen Ursprung lesen. Wenn Sie Inhalte einbetten, die Sie nicht vollständig kontrollieren, ist das ein Sicherheitsrisiko. Das Attribut sandbox wendet eine strenge Reihe von Einschränkungen an und lässt Sie dann nur die Funktionen wieder aktivieren, die der Frame tatsächlich benötigt, indem Sie durch Leerzeichen getrennte Token auflisten.

Ein leeres sandbox (d.h. sandbox="") wendet alle Einschränkungen an: keine Skripte, keine Formulare, keine Pop-ups, keine Plugins, und der Inhalt wird in einen einzigartigen opaken Ursprung gezwungen. Anschließend können Sie es Token für Token lockern:

Token	Gibt wieder frei
`allow-forms`	Formularabsendung.
`allow-same-origin`	Behandlung des Inhalts als gleichrangiger Ursprung (damit er eigene Cookies und Speicher nutzen kann).
`allow-scripts`	Ausführen von JavaScript.
`allow-popups`	Öffnen neuer Fenster oder Tabs (z.B. `window.open`, `target="_blank"`).
`allow-downloads`	Auslösen von Datei-Downloads.
`allow-modals`	Anzeigen von modalen Dialogen wie `alert()`, `confirm()` und `prompt()`.
`allow-top-navigation`	Navigieren des übergeordneten Browsing-Kontexts (der Elternseite).
`allow-pointer-lock`	Verwenden der Pointer Lock API.

Kombinieren Sie allow-scripts und allow-same-origin mit Bedacht: Wenn Sie beiden Berechtigungen für Inhalte aus einem anderen Ursprung gewähren, kann dieser Inhalt effektiv seine eigene Sandbox entfernen – tun Sie dies daher nur für Inhalte, denen Sie vertrauen.

Beispiel eines abgeschirmten `<iframe>`

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <iframe
      src="https://example.com/widget.html"
      title="Third-party widget"
      sandbox="allow-scripts allow-forms">
    </iframe>
  </body>
</html>

Hier darf das Widget Skripte ausführen und Formulare absenden, kann aber nicht die Elternseite navigieren, Pop-ups öffnen oder auf Cookies und Speicher desselben Ursprungs zugreifen.

Browser-Funktionen mit dem allow-Attribut freigeben

Während sandbox die grundlegenden Browsing-Kontext-Einschränkungen steuert, legt das Attribut allow eine Permissions Policy für den Frame fest – es entscheidet, welche leistungsstarken Browser-Funktionen (Kamera, Mikrofon, Geolocation, Vollbild, Autoplay usw.) das eingebettete Dokument verwenden darf. Die meisten dieser Funktionen sind in Cross-Origin-iframes blockiert, es sei denn, Sie aktivieren sie mit allow.

<iframe
  src="https://example.com/player.html"
  title="Video player"
  allow="fullscreen; camera 'none'">
</iframe>

Dies gewährt dem Frame die Berechtigung, in den Vollbildmodus zu wechseln, während der Zugriff auf die Kamera ausdrücklich verweigert wird. Sie können eine Funktion auf bestimmte Ursprünge beschränken, z.B. allow="geolocation 'self' https://maps.example.com".

Barrierefreiheit

Jedes <iframe> sollte ein title-Attribut haben, das kurz den Zweck des Frames beschreibt. Screenreader lesen den Titel vor, damit Benutzer verstehen, was der eingebettete Inhalt ist, bevor sie ihn betreten. Ohne einen Titel wird der Frame nur als unbeschriftetes „frame" angekündigt, was verwirrend ist.

<iframe src="map.html" title="Map showing our office location"></iframe>

Verwenden Sie für jeden iframe auf der Seite einen prägnanten, eindeutigen Titel (z.B. „Kundenfeedback-Umfrage" anstatt nur „iframe").

Wenn eine Seite sich weigert, in einem Frame angezeigt zu werden

Das Einbetten gelingt nicht immer: Die Seite, auf die src verweist, kann es ablehnen, innerhalb eines Frames angezeigt zu werden. Websites tun dies, um Clickjacking zu verhindern, bei dem ein Angreifer einen versteckten Frame über ihre eigene Benutzeroberfläche legt. Eine Seite kann das Einbetten in einem Frame auf zwei Arten ablehnen:

Der veraltete HTTP-Antwort-Header X-Frame-Options (DENY oder SAMEORIGIN).
Die moderne Content-Security-Policy-Direktive frame-ancestors, z.B. Content-Security-Policy: frame-ancestors 'self'.

Wenn eine Zielseite einen dieser Header sendet, zeigt Ihr iframe einen leeren oder fehlerhaften Frame anstelle des Inhalts – das ist ein erwartetes Verhalten und kein Fehler in Ihrem Markup. Viele große Websites (Banken, soziale Netzwerke) blockieren das Einbetten aus Sicherheitsgründen, weshalb Sie diese nicht direkt einbetten können.

Attribute

Attribut	Wert	Beschreibung
align	left right top bottom middle	Gibt an, wie Text ausgerichtet und um den Frame gebrochen wird. Wird in HTML5 nicht unterstützt.
allow	string	Legt eine Richtlinie fest, die bestimmte Funktionen im iframe erlaubt oder einschränkt.
allowfullscreen		Definiert, dass der Frame im Vollbildmodus geöffnet werden kann.
frameborder	1 0	Definiert, ob der iframe-Rahmen um den Frame angezeigt werden soll oder nicht. Wird in HTML5 nicht unterstützt.
height	pixels	Definiert die Höhe des Frames (Standard-Höhe 150px).
longdesc	URL	Definiert eine Seite mit einer langen Beschreibung des Inhalts. Wird in HTML5 nicht unterstützt.
marginheight	pixels	Definiert den oberen und unteren Rand des Frames. Wird in HTML5 nicht unterstützt.
marginwidth	pixels	Definiert den linken und rechten Rand des Frames. Wird in HTML5 nicht unterstützt.
loading	eager lazy	Legt fest, ob der Frame sofort geladen oder bis in die Nähe des viewport aufgeschoben wird.
name	text	Definiert den Namen des Frames (ein Ziel für Links und Formulare).
referrerpolicy	keyword	Legt fest, welche Referrer-Informationen mit der Anfrage gesendet werden. Nimmt ein Schlüsselwort wie `no-referrer`, `origin` oder `strict-origin-when-cross-origin` entgegen – keine URL.
sandbox	token list	Wendet zusätzliche Einschränkungen auf den Inhalt des Frames an. Leer (`sandbox=""`) wendet alle Einschränkungen an; fügen Sie durch Leerzeichen getrennte Token wie `allow-scripts` oder `allow-forms` hinzu, um sie zu lockern. Siehe den Abschnitt zu sandbox.
scrolling	yes no auto	Definiert, ob die Bildlaufleiste angezeigt werden soll oder nicht. Wird in HTML5 nicht unterstützt.
seamless	seamless	Gibt an, dass der Inhalt des angehängten Dokuments als Teil des übergeordneten Dokuments angezeigt werden soll.
src	URL	Gibt die Adresse des Dokuments an, dessen Inhalt in den Frame geladen wird.
srcdoc	HTML code	Speichert den Inhalt des Frames direkt im Attribut, anstatt eine separate URL zu laden.
title	text	Beschreibt den Inhalt des Frames für unterstützende Technologien. Sollte bei jedem iframe vorhanden sein.
width	pixels	Definiert die Breite des Frames. (Standard-Breite ist 300px).

Das <iframe>-Tag unterstützt die globalen Attribute und die Event-Attribute.

Übungen

Übung

Welches Attribut sollte bei jedem iframe vorhanden sein, damit Screenreader seinen Zweck ankündigen können?

title: Beschreibt den Inhalt des Frames für unterstützende Technologien.name: Legt den Namen des iframe fest.align: Ein veraltetes HTML5-Attribut, das den Frame links oder rechts positionierte.src: Gibt die URL des einzubettenden Dokuments an.

Syntax

Beispiel eines HTML-<iframe>-Tags

Beispiel eines HTML-<iframe>-Tags mit den Attributen Height und Width

Beispiel eines HTML-<iframe>-Tags mit der CSS-Eigenschaft border

Inline-HTML mit srcdoc einbetten

Lazy Loading für offscreen iframes

Inhalte mit dem sandbox-Attribut einschränken

Beispiel eines abgeschirmten <iframe>

Browser-Funktionen mit dem allow-Attribut freigeben

Barrierefreiheit

Wenn eine Seite sich weigert, in einem Frame angezeigt zu werden

Attribute

Verwandte Tags

Übungen

Beispiel eines HTML-`<iframe>`-Tags

Beispiel eines HTML-`<iframe>`-Tags mit den Attributen Height und Width

Beispiel eines HTML-`<iframe>`-Tags mit der CSS-Eigenschaft border

Beispiel eines abgeschirmten `<iframe>`