iFrame

Was versteht man unter iFrame

Ein iFrame (kurz für „Inline Frame“ oder „integriertes Frame“) ist ein HTML-Element, das es ermöglicht, eine separate Webseite oder ein Dokument in eine andere Webseite einzubetten. iFrames sind in der Regel rechteckige Container, in denen externe Inhalte, wie eine andere Webseite, ein Video, eine Karte oder ein Widget, angezeigt werden können. Diese eingebetteten Inhalte werden in einem iFrame-Fenster innerhalb der übergeordneten Webseite gerendert.

Hier sind einige wichtige Punkte in Bezug auf iFrames:

Einbettung externer Inhalte: iFrames ermöglichen die Einbettung von externen Inhalten in eine Webseite, ohne dass der Benutzer die Seite verlassen muss.
Sicherheitsaspekte: iFrames können Sicherheitsprobleme aufwerfen, insbesondere wenn sie Inhalte von Drittquellen anzeigen. Deshalb setzen Browser Sicherheitsrichtlinien um, um böswillige iFrame-Nutzung zu verhindern.
Größenanpassung: iFrames können in der Größe angepasst werden, um den eingebetteten Inhalt in das Layout der übergeordneten Webseite zu integrieren.
Interaktion: In einigen Fällen können Benutzer mit dem Inhalt innerhalb des iFrames interagieren, z.B. Videos wiedergeben, Karten verschieben oder Formulare ausfüllen.
Cross-Domain-Kommunikation: Aufgrund von Sicherheitsbeschränkungen in Webbrowsern ist die Kommunikation zwischen dem iFrame und der übergeordneten Seite begrenzt. Dennoch gibt es Techniken wie PostMessage, die eine sichere Kommunikation zwischen den beiden ermöglichen.

iFrames sind nützliche Werkzeuge, um Inhalte von verschiedenen Quellen auf einer einzigen Webseite anzuzeigen, wie z.B. das Einbetten von YouTube-Videos, das Anzeigen von interaktiven Karten oder das Einbinden von externe Widgets. Allerdings sollten sie mit Bedacht verwendet werden, um Sicherheits- und Benutzererfahrungsprobleme zu vermeiden.

Definition und Verwendung von iFrames

Was sind iFrames und wie werden sie in Webseiten genutzt?

iFrames, oder Inline Frames, sind HTML-Elemente, die dazu dienen, Inhalte von einer anderen Webseite in eine bestehende Webseite einzubetten. Dies ermöglicht eine effiziente Integration externer Inhalte in Webseiten, ohne dass umfangreiche Neukodierung erforderlich ist. iFrames können auch von Webseiten genutzt werden, um Besuchern das Teilen von Inhalten zu ermöglichen, was die Verbreitung externer Inhalte erleichtert.

Einbindung und Beispiele

Die Verwendung von iFrame-Elementen erfolgt im HTML-Körper einer Webseite. Die Gestaltung des iFrames kann mithilfe von CSS angepasst werden.

Seit der Einführung von HTML5 haben sich die iFrame-Attribute geändert. Die folgende Tabelle bezieht sich auf die aktuelle Version von HTML5. Ein iFrame sollte immer einen Hyperlink oder Backlink enthalten, um den Inhalt auf die ursprüngliche Quelle zurückzuführen. Weitere Attribute im HTML-Element sind optional und beeinflussen das Design und die Leistung der Seite.

height: Die Höhe des iFrames in Pixel.
name: Der Name des iFrames.
sandbox: Ermöglicht das Festlegen von Einschränkungen wie das Blockieren von Pop-up-Fenstern.
src: Die URL des einzubettenden Inhalts.
srcdoc: Die Einbettung von eigenem HTML-Code.
width: Die Breite des iFrames in Pixel.

In älteren HTML-Versionen wie 4.1 gab es weitere Attribute wie das scrolling-Attribut und das align-Attribut. Heutzutage ist es üblich, iFrames mithilfe von CSS zu gestalten, das normalerweise im <head>-Bereich des Quelltexts platziert wird.

htmlCopy code

<iframe src="http://www.beispiel.de/iframe.html" name="iFrame Name" width="500" height="600" align="center" scrolling="no" marginwidth="2" frameborder="0"></iframe>

iFrames können auch mit Hilfe von CSS gestaltet werden. Diese Methode eignet sich besonders für Webseiten, die nicht geteilt werden, sondern für den eigenen Gebrauch bestimmt sind, da der iFrame auf lokalen CSS-Code im <head>-Bereich verweist.

Die Erstellung eines iFrames, der sowohl mit CSS gestaltet als auch geteilt werden kann, kann mithilfe des style-Attributs erreicht werden. Dies ermöglicht die eigenständige Darstellung des iFrames, ohne auf internen CSS-Code angewiesen zu sein.

Vorteile von iFrames

iFrames bieten Webseitenbetreibern einige Vorteile:

Effizienz: Die Einbindung von iFrames erleichtert die Arbeit, da der eingebettete Inhalt nicht erneut gestaltet werden muss.
Parallelität: iFrames ermöglichen die gleichzeitige Ladung des eingebetteten Inhalts und der Website, die den Inline Frame verwendet. Dies kann die Ladezeit der Seite verbessern und die Benutzerfreundlichkeit erhöhen.
Teilen von Inhalten: iFrames erleichtern das Teilen von Inhalten auf anderen Seiten, Blogs oder sozialen Netzwerken, da ein einfacher Code zum Einbetten bereitgestellt wird.

Nachteile aus SEO-Sicht

Aus SEO-Sicht gibt es jedoch einige Nachteile bei der Verwendung von iFrames:

Duplicate Content: Suchmaschinen wie Google können iFrames zwar identifizieren, behandeln jedoch in einigen Fällen den Inhalt als Duplikate. Dies liegt daran, dass iFrames zusätzliche URLs auf eine Seite einbinden, was zu Problemen mit dem Duplicate Content führen kann.
Crawlability: Suchmaschinen-Crawler berücksichtigen oft den Inhalt von iFrames nicht. Sie verfolgen nur den Quelllink, nicht den Textinhalt, der in den iFrames enthalten ist.
Inkonsistente Darstellung: iFrames werden auf verschiedenen Browsern inkonsistent dargestellt, insbesondere auf mobilen Endgeräten mit unterschiedlichen Bildschirmauflösungen.
Externe Links: Webseitenbetreiber haben wenig Kontrolle über die Funktionalität von externen iFrame-Inhalten. Änderungen an der Quell-URL können dazu führen, dass das iFrame nicht mehr angezeigt wird.

Aus diesen Gründen sollten iFrames sparsam verwendet werden, insbesondere wenn SEO-Relevanz und die konsistente Darstellung auf verschiedenen Geräten von Bedeutung sind.