Ausführbare HTML-Docs: HTML iframe

Q: Was ist ein iframe in HTML?

Ein (inline frame) ist ein Kasten, der eine eigene Webseite innerhalb der aktuellen anzeigt. Es hat ein eigenes Dokument, eigene Styles und eigene Skripte, deshalb wird es für Einbettungen wie Videos, Karten, Werbung und Code-Vorschauen verwendet.

Q: Warum meldet mein iframe, dass die Website die Verbindung abgelehnt hat?

Die Website sendet einen Header X-Frame-Options oder Content-Security-Policy: frame-ancestors, der anderen Websites verbietet, sie einzubetten. Viele Websites tun das, um Clickjacking zu verhindern. Von deiner Seite aus kannst du das nicht umgehen; nimm die offizielle Einbettungs-URL der Website, falls es eine gibt.

Q: Wie entferne ich den Rahmen eines iframe?

Setz im CSS border: 0. Das alte Attribut frameborder="0" ist obsolet, auch wenn viele kopierte Einbettungscodes es noch enthalten.

Q: Wie mache ich ein iframe responsiv?

Gib ihm im CSS width: 100% und ein aspect-ratio, zum Beispiel aspect-ratio: 16 / 9 für Videos, und lass eine feste Höhe weg. Das iframe skaliert dann mit seinem Container und behält seine Form.

Q: Was macht das Attribut sandbox an einem iframe?

Ein leeres sandbox-Attribut blockiert im Frame Skripte, das Absenden von Formularen, Popups und mehr und behandelt seinen Inhalt so, als käme er von einem eigenen Origin. Dann erlaubst du mit Schlüsselwörtern wie allow-scripts oder allow-forms nur, was die Einbettung braucht.

So verwendest du ein iframe

Ein <iframe> zeigt eine andere Seite in deiner an. Gib ihm die Adresse der Seite in src, einen title, der sie beschreibt, und eine Größe:

<iframe src="https://example.com/" title="Example site" width="600" height="400"></iframe>

Der Frame lädt die Seite als eigenes Dokument, mit eigenen Styles und Skripten. Die Beispiele auf dieser Seite verwenden srcdoc statt src, das das HTML des Frames direkt in das Attribut schreibt. So funktionieren sie, ohne eine andere Website zu laden:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>iframe</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    p { color: #2563eb; font-weight: 600; }
  </style>
</head>
<body>
  <p>This paragraph is in the outer page.</p>
  <iframe title="Inner page" width="320" height="120"
    srcdoc="<h1 style='font: 20px system-ui'>Hello from inside the frame</h1><p>The outer page's CSS does not reach me.</p>">
  </iframe>
</body>
</html>

Der äußere Absatz ist blau und fett; der Absatz im Frame nicht, obwohl dieselbe p-Regel auf der Seite steht. Styles überschreiten die Grenze des Frames nie, in keiner Richtung. Der Standardrahmen und die Standardgröße von 300×150 kommen vom Browser; die Attribute width und height überschreiben die Größe.

Ein YouTube-Video oder eine Karte einbetten

Videoplattformen und Kartendienste geben dir fertigen iframe-Code. Auf YouTube drückst du auf Teilen, dann auf Einbetten:

<iframe width="560" height="315"
  src="https://www.youtube.com/embed/VIDEO_ID"
  title="YouTube video player"
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
  allowfullscreen></iframe>

Bei Google Maps öffnest du den Ort, drückst auf Teilen, dann auf Karte einbetten, und kopierst das iframe genauso. Behalte den title (Screenreader sagen ihn beim Betreten des Frames an) und ersetze feste Größen durch das responsive CSS unten. Das Attribut allow gibt dem Frame Funktionen wie Autoplay oder Vollbild, die für eingebettete Seiten standardmäßig aus sind.

Größe, Rahmen und responsive iframes

Kopierte Einbettungscodes verwenden feste Pixelgrößen, die auf Handys überlaufen. width: 100% plus aspect-ratio lässt den Frame seinen Container füllen und seine Form behalten, und border: 0 entfernt den Standardrahmen:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Responsive iframe</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    .embed {
      width: 100%;
      aspect-ratio: 16 / 9;
      border: 0;
      border-radius: 8px;
      background: #111827;
    }
    .wrap { max-width: 480px; }
  </style>
</head>
<body>
  <div class="wrap">
    <iframe class="embed" title="Video placeholder"
      srcdoc="<body style='margin:0;height:100vh;display:grid;place-items:center;color:#fff;font:16px system-ui'>16:9 frame">
    </iframe>
  </div>
</body>
</html>

Ändere max-width: 480px in einen anderen Wert, und der Frame behält bei jeder Breite seine Form von 16:9. Entferne border: 0, um den Standardrahmen des Browsers zu sehen. Die alten Attribute frameborder, scrolling und marginheight sind obsolet; nimm CSS.

sandbox: einschränken, was der Frame darf

Ein Frame kann wie jede Seite Skripte ausführen, Formulare absenden und Popups öffnen. Das Attribut sandbox nimmt ihm diese Fähigkeiten; ein leeres sandbox blockiert fast alles, und jedes Schlüsselwort gibt eine zurück. Beide Frames unten bekommen dasselbe HTML mit einem kleinen Skript:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>sandbox</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    iframe { width: 240px; height: 70px; border: 2px solid #e5e7eb; border-radius: 6px; }
    code { display: block; margin: 8px 0 4px; }
  </style>
</head>
<body>
  <code>sandbox=""</code>
  <iframe id="a" sandbox="" title="Sandboxed frame"></iframe>
  <code>sandbox="allow-scripts"</code>
  <iframe id="b" sandbox="allow-scripts" title="Frame with scripts allowed"></iframe>
  <script>
    const html = '<p id="s" style="font: 15px system-ui">Scripts are blocked</p>' +
      '<script>document.getElementById("s").textContent = "JavaScript ran";<\/script>';
    document.getElementById('a').srcdoc = html;
    document.getElementById('b').srcdoc = html;
  </script>
</body>
</html>

Der erste Frame behält seinen Platzhaltertext, weil sein Skript nie läuft (die Konsole von Chrome meldet dafür „Blocked script execution“). Nimm sandbox, wann immer du Inhalt einbettest, dem du nicht voll vertraust, etwa von Nutzern geschriebenes HTML, und füg nur die Schlüsselwörter hinzu, die er braucht:

Schlüsselwort	Erlaubt
`allow-scripts`	JavaScript ausführen
`allow-forms`	Formulare absenden
`allow-popups`	`window.open` und Links mit `target="_blank"`
`allow-modals`	`alert()`, `confirm()` und `prompt()`
`allow-same-origin`	Den Inhalt als seinen echten Origin behandeln (Cookies, Speicher)
`allow-top-navigation`	Den ganzen Tab von deiner Seite wegnavigieren

Kombiniere nie allow-scripts und allow-same-origin für Inhalt von deinem eigenen Origin: Das eingebettete Skript könnte dann seine eigene Sandbox entfernen.

Mit einem Frame kommunizieren: postMessage

Die äußere Seite und der Frame sind getrennte Dokumente. Wenn ihre Origins sich unterscheiden, können sie nicht auf das DOM des anderen zugreifen, aber Nachrichten schicken. Tipp eine Nachricht ein und schick sie in den Frame:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>postMessage</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    iframe { display: block; width: 280px; height: 80px; margin-top: 10px; border: 2px solid #2563eb; border-radius: 6px; }
  </style>
</head>
<body>
  <input id="msg" value="Hello, frame">
  <button id="send">Send</button>
  <iframe id="frame" title="Message receiver" srcdoc="
    <p style='font: 15px system-ui' id='got'>Waiting for a message</p>
    <script>
      addEventListener('message', (e) => {
        document.getElementById('got').textContent = 'Received: ' + e.data;
      });
    </script>">
  </iframe>
  <script>
    document.getElementById('send').onclick = () => {
      const frame = document.getElementById('frame');
      frame.contentWindow.postMessage(document.getElementById('msg').value, '*');
    };
  </script>
</body>
</html>

In echtem Code übergibst du statt '*' den genauen Origin des Frames (etwa 'https://maps.example.com') und prüfst beim Empfänger e.origin, damit Nachrichten nur an die erwartete Website gehen und nur von ihr kommen.

Performance und wenn eine Website ablehnt

Lazy Loading. Füg Frames weit unten auf der Seite loading="lazy" hinzu; der Browser lädt sie erst, wenn der Leser in ihre Nähe scrollt. Jedes iframe ist ein vollständiger Seitenaufruf, eine Seite mit vielen Einbettungen wird ohne das also langsam.
„Refused to connect“. Viele Websites (Banken, die meisten sozialen Netzwerke, die Google-Suche) senden einen Header X-Frame-Options oder frame-ancestors, der das Einbetten verbietet, und der Browser zeigt im Frame einen Fehler. Deine Seite kann das nicht umgehen. Nimm die offizielle Einbettungs-URL der Website oder einen Link.
Barrierefreiheit. Setz immer title. Darüber benennt ein Screenreader den Frame, und auf einer Seite mit mehreren Frames ohne Titel findet man sich schwer zurecht.

Häufige Fehler

Ein fehlender title. Screenreader sagen den Frame ohne Namen an.
Feste Breiten aus kopiertem Einbettungscode. Ersetze sie durch width: 100% und aspect-ratio.
Eine normale Videodatei in einen Frame setzen. Für deine eigene .mp4-Datei nimmst du das video-Element; iframes sind für Seiten.
Eingebettetem Inhalt vertrauen. Füg sandbox für alles hinzu, was du nicht selbst geschrieben hast.
Erwarten, dass äußeres CSS den Frame stylt. Style die eingebettete Seite von innen.

Häufig gestellte Fragen

Was ist ein iframe in HTML?

Ein <iframe> (inline frame) ist ein Kasten, der eine eigene Webseite innerhalb der aktuellen anzeigt. Es hat ein eigenes Dokument, eigene Styles und eigene Skripte, deshalb wird es für Einbettungen wie Videos, Karten, Werbung und Code-Vorschauen verwendet.

Wie bette ich ein YouTube-Video mit einem iframe ein?

Wähl auf YouTube Teilen, dann Einbetten, und kopier den Code. Es ist ein iframe, dessen src aus https://www.youtube.com/embed/ und der Video-ID besteht. Behalte die Attribute title und allowfullscreen und nimm CSS aspect-ratio: 16 / 9 mit width: 100%, damit es responsiv wird.

Warum meldet mein iframe, dass die Website die Verbindung abgelehnt hat?

Die Website sendet einen Header X-Frame-Options oder Content-Security-Policy: frame-ancestors, der anderen Websites verbietet, sie einzubetten. Viele Websites tun das, um Clickjacking zu verhindern. Von deiner Seite aus kannst du das nicht umgehen; nimm die offizielle Einbettungs-URL der Website, falls es eine gibt.

Wie entferne ich den Rahmen eines iframe?

Setz im CSS border: 0. Das alte Attribut frameborder="0" ist obsolet, auch wenn viele kopierte Einbettungscodes es noch enthalten.

Wie mache ich ein iframe responsiv?

Gib ihm im CSS width: 100% und ein aspect-ratio, zum Beispiel aspect-ratio: 16 / 9 für Videos, und lass eine feste Höhe weg. Das iframe skaliert dann mit seinem Container und behält seine Form.

Was macht das Attribut sandbox an einem iframe?

Ein leeres sandbox-Attribut blockiert im Frame Skripte, das Absenden von Formularen, Popups und mehr und behandelt seinen Inhalt so, als käme er von einem eigenen Origin. Dann erlaubst du mit Schlüsselwörtern wie allow-scripts oder allow-forms nur, was die Einbettung braucht.

Verwandte Konzepte