Ihr Browser ist veraltet
Um sicher im Internet zu surfen und moderne Websites richtig darzustellen, empfehlen wir Ihnen ein Update.
Hier auf Updates prüfen
schließen

20.03.2023

Das iframe-Element

Das iframe-Element

Der iFrame ist ein HTML-Element und steht in seiner Kurzform für Inlineframe. Mit dem <iframe> Tag können externe Inhalte in die eigene Seite eingebunden und angezeigt werden. Die wohl bekanntesten und am weitesten verbreiteten Anwendungsfälle sind Google Maps und YouTube Video Einbindungen. Es können jedoch auch ganze Webseiten auf andern mittels dieses Tags eingebettet werden. Auch Werbeanzeigen und Wetterdaten werden meist über iFrames eingebunden.

Eingeführt wurden sie allem voran zur Reduzierung von Arbeitsaufwand für die Programmierer. Der Tag vereinfacht die Einbindung deutlich und wirkt zusätzlich zu Gunsten der Usability und Nutzerfreundlichkeit, denn so können die Fremdinhalte direkt auf der aktuellen Website eingesehen werden, ganz ohne Weiterleitung.

Code/Syntax

An sich braucht es nur eine Quellenangabe, um einen iFrame einzubetten. Die Angabe eines Titels gehört jedoch zur ordentlichen Praxis und sollten auf den Inhalt verweisen, da Screen Reader diesen nutzen. Während es diverse HTML und CSS Attribute zur Anpassung des Frames gibt, stellen wir folgend nur ein paar vor:

allow

Über das allow Attribut kann der Zugriff auf Features wie Kamera und Mikrofon geregelt werden. Aber auch die Vollbild-Darstellung sowie der Zugriff auf Standort Daten sind möglich.

height & width

Über diese Attribute kann die Größe des Rahmens angegeben werden. Wird nichts anderes angegeben, ist der iFrame 300 Pixel breit und 150 Pixel hoch.

loading

Spezifiziert das Ladeverhalten des Inlineframe. Standardmäßig wird der Frame sofort geladen, auch wenn er sich noch nicht im Sichtfeld befindet (eager). Wird der Wert „lazy“ übergeben, wird der Inhalt erst geladen, wenn ein bestimmter Abstand zum Sichtbereich erreicht worden ist.

sandbox

Mittels des sandbox Attributs können inhaltliche Einschränkungen geregelt werden, um die Sicherheit zu gewährleisten. Wird das Attribut ohne Werte übergeben, sind alle Einschränkungen aktiv. Diese umfassen die Folgenden:

  • den Inhalten wird der same-origin Status verweigert
  • unterbindet Downloads
  • verweigert das Absenden von Formularen
  • verweigert das Ausführen von Skripten
  • blockiert APIs
  • blockiert Pop-Ups
  • blockiert Sperrung der Bildschirmausrichtung
  • verweigert die Anzeige modaler Dialoge

Diese Einschränkungen können mit verschiedenen Werten explizit erlaubt werden. Durch ein Komma getrennt können mehrere Erlaubnisse erteilt werden.

Exkurs: Die Same-Origin-Policy

Es handelt sich hierbei um einen Sicherheitsmechanismus, der externe Inhalte, wie sie mittels iFrames eingebunden werden, vom Quellcode der eigentlich besuchten Website isoliert. Inhalte haben die gleiche Origin wenn die URLs über den gleichen Port laufen, das gleiche Protokoll nutzen und die gleiche Domain vorweisen. Ist dies nicht der Fall, die Interaktivität jedoch gewünscht und die Quelle vertrauenswürdig, kann dieser Sicherheitsmechanismus mittel allow-same-origin umgangen werden.

Kompatibilität und SEO

Suchmaschinen-Crawler erkennen iFrames zwar auch als solche, deren Inhalt wird jedoch bei der Bewertung nicht berücksichtigt.

Es besteht immer die Möglichkeit, dass ein Browser oder auch CMS einen iFrame und dessen Inhalt nicht richtig darstellen können. Weiterhin gibt es Browser Add-Ons, die das Laden verhindern können. Diese werden oft als Sicherheitsmaßnahme eingesetzt, da die Inlineframes eine Sicherheitslücke darstellen können und die Datenschutzkonformität nicht immer gegeben ist.

Aus diesem Grund sollte davon abgesehen werden, essenzielle Informationen über iFrames einzubinden. Diese sollten direkt gepflegt werden, um die richtige Anzeige sicherzustellen.

Quellen & weiterführende Links

https://www.w3schools.com/tags/tag_iframe.ASP

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe?retiredLocale=de#scripting

https://www.eology.de/wiki/iframe

https://de.ryte.com/wiki/iframe

Kontakt

Für Ihre Fragen, Anregungen und Anmerkungen haben wir immer ein offenes Ohr.

Sie können uns natürlich auch telefonisch erreichen:
034298 / 208 478