iFrames sind HTML-Elemente, mit denen Du ein anderes Dokument innerhalb einer Webseite einbetten kannst. Typische Beispiele sind Karten, Videos, Formulare oder externe Anwendungen.
Wie funktioniert ein iFrame?
Das Element <iframe> erzeugt einen eigenen, verschachtelten Browsing-Kontext innerhalb des aktuellen Dokuments. Vereinfacht gesagt lädt der Browser eine weitere Webseite in einen abgegrenzten Bereich der bestehenden Seite.
Welche Seite eingebunden wird, steht normalerweise im src-Attribut. Breite und Höhe können ebenfalls festgelegt werden. Das eingebettete Dokument besitzt dabei seine eigene HTML-Struktur und kann eigene Stylesheets, Skripte und Netzwerkressourcen laden.
Wofür werden iFrames verwendet?
Ein verbreitetes Einsatzgebiet sind Videoplayer. Statt den gesamten Player selbst zu entwickeln, kannst Du einen von einer Videoplattform bereitgestellten iFrame einbetten.
Dasselbe Prinzip kommt bei Karten, Buchungssystemen, externen Formularen und anderen Webanwendungen zum Einsatz. Der Vorteil besteht darin, dass die eingebundene Funktion technisch vom Hauptdokument getrennt bleiben kann.
Welche Nachteile haben iFrames?
Jeder iFrame kann zusätzliche Dateien, Skripte und Netzwerkverbindungen laden. Viele oder besonders umfangreiche iFrames können deshalb die Ladezeit erhöhen und zusätzlichen Datenverkehr verursachen.
MDN empfiehlt, iFrames aus Performance-Sicht sparsam einzusetzen. Inhalte, die zur eigenen Anwendung gehören, lassen sich häufig effizienter direkt in dieselbe Seite integrieren.
Auch die Bedienbarkeit kann schwieriger werden. Eingebettete Dokumente haben einen eigenen Kontext, wodurch Fokussteuerung, responsive Darstellung und Barrierefreiheit sorgfältig umgesetzt werden müssen.
Sicherheit bei iFrames
iFrames besitzen mehrere Sicherheitsmechanismen. Mit dem Attribut sandbox kannst Du Funktionen des eingebetteten Dokuments gezielt einschränken. Das allow-Attribut steuert bestimmte Berechtigungen, beispielsweise den Zugriff auf definierte Browserfunktionen.
Die Same-Origin-Policy verhindert außerdem viele direkte Zugriffe zwischen Dokumenten unterschiedlicher Herkunft. Dadurch kann fremder Inhalt nicht ohne Weiteres auf Daten der einbettenden Seite zugreifen.
Lazy Loading von iFrames
Nicht sofort sichtbare iFrames lassen sich mit loading="lazy" verzögert laden. Der Browser wartet dann mit dem Abruf, bis der eingebettete Bereich voraussichtlich bald benötigt wird. Dadurch können initiale Netzwerkbelastung und Ladezeit sinken.
Ein direkt sichtbarer, wichtiger iFrame sollte dagegen nicht unnötig verzögert werden.
iFrames und SEO
Inhalte innerhalb eines iFrames sind technisch ein eigenes Dokument. Deshalb solltest Du zentrale Inhalte einer Seite nicht ausschließlich über externe iFrames bereitstellen.
Für Videos, Karten oder spezielle externe Funktionen können iFrames sinnvoll sein. Überschriften, Haupttexte, interne Links und andere wichtige Seiteninhalte sollten dagegen normalerweise Bestandteil des eigentlichen Dokuments sein.
Häufige Fragen
Was ist ein iFrame?
Ein iFrame ist ein HTML-Element, das ein anderes Dokument innerhalb der aktuellen Webseite einbettet.
Sind iFrames schlecht für die Ladezeit?
Ein iFrame kann zusätzliche Dateien und Skripte laden und dadurch die Seite belasten. Nicht sofort benötigte iFrames kannst Du häufig per Lazy Loading verzögert laden.
Wofür wird ein iFrame verwendet?
iFrames werden häufig für Videos, Karten, externe Formulare oder andere eingebettete Webanwendungen verwendet.
