iframe: Die wichtigsten Funktionen und Anwendungen

Du willst Videos, Karten oder ganze Webseiten direkt in deine eigene Seite einbauen, ohne alles neu zu erstellen? Genau dafür nutzt du ein iframe.

Ein iframe ist ein HTML-Element, mit dem du eine externe Webseite oder Inhalte wie Videos und Karten direkt in deine eigene Seite einbettest.

Mit einem iframe lädst du Inhalte aus einer anderen Quelle in ein eigenes Fenster innerhalb deiner Seite. Du steuerst Größe, Verhalten und bestimmte Rechte über klare Attribute im HTML-Code. So behältst du die Kontrolle, auch wenn der Inhalt nicht von dir stammt.

In diesem Artikel erfährst du, wie ein iframe technisch aufgebaut ist, welche Attribute wirklich wichtig sind und wann sich der Einsatz lohnt. Außerdem bekommst du klare Hinweise zu Design, Barrierefreiheit und Sicherheit, damit du iframes bewusst und sauber einsetzt.

Was ist ein iframe?

Ein iframe ist ein HTML-Element, mit dem du eine andere Webseite direkt in deine eigene Seite einbindest. Du nutzt dafür das <iframe>-Tag, um ein externes Dokument in einem eigenen Bereich anzuzeigen.

Definition von inline frame

Ein inline frame (kurz: iframe) ist ein Element in HTML, das einen sogenannten nested browsing context erstellt. Das bedeutet: Innerhalb deiner Seite öffnet sich ein eigener Anzeigebereich mit eigenem Dokument.

Du bindest damit eine externe URL ein, ohne den Hauptcode deiner Seite zu verändern. Der eingebettete Inhalt läuft getrennt von deinem restlichen HTML.

Das <iframe>-Tag sieht zum Beispiel so aus:

<iframe src="https://example.com"></iframe>

Wichtige Attribute sind:

• src – legt die Quelle fest
• width und height – bestimmen die Größe
• title – verbessert die Barrierefreiheit
• sandbox – schränkt Funktionen aus Sicherheitsgründen ein

Mit einem HTML iframe kannst du also ein anderes Dokument anzeigen, ohne dass Nutzer deine Seite verlassen.

iframe im Vergleich zu anderen Einbettungselementen

Du kannst Inhalte auch mit anderen HTML-Elementen einbetten, etwa mit <embed> oder <object>. Diese Elemente eignen sich oft für Medien wie PDFs oder Videos.

Ein iframe unterscheidet sich, weil er eine komplette Webseite einbettet. Er lädt ein vollständiges HTML-Dokument in einem eigenen Kontext.

Im Vergleich:

Element	Zweck	Lädt komplette Webseite
<iframe>	Externe Seiten einbetten	Ja
<embed>	Medien wie PDF oder Audio	Nein
<object>	Externe Ressourcen	Teilweise

Wenn du also eine ganze Seite oder ein Web-Tool anzeigen willst, nutzt du das iframe-Tag. Für einzelne Dateien reicht oft ein anderes Element.

iframe Beispiel

Ein typisches iframe example ist die Einbindung eines YouTube-Videos oder einer Google Map. Der Anbieter stellt dir dafür fertigen Code bereit.

Ein einfaches Beispiel:

<iframe 
  src="https://www.google.com/maps/embed?..." 
  width="600" 
  height="400" 
  title="Standortkarte">
</iframe>

Dein Browser zeigt die Karte direkt auf deiner Seite an. Nutzer können zoomen oder klicken, ohne die Seite zu wechseln.

Du kannst auch interne Anwendungen oder Dashboards einbinden. Dabei bleibt der eingebettete Inhalt technisch getrennt, wird aber optisch Teil deiner Webseite.

Grundlegender Aufbau und Syntax von iframes

Ein <iframe> bindet eine externe HTML-Seite in dein aktuelles Dokument ein. Dabei entsteht ein eigener Browsing Context mit eigenem Dokument, eigener URL und eigener Navigation.

