iFrame

Mit Hilfe eines iFrames können Fremdinhalte in die eigene Webseite eingebunden werden. Hierzu lädt das sogenannte inline Frame (= iFrame) den Inhalt der anderen Seite, um diesen dann innerhalb des Rahmens (Frames) darzustellen. Diverse HTML und CSS Attribute erlauben eine individuelle Anpassung des iFrames, z.B. die Größe.

iFrames haben viele Anwendungsbereiche

iFrames eignen sich hervorragend, um Inhalte von beliebten Seiten schnell und einfach einzubinden. Vor allem iFrames von Google Maps und YouTube iFrames werden von vielen Internetseiten eingesetzt, um den Nutzern relevante Inhalte direkt zugänglich zu machen. Eine Alternative zu Google Maps wäre ein normaler Link, allerdings zeigt eine interaktive Karte mit Markierungen Standorte viel leichter und verständlicher an. Das gleiche gilt für YouTube Videos, die mittels Inlineframe sofort abgespielt werden können. Die sinnvolle Verwendung steigert die User Experience und spart sehr viel Programmieraufwand, der in andere Bereiche investiert werden kann.

Neben diesen bekannten Anwendungsbeispielen finden inline Frames auch für das Integrieren von Bildern und anderen HTML Codes in die Seite Verwendung. Wobei für Bilder häufiger die dafür vorgesehenen <img> Tags verwendet werden. Durch HTML kann innerhalb es iFrames auch zusätzlich Text angezeigt werden. Auf diese Weise ist der Frame noch besser in das Layout und Design der eigenen Seite integriert. Wenn zusätzliche Elemente im Inlineframe stehen sollen, hilft das srcdoc=““-Attribut für mehr Freiheit in der Gestaltung. Anschließend kann innerhalb der Anführungszeichen jeglicher HTML Code eingefügt werden. Übrigens lassen sich auch komplette Websites in eine andere Website einbinden. Für den dargestellten Inhalt gibt es keine Beschränkungen. Allerdings musst Du den iFrame Inhalt scrollen, wenn der Rahmen des Frames zu klein ist. Dies erkennst Du an einer Scrollleiste am rechten Rand.

iFrames funktionieren mit vielen Programmiersprachen

Die wohl gängigsten Programmiersprachen in Verbindung mit inline Frames sind HTML und CSS. Denn dadurch wird das inline Frame in die Seite eingesetzt und optisch angepasst. Ein iFrame mit HTML zu integrieren ist denkbar einfach. Es reicht ein kleiner Codeschnipsel:

<iframe src=“https://www.eology.de/“ height=“600″ width=“800″ name=“eology Website“>

</iframe>

Dieses iFrame fügt unsere Startseite bzw. die gesamte Webseite mit Navigation in eine andere Internetseite ein. Mit HTML 5 erhalten sie sogar noch mehr Funktionen und Möglichkeiten. Am interessantesten sind die beiden Features Vollbild-Modus und Sandbox-Modus. Ersterer erlaubt z.B. das Abspielen von Videos in Fullscreen und bietet Nutzern dadurch eine bessere User Experience. Der Sandbox-Modus ist für Entwicklern, um dem Inlineframe von einem fremden Host gewisse Rechte und Möglichkeiten zu geben, damit es Inhalte auf der Seite ändern kann. Standardmäßig hindern Browser durch die „Same Origin Policy“ iFrames daran, Änderungen an der Seite vorzunehmen.

Es gibt aber auch die Möglichkeit iFrames mit jQuery oder JavaScript zu nutzen. Möchtest Du auf die Inhalte eines Frames mit jQuery zugreifen, dann ist dafür die contents() Methode notwendig. Javascript kann iFrames ändern und anpassen, ohne dass Nutzer die Seite neu laden müssen. Deshalb nutzt Google diese praktische Funktion, um eine interaktive Karte einzubinden.

Es gibt viele Vorteile, aber auch Nachteile

Wie bei vielen Dingen im Leben, haben auch iFrames große Vorteile und einige Nachteile, die gegeneinander abgewogen werden müssen. Ja nach Art der Verwendung ändern sich auch die Anforderungen an das Inlineframe, sodass es schwer ist pauschal sämtliche Aspekte zu benennen. Deshalb gehen wir im Folgenden vor allem auf die allgemeingültigen ein.

