It’s #FrontendFriday – Warum heute noch iFrames zum Standard gehören?

Bekir Erpolat

2 MIN LESEDAUER

26.07.2019 –

Es ist mal wieder Freitag und das heißt It’s #FrontendFriday. In diesem Blogpost geht es um iFrames – manche haben bestimmt sowohl gute als auch schlechte Erfahrung hiermit gemacht.

Was ist ein iFrame und was ist der Sinn und Zweck hierzu?

Ein iFrame ist das Einbetten einer HTML-Seite innerhalb einer HTML-Seite. Beispiel: Auf einer Webseite gibt es eine Menüleiste, je nach Auswahl wird in einem festgelegtem Bereich der Inhalt einer anderen HTML-Seite angezeigt (HTML-Seite innerhalb einer HTML-Seite) – Oldschool, derzeit nicht mehr state of the art.

Wo werden heute noch iFrames eingesetzt?

Im Allgemeinen werden iFrames dort eingesetzt, wo die Seite bzw. der Entwickler keine Chance hat, den Code (inhaltlich) zu verändern.

Um die eigene Webseite zu tracken, um herauszufinden, wie viele Anwender z.B. die Seite aufgerufen haben oder Interaktionen durchgeführt haben, werden auch Code-Snippets wie z.B. Piwik oder Google Analytics eingesetzt (Cross-Domain Tracking).

iFrames umgehen die Cross-Domain-Ursprungs-Richtlinien (Bilder, Skripte und Stile nicht). Dies kann nützlich sein, um Webseiten/Inhalte relativ sicher aus anderen Domänennamen anzugeigen bzw. zu ziehen. Im Grunde genommen ermöglichen iFrames den Vorteil, Daten von anderen Domains visuell darzustellen zu können.

Zum Beispiel, falls man eine PDF anzeigen möchte, kann man einen iFrame „öffnen“ und den Inhalt durch das Adobe Reader Plug-in anzeigen lassen, dies wird auch heutzutage so gemacht.

Auch heute noch, werden iFrames oft eingesetzt.

Der sichtbare Teil ist nur schlaue Positionierung. Darüber hinaus verwenden viele OAuth-Implementierungen (Twitter, Facebook, Google, Yahoo!) normalerweise iFrames, um einen Benutzer in seiner Domäne mit einer erfolgreichen Authentifizierungs-URL zu verknüpfen (nachdem der Benutzer sich angemeldet hat). Folgende Seiten

Gmail
Facebook
…

Wie bekommt man heraus, wie viele iFrames eine Webseite einsetzt?

DevTools öffnen – F12 innerhalb der Webseite
In der Konsole folgendes eingeben:
1. document.getElementsByTagName(‚iframe‘).length
Falls iFrames eingesetzt werden, wird die Anzahl der iFrames angezeigt, z.B. bei Gmail kam der Wert 13 zurück.

Wie werden iFrames eingesetzt?

Diese werden wie im folgendem Beispiel-Code eingesetzt:

<iframe src="URL" width="200px" height="200px">
    Alternativen Text, falls der iFrame nicht gerendert werden kann.
</iframe>

In diesem Beispiel, wird der iFrame immer angezeigt. Dies kann man ganz einfach per JavaScript ein-/ausblenden lassen.

Welche Browser unterstützen iFrames?

Alle Browser, da es ein HTML 4 Standard ist (https://caniuse.com/#search=iframe)

Welche Alternativen gibt es zu iFrames?

Die meisten Frameworks bieten alternativen zu iFrames. jQuery war hierzu einer der Ersten.

Beispiel jQuery:

$( document ).ready(function() {
    $( "#AnzeigeInDieserBox" ).load("www.eine-webseite.de");
});