iframe Tag-Struktur

Du bindest ein iframe mit dem <iframe>-Tag ein. Das Element hat ein Start- und ein End-Tag und benötigt in der Praxis mindestens ein src-Attribut.

Ein einfaches Beispiel:

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

Wichtige Attribute sind:

• src – URL der eingebetteten Seite
• width und height – Größe in CSS-Pixeln
• title – Beschreibung für Screenreader
• loading – steuert das Ladeverhalten (eager oder lazy)

Jedes <iframe> erzeugt einen eigenen Browsing Context. Das bedeutet, dass Inhalte im iframe getrennt vom Hauptdokument laufen. Das eingebettete Dokument kann seine eigene Navigation und eigene Skripte haben.

Beachte, dass jedes iframe Speicher und Rechenleistung braucht. Zu viele eingebettete Inhalte können die Ladezeit erhöhen.

---

Verwendung des src-Attributs

Das src-Attribut legt fest, welche Ressource das iframe lädt. Du gibst hier eine vollständige oder relative URL an.

Beispiel:

<iframe src="https://www.beispielseite.de"></iframe>

Sobald der Browser die Seite lädt, ruft er die angegebene Adresse ab und zeigt sie im Rahmen an. Ohne src wird kein externer Inhalt geladen.

Alternativ kannst du das srcdoc-Attribut nutzen. Damit bettest du direkt HTML-Code ein, ohne eine externe Datei zu laden.

<iframe srcdoc="<p>Hallo Welt</p>"></iframe>

Mit srcdoc definierst du den Inhalt direkt im Attribut. Der Browser behandelt diesen Inhalt wie ein eigenes Dokument im iframe.

Wenn du sowohl src als auch srcdoc setzt, verwendet der Browser in modernen Umgebungen in der Regel srcdoc. Prüfe deshalb genau, welche Variante du einsetzen willst.

---

Browsersupport und Kompatibilität

Moderne Browser unterstützen das <iframe>-Tag seit vielen Jahren. Du kannst es in Chrome, Firefox, Safari und Edge ohne besondere Anpassungen verwenden.

Auch zentrale Attribute wie src, width, height und title funktionieren zuverlässig. Das loading-Attribut für Lazy Loading wird ebenfalls von aktuellen Browsern unterstützt.

Das srcdoc-Attribut ist in allen modernen Desktop- und mobilen Browsern verfügbar. Sehr alte Browser können es jedoch ignorieren und stattdessen nur src auswerten.

Achte außerdem auf Sicherheits- und Richtlinieneinstellungen wie sandbox oder referrerpolicy. Unterschiedliche Browser setzen bestimmte Einschränkungen leicht unterschiedlich um, vor allem bei Cross-Origin-Inhalten.

Teste dein iframe daher immer in mehreren Browsern und auf mobilen Geräten. So stellst du sicher, dass Inhalt, Größe und Verhalten wie geplant funktionieren.

Wichtige iframe-Attribute

Mit den richtigen iframe-Attributen steuerst du Größe, Sicherheit und Verhalten sehr genau. Du legst fest, wie viel Platz das Element einnimmt, welche Rechte es bekommt und wie es sich im Browser verhält.

Größe einstellen: width und height

Mit dem width– und height-Attribut bestimmst du die Breite und Höhe deines iframes. Du kannst feste Pixelwerte wie width="800" oder Prozentwerte wie width="100%" nutzen.

Prozentwerte passen sich an den verfügbaren Platz an. Das hilft dir bei responsiven Layouts.

Das width attribute und height attribute wirken direkt im HTML. Du kannst die Größe aber auch mit CSS steuern, wenn du mehr Kontrolle brauchst. Wichtig ist, dass du beide Werte setzt. So vermeidest du Layout-Verschiebungen beim Laden.