Das spricht für iFrames

Es gibt insbesondere zwei große Vorteile von iFrames: Zum einen erleichtern sie die Programmierung und verringern den Arbeitsaufwand. Anstatt selbst eine neue Funktion oder neue Inhalte zu erstellen, kann mit Hilfe des iFrames relevanter Content schnell und einfach eingebunden werden. Ein zusätzlicher Bonus ist die Tatsache, dass ein Inlineframe in den meisten Fällen garantiert funktioniert und die gewünschten Inhalte darstellt. Dies ist bei komplizierten Funktionen, die man selbst programmiert, nicht immer gewährleistet.

Ein weiterer Vorteil ist die User Experience, die durch iFrames in der Regel verbessert wird. Anstatt Nutzer auf eine externe Seite weiterzuleiten, können sie direkt auf der gleichen Seite durch das Inlineframe wichtige Elemente sehen und nutzen. Dies erleichtert die Bedienung. Außerdem sparen iFrames Ladezeit, da Deine Inhalte parallel mit dem Rest der Seite geladen werden und nicht nach einer bestimmten Reihenfolge. So ist die Seite schneller interaktiv und Nutzer springen seltener auf eine andere Website ab.

Die Beliebtheit leidet durch die Nachteile

In der heutigen Zeit ist Datenschutz sehr wichtig und genau hier sind iFrames eine potenzielle Gefahrenquelle für Websitebetreiber. Denn über iFrames, die z.B. Social Media-Seiten einbinden, werden Daten an diese Website übermittelt. Die Nutzer haben darauf keinen Einfluss und es ist egal, ob sie beim eingebundenen Social Media Dienst eingeloggt sind oder nicht. Deshalb sollte die Einbindung solcher Dienste mittels Inlineframes eventuell vermieden werden.

Neben dem Datenschutz sind sie zuletzt auch immer wieder durch Sicherheitslücken negativ aufgefallen. Da ein iFrame den HTML-Code einer fremden Webseite herunterlädt, können Hacker hier angreifen. Dazu manipulieren sie den Code der Quell-Seite, auf die das iFrame verlinkt, und schon ist der schadhafte Code auf der eigenen Website. Aber nicht nur Hacker sind ein Problem. Der Betreiber der Quell-Seite des Inlineframes kann auch den Inhalt oder die URL ändern, sodass das iFrame nicht mehr korrekt funktioniert oder nun etwas Falsches darstellt. Beim Einbinden von Fremdinhalten gibt es keine Garantie, dass diese Inhalte nicht irgendwann geändert oder gelöscht werden.

iFrames sind auch für SEO problematisch

Für die Suchmaschinenoptimierung sind iFrames ebenfalls ein Fallstrick. Denn die Bots von Google und Co. lesen den Inhalt von Inlineframes nicht. Sie folgen zwar dem Link zur Quelle, aber werten den Inhalt des iFrames nicht. In manchen Fällen wertet Google die Verwendung eines iFrames sogar als Duplicate Content. Darunter kann die Crawl Rate leiden, sodass der Googlebot die Seite seltener besucht. Außerdem sind Auswirkungen auf das Ranking der Seite ebenfalls nicht auszuschließen.

Aus diesen Gründen büßten iFrames in den letzten Jahren viel Popularität ein und verloren zunehmend an Relevanz. Manche Nutzer blocken inzwischen sogar die Darstellung von Inlineframes, um sich vor potenziellen Sicherheitsrisiken zu schützen. Dennoch ist die Verwendung von iFrames für manche Dienste wie Google Maps oder auch YouTube optimal, um den Nutzern die bestmögliche User Experience zu ermöglichen. Es ist also immer eine Frage der Quell-Seite und wie das iFrame auf der eigenen Seite eingebunden ist. Wenn der Ursprung des iFrames seriös ist, dann bestehen kaum Risiken beim einbinden.

eo:wiki

Kontakt

Dein Kontakt
zu uns

  +49 9381 5829000