iFrame

Was ist ein iFrame?

Bei einem iFrame handelt es sich um ein HTML-Element. Mithilfe dessen können Fremdinhalte über ein Contentwindow in die eigene Webseite eingebunden werden. Hierzu lädt das sogenannte Inlineframe (= iFrame) den Inhalt der anderen Seite, um diesen dann innerhalb des Rahmens (engl. Frame) darzustellen. Diverse HTML und CSS Attribute erlauben eine individuelle Anpassung des iFrames, wie beispielsweise die Größe oder Platzierung.

iFrames haben viele Anwendungsbereiche

iFrames eignen sich hervorragend, um Inhalte von beliebten Seiten schnell und einfach einzubinden. Vor allem Google Maps und YouTube iFrames werden von vielen Internetseiten eingesetzt, um den Nutzern relevante Inhalte direkt zugänglich zu machen. Eine Alternative zur Einbindung von Google Maps wäre beispielsweise ein normaler Hyperlink, allerdings zeigt eine interaktive Karte mit Markierungen Standorte viel leichter und verständlicher an, was wiederum die Usability erhöht. Das Gleiche gilt für YouTube Videos, die mittels Inlineframe sofort und ohne Schwierigkeiten abgespielt werden können. Die sinnvolle Verwendung steigert die User Experience und spart sehr viel Programmieraufwand. Diese Zeit und das dafür benötigte Geld kann dann wiederum der in andere Bereiche investiert werden.

Neben diesen bekannten Anwendungsbeispielen finden Inlineframes auch für das Integrieren von Bildern und anderen HTML Codes in die Seite Verwendung. Allerdings wird für Bilder häufiger die dafür vorgesehenen <img> Tags verwendet. Durch HTML kann innerhalb des 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 HTML Inhalt scrollen, wenn der Rahmen des Frames zu klein ist. Dies erkennst Du an einer Scroll-Leiste am rechten Rand.

iFrames funktionieren mit vielen Programmiersprachen

Die wohl gängigsten Programmiersprachen in Verbindung mit Inlineframes sind HTML und CSS. Denn dadurch wird das Inlineframe in die Seite eingesetzt und optisch angepasst. Ein iFrame mit HTML zu integrieren ist denkbar einfach. Es reicht ein kleiner Codeschnipsel, der in den Quellcode integriert wird:

<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 in optimierter Bildschirmauflösung und bietet Nutzern dadurch eine bessere User Experience. Der Sandbox-Modus ist für Entwicklern, um dem iFrame von einem fremden Host gewisse Rechte und Möglichkeiten zu geben. So kann es Inhalte auf der Seite ändern kann. Standardmäßig hindern Browser durch die „Same Origin Policy“ iFrames daran, Änderungen an der Seite vorzunehmen und minimieren so das Sicherheitsrisiko.

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, jedoch nicht, ohne auch einige Nachteile mitzubringen. Diese müssen gegeneinander abgewogen werden. 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 mithilfe 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.

Funktionalität, Benutzerfreundlichkeit und geringer Aufwand sprechen also auf jeden Fall für iFrames.

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.

Möchtest Du auf Nummer Sicher gehen, solltest Du das iFrame HTML aus datenschutzrechtlichen Aspekten nicht einbetten. Außerdem birgt es immer ein gewisses Sicherheitsrisiko.

Spielen iFrames auch bei HTML5 eine Rolle?

iFrames (Inline Frames) spielen auch im Kontext von HTML5 eine bedeutende Rolle, indem sie Webentwicklern ermöglichen, externe Webseiten oder Inhalte innerhalb einer anderen Webseite einzubetten. HTML5 hat die Verwendung von iFrames durch neue Attribute und Möglichkeiten erweitert, was die Sicherheit und Flexibilität erhöht. Beispielsweise erlaubt das „sandbox“-Attribut, die Berechtigungen eines eingebetteten Inhalts fein granular zu steuern, um Cross-Site Scripting (XSS) Angriffe zu verhindern. Zudem ermöglichen die Attribute „srcdoc“ und „seamless“ eine sicherere und optisch nahtlosere Integration von Inhalten. Durch diese Erweiterungen können Webentwickler leistungsfähigere und sicherere Webseiten erstellen, die externe Inhalte effizient nutzen, ohne dabei die Benutzererfahrung oder die Sicherheit zu beeinträchtigen.

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.