iframe

Der Begriff iframe ist die Kurzform von Inlineframe. Damit wird ein HTML-Objekt bezeichnet, das in einem festen Rahmen auf einer bestehenden Website eingebunden werden kann. Meist werden Werbebanner oder ein anderer Inhalte wie Videoclips per iframe eingebunden. Innerhalb des Frame kann es eine eigene Navigation geben. Die Technik wird auch von HTML5 unterstützt und bietet noch mehr Konfigurationsmöglichkeiten. Der iframe als HTML-Code ist nicht mit dem Videoformat iFrame zu verwechseln, das von Apple entwickelt wurde.

Verwendung

Mit Hilfe von iframes können Websites sowohl ihre Funktionalität als auch ihre Inhalte erweitern, ohne dass hierfür eigene Programmierarbeit geleistet werden muss. Viele Unternehmen bieten iframes auch in Form von sogenannten Widgets an, die andere dann auf ihren Seiten einbinden können. Ein beliebtes Beispiel für die Einbindung von iframes sind eingebettete YouTube-Videos oder Widgets mit Zusatzinformationen wie Wetterberichte oder Buchungsplattformen.

Codierung

Wer einen Inlineframe auf seiner Webseite einbinden möchte, kann diesen ähnlich wie eine Bild-Quelle als HTML-Zeile in den Quellcode einfügen. Dabei werden innerhalb des Code-Snippets die Höhe, die Ausrichtung und weitere Attribute hinterlegt, welche die Optik und die Ausrichtung des iframe beeinflussen.

Ein iframe wird meist in folgender Form eingefügt:

 <iframe src="http://www.beispielseite.de/iframe.html"  name="Name des eingebundenen iframe" width="so breit wird der iframe im Frontend ausgegeben" height="so hoch ist der iframe" align="die Ausrichtung" scrolling="soll eine Scrollbar eingefügt werden?" marginheight="Höhe des Randes" marginwidth="Breite des Randes"
 frameborder="Dicke der Begrenzungslinie">
 </iframe>

Alle Längenmaße werden in Pixeln angegeben. Wird der iframe links ausgerichtet, befinden sich alle anderen Text- oder Seitenelemente rechts davon.

Die in einem iframe eingebundenen Website-Elemente lassen sich mit Hilfe eines Container-Elements per CSS anpassen und skalieren.

iframes und HTML5

iframes können mit HTML5 um viele zusätzliche Elemente erweitert werden. Zugleich gehören einige Attribute bei HTML5 nicht mehr zum Standard.

die Anzeige des iframes in Vollbildschirmansicht erlauben:

Hierfür wird das Attribut „allowfullscreen“ in den Einbettungscode implementiert. Wird zum Beispiel ein Video per iframe eingebunden, kann der Film auf die komplette Bildschirmgröße angepasst werden. Diese Technik wird bereits vom Videoportal YouTube bereitgestellt, wenn Nutzer den Code zum Einbetten abrufen.

Beispiel:

In diesem Fall wird jedoch nur das Video beim Abspielen auf die Vollbildschirmansicht vergrößert. Der iframe behält die im Code hinterlegte Größe. Soll diese Größe auch auf das Vollbild übertragen werden, muss zusätzlich JavaScript verwendet werden.

Sandboxing: Mit HTML5 eingebundene iframes können mit entsprechenden Sandbox-Attributen versehen werden. So kann der Programmierer beeinflussen, ob der iframe Inhalte der Website verändern darf, auf der er eingebunden ist. Ursprünglich war diese Funktion nicht möglich, da Browser auf der „Same-Origin-Policy“ basieren und so verhindern, dass eingebundene Elemente von anderen Servern die Inhalte der angezeigten Website manipulieren. Das Umgehen dieser Sicherheitsfunktion kann wichtig sein, wenn der Anbieter des iframes zusätzliche Formularabfragen benötigt, damit die Inhalte im iframe überhaupt genutzt werden können, wie z.B. eine Altersabfrage. Der iframe müsste dann um folgendes Attribut erweitert werden:

Weggefallene Attribute: iframes in HTML5 nutzen standardmäßig weder die style=border noch die scrolling-Attribute, da Rahmen für iframes nicht mehr zeitgemäß sind und modernes Layout stören. Auch die Ausrichtung über align wird nicht mehr unterstützt. Der noframe-Tag enfällt in HTML5 ebenfalls.

iframes und SEO

Suchmaschinen können iframes zwar erkennen, allerdings berücksichtigen Crawler die Inhalte der Inlineframes nicht, sondern folgen nur den darin enthaltenen Links zum Ursprung. Es kann auch vorkommen, dass einige Browser ebenso wie manche CMS einen iframe nicht korrekt darstellen können. Somit ist es zugunsten einer besseren Usability und Acessibility empfehlenswert, auf den übermäßigen Gebrauch von iframes zu verzichten. Das Laden von iframes kann beispielsweise durch die Installation eines Browser AddOns, z.B. NoScript von Firefox, verhindert werden. Wichtige Informationen aus dem Frame-Element werden dann nicht mehr dargestellt.

Das Blockieren von iframes erfolgt dann aus Sicherheitsgründen, da die frames theoretisch auch genutzt werden können, um Schadsoftware aus dem Internet nachzuladen.

Weblinks

[http://www.w3schools.com/tags/tag_iframe.asp