Das iframe-Element: Ein Fenster in eine andere Seite

vom 02.10.2023 von Oliver Misch

Ein <iframe> (inline frame) bettet ein komplettes zweites Dokument in die aktuelle Seite ein: Kartendienste, Videoplayer, Code-Demos. Das eingebettete Dokument lebt in seiner eigenen kleinen Welt mit eigenem CSS und eigenem JavaScript.

Syntax und Beispiel

HTML-Code

<iframe src="https://www.htmlwiki.de/" width="100%" height="220"
        title="Die Startseite des HTMLWiki" loading="lazy"></iframe>

Ergebnis: das Wiki im Wiki

Sehr meta, dieses Beispiel, aber es zeigt den Punkt: Da drin läuft eine vollständige, unabhängige Seite. Das title-Attribut ist übrigens Pflichtprogramm für die Zugänglichkeit, es sagt Screenreader-Nutzern was in dem Rahmen steckt bevor sie hineinnavigiern.

Die wichtigen Attribute

Attribut	Zweck
`src`	Die Adresse des eingebetteten Dokuments.
`srcdoc`	Alternativ: der HTML-Code direkt als Attributwert. So bauen wir hier im Wiki die kleinen Demos.
`title`	Beschreibung des Inhalts, siehe oben.
`loading="lazy"`	Lädt den Rahmen erst kurz bevor er sichtbar wird. iframes sind schwergewichtig, das lohnt fast immer.
`sandbox`	Der Sicherheitszaun, siehe unten.
`allow`	Erlaubt gezielt Funktionen wie Vollbild oder Kamera.

sandbox: Erst alles verbieten, dann gezielt erlauben

Mit dem sandbox-Attribut startet der eingebettete Inhalt maximal eingesperrt: keine Skripte, keine Formulare, keine Popups, kein Zugriff auf die umgebende Seite. Einzelne Freiheiten gibt man als Werte zurück, etwa sandbox="allow-forms". Sobald du Inhalte einbettest die du nicht selbst vollständig kontrollierst, ist sandbox keine Kür sondern Pflicht. Unsere Spielwiese wird genau so absichert: dein eingetippter Code rendert in einem iframe ohne Skript-Rechte und kann der Seite drumherum nichts anhaben.

Wann kein iframe?

Für Layout-Zwecke nie, diese Ära ist vorbei (die Vorgeschichte mit echten Framesets erzählen wir bei den Frames im Retro-Web). Auch fürs Einbinden eigener Inhalte auf der eigenen Seite gibt es meist bessere Wege. Und bedenke: Jedes eingebettete Fremd-Dokument lädt fremde Ressourcen mit allen Folgen für Ladezeit und Datenschutz. Ein iframe ist ein Werkzeug für die Fälle, in denen wirklich ein fremdes, abgeschottetes Dokument gebraucht wird.

Verwandt: video (statt eingebetteter Player, wenn die Datei dir gehört) · Spielwiese