Früher nutzte man frameborder="0", um den iframe border zu entfernen. Heute regelst du den Rand besser mit CSS.

Wenn du Videos einbindest, kombinierst du oft feste Höhe mit width="100%". So bleibt das Seitenverhältnis stabil. Achte darauf, genug Platz für Inhalte mit Scrollbalken zu lassen.

Sicherheit mit sandbox und referrerpolicy

Mit dem sandbox-Attribut schränkst du die Rechte des eingebetteten Inhalts ein. Ohne Zusatzwerte blockiert sandbox fast alles: Skripte, Formulare und Navigation.

Du kannst gezielt Rechte erlauben:

• allow-scripts
• allow-forms
• allow-popups
• allow-same-origin
• allow-top-navigation
• allow-downloads

Setze nur die Werte, die du wirklich brauchst. Kombinierst du allow-scripts und allow-same-origin, hebst du viele Schutzmechanismen auf.

Mit referrerpolicy steuerst du, welche Herkunftsdaten der Browser sendet. Wichtige Werte sind:

• no-referrer
• strict-origin
• unsafe-url

no-referrer sendet keine Daten. strict-origin sendet nur die Domain bei sicheren Verbindungen. Vermeide unsafe-url, wenn du sensible Daten schützen willst.

Für Zahlungen kannst du allowpaymentrequest setzen. Für Vollbild nutzt du allowfullscreen, etwa bei Videos im fullscreen-Modus.

iframe individuell anpassen mit weiteren Attributen

Mit dem title-Attribut beschreibst du den Inhalt des iframes. Screenreader lesen diesen Text vor. Schreibe klar, zum Beispiel: title="YouTube Video über HTML".

Das name-Attribut gibt dem iframe einen eindeutigen Namen. Du kannst ihn als Ziel für Links oder Formulare nutzen.

Mit dem loading attribute steuerst du das Ladeverhalten. loading="lazy" lädt den Inhalt erst, wenn er sichtbar wird. Das spart Daten und verkürzt die Startzeit der Seite.

Über das allow-Attribut regelst du einzelne Funktionen wie microphone, Kamera oder Standort. So gibst du gezielt Rechte frei, ohne alles zu öffnen.

Diese iframe attributes helfen dir, Funktion und Sicherheit klar zu steuern.

Praktische Anwendungsfälle für iframes

Mit iframes bindest du externe Inhalte direkt in deine Seite ein, ohne sie selbst zu hosten. Du nutzt fertige Dienste wie Video‑Plattformen, Karten oder Formular‑Tools und sparst Entwicklungszeit.

Videos einbinden (z. B. YouTube)

Viele Websites embed videos, um Inhalte anschaulich zu erklären oder Produkte zu zeigen. Ein typisches Beispiel ist das YouTube Embed. Du kopierst den Einbettungscode und fügst ihn als <iframe> in dein HTML ein.

Beim Embed YouTube Video bleibt das Video auf den Servern von YouTube. Deine Seite lädt nur den Player. Das spart Speicherplatz und Bandbreite.

Achte auf diese Punkte:

• Setze loading="lazy", damit das Video erst lädt, wenn es sichtbar wird.
• Nutze eine passende Breite und Höhe oder arbeite mit responsivem Design.
• Aktiviere bei Bedarf Datenschutz‑Optionen wie den erweiterten Datenschutzmodus.

YouTube übernimmt Wiedergabe, Pausieren und Lautstärke. Du musst keinen eigenen Videoplayer entwickeln. Prüfe aber, ob das externe Script deine Ladezeit erhöht.

Google Maps und andere Services nutzen

Du kannst Google Maps embed nutzen, um Standorte direkt auf deiner Website zu zeigen. Besucher zoomen, verschieben die Karte oder rufen eine Route ab, ohne deine Seite zu verlassen.

Das Prinzip gilt auch für andere Services wie Terminbuchungen oder Social‑Media‑Feeds. Du bindest den bereitgestellten iframe‑Code ein und zeigst den Dienst in einem festen Bereich an.

Beachte dabei:

• Externe Inhalte können deine Ladezeit beeinflussen.
• Fällt der Dienst aus, zeigt dein iframe keinen Inhalt an.
• Datenschutz und Cookie‑Hinweise sind oft nötig.

Setze bei sensiblen Inhalten das sandbox‑Attribut, um Rechte einzuschränken. So kontrollierst du besser, was der eingebettete Dienst auf deiner Seite tun darf.

Seiten und Formulare integrieren

Mit iframes kannst du komplette Seiten oder einzelne Bereiche einbinden. Das eignet sich für interne Tools, Partnerseiten oder alte Systeme, die du nicht neu programmieren willst.

Besonders häufig nutzt du iframes zum Embedding Content wie Kontaktformulare oder Umfragen. Anbieter wie Google Forms oder andere Formular‑Services liefern einen fertigen Code. Du fügst ihn ein, und das Formular sendet Daten direkt an den Anbieter.

Vorteile im Überblick:

• Kein eigener Backend‑Code nötig
• Schnelle Integration
• Updates laufen automatisch beim Anbieter

Prüfe jedoch, ob Suchmaschinen den eingebetteten Inhalt erfassen sollen. Inhalte im iframe zählen meist nicht als eigener Seiteninhalt. Plane daher genau, welche Informationen du direkt im HTML platzierst und welche du extern lädst.

Design, Anpassung und Barrierefreiheit von iframes

Du steuerst das Aussehen und Verhalten eines iframe mit klaren HTML-Attributen und gezieltem CSS. Achte dabei auf Rahmen, Größe, Ladeverhalten und zugängliche Beschriftung, damit Inhalt, Performance und Bedienbarkeit stimmen.

Rahmen und CSS-Anpassungen

Standardmäßig zeigt ein iframe oft einen sichtbaren iframe border an. Du kannst ihn mit CSS entfernen:

iframe {
  border: none;
}

So wirkt die Einbettung sauberer und passt besser ins Layout.

Die iframe width und Höhe legst du entweder direkt im HTML oder per CSS fest. Beispiel:

<iframe src="seite.html" width="600" height="400"></iframe>

Flexibler arbeitest du mit CSS:

iframe {
  width: 100%;
  max-width: 800px;
  height: 400px;
}

Für responsive Designs setzt du width: 100%, damit sich das iframe an den Container anpasst. Achte darauf, dass Höhe und Seitenverhältnis zum Inhalt passen, zum Beispiel bei Videos oder Karten.

Vermeide feste Pixelwerte, wenn du mobile Geräte unterstützen willst. Teste dein Layout auf kleinen Bildschirmen und passe Abstände und Rahmen gezielt an.

Lazy Loading zur Performance-Optimierung

Ein iframe lädt oft externe Inhalte wie Videos, Karten oder Formulare. Das kann die Seite verlangsamen.

Mit dem loading attribute steuerst du, wann der Inhalt geladen wird:

<iframe src="video.html" loading="lazy"></iframe>

Der Wert lazy sorgt dafür, dass der Browser das iframe erst lädt, wenn es im sichtbaren Bereich erscheint. Das spart Bandbreite und verkürzt die Ladezeit beim ersten Seitenaufruf.

Nutze loading="eager" nur, wenn der Inhalt sofort sichtbar sein muss, etwa bei einem wichtigen Video im oberen Bereich der Seite.

Setze Lazy Loading gezielt ein. Zu viele externe Inhalte gleichzeitig erhöhen die Ladezeit und können die Nutzererfahrung verschlechtern.

Barrierefreiheit: title und screen reader

Für barrierefreie Nutzung braucht jedes iframe ein aussagekräftiges title attribute. Es beschreibt den Inhalt des eingebetteten Dokuments.

Beispiel:

<iframe 
  src="karte.html" 
  title="Interaktive Karte mit unseren Standorten">
</iframe>

Ein screen reader liest diesen Titel vor. Ohne title hört die Person oft nur „iframe“ oder eine technische Angabe. Das erschwert die Navigation.

Formuliere den Titel klar und konkret. Beschreibe den Zweck, nicht nur die Technik. Statt „Video“ schreibe besser „Produktvideo zur Montage“.

Vermeide leere oder doppelte Titel. Jeder eingebettete Inhalt braucht eine eigene, eindeutige Beschreibung. So unterstützt du Menschen mit Assistenztechnologie und erfüllst wichtige Anforderungen an die Barrierefreiheit.

Sicherheitsaspekte und Best Practices

iFrames bringen klare Sicherheitsrisiken mit sich, wenn du sie ohne Schutz einsetzt. Du musst Clickjacking verhindern, Berechtigungen einschränken und den Umgang mit Cross-Origin-Anfragen sowie Referrer-Daten sauber regeln.

Umgang mit Clickjacking

Clickjacking täuscht Nutzer, indem es unsichtbare oder überlagerte iFrames über echte Inhalte legt. Der Nutzer klickt scheinbar auf einen harmlosen Button, löst aber eine andere Aktion aus, etwa eine Überweisung oder eine Passwortänderung.

Du schützt dich mit dem HTTP-Header X-Frame-Options. Nutze:

• DENY – verhindert jede Einbettung in ein iFrame
• SAMEORIGIN – erlaubt Einbettung nur aus derselben Domain

Moderne Browser unterstützen auch die Content-Security-Policy (CSP) mit der Direktive frame-ancestors. Damit legst du genau fest, welche Domains deine Seite einbetten dürfen.

Verlasse dich nicht nur auf JavaScript. Serverseitige Header bieten den verlässlichen Schutz. Prüfe regelmäßig mit Browser-Tools, ob deine Header korrekt gesetzt sind.

Sandbox und Berechtigungen richtig nutzen

Das sandbox-Attribut ist deine wichtigste Sicherheitsfunktion für iFrames. Ein leeres sandbox schränkt fast alles ein: keine Skripte, keine Formulare, kein Zugriff auf Cookies oder lokalen Speicher.

Du kannst gezielt Rechte freigeben, zum Beispiel:

• allow-scripts
• allow-forms
• allow-popups

Erlaube nur, was der Inhalt wirklich braucht. Jede zusätzliche Berechtigung erhöht das Risiko.

Nutze zusätzlich das allow-Attribut, um Funktionen wie Kamera oder Geolocation gezielt zu steuern. Gib niemals pauschal alle Berechtigungen frei.

Wenn du externe Inhalte einbindest, vermeide Formulare für sensible Daten im iFrame. Zugangsdaten oder Zahlungsinformationen gehören nicht in eingebettete Drittseiten.

Cross-Origin und Datenschutz

iFrames laden oft Inhalte von anderen Domains. Damit entstehen Cross-Origin-Risiken, vor allem bei Cookies, Sitzungen und Tracking.

Steuere den Umgang mit Referrer-Daten über das Attribut referrerpolicy. Wichtige Optionen sind:

• no-referrer – sendet keine Referrer-Information
• strict-origin – sendet nur die Origin bei HTTPS

So verhinderst du, dass sensible URL-Daten an externe Seiten gelangen.

Achte darauf, keine sensiblen Daten in URLs zu übergeben. Parameter wie E-Mail-Adressen oder Tokens können sonst im Referrer landen.

Setze zusätzlich eine klare Content-Security-Policy, zum Beispiel mit child-src oder frame-src. Damit legst du fest, welche externen Quellen Inhalte laden dürfen.

Halte dein CMS, Framework und deinen Server aktuell. Sicherheitsupdates schließen bekannte Lücken, die Angreifer über manipulierte iFrames ausnutzen könnten.