iFrames

Was sind iFrames? Einfach erklärt!

Ein iFrame ist eine praktische HTML-Erweiterung, die Betreiber einer Webseite nutzen, um Inhalte auf ihrer Website einzubetten. Diese Art von Rahmen ermöglicht es, Inhalte von einer externen Quelle auf deiner eigenen Seite zu präsentieren, wie z.B. Werbebanner, Videos, Bilder oder andere digitale Inhalte, die ursprünglich von einer anderen Website stammen. Darüber hinaus können iFrames auch interne Bereiche und Inhalte anzeigen. Mit iFrames kannst du deine Website um nützliche und ansprechende Funktionen erweitern, ohne dass du den Code manuell kopieren und einfügen müssen.

Funktion und Verwendung von iFrames

Der Begriff iFrame steht für Inlineframe. Ein iFrame ist im Kern ein HTML-Dokument, das innerhalb eines anderen HTML-Dokuments eingebettet wird. Dies geschieht mithilfe eines speziellen Codes, der es ermöglicht, den Inhalt des iFrames anzupassen. Hierbei können unterschiedliche Variablen genutzt werden, um das iFrame an die Bedürfnisse der Website anzupassen. 

Mit iFrames kannst du deine Website auf einfache Weise um ansprechende und nützliche Funktionen erweitern, indem du externe Inhalte einbindest. So kannst du beispielsweise Werbebanner, Videos, Bilder und andere digitale Inhalte präsentieren, ohne dass du diese manuell kopieren und einfügen musst.

Es ist wichtig zu beachten, dass iFrames mit externen Links eine Herausforderung darstellen können, wenn es darum geht, den Inhalt anzupassen. Da das Hosting dieser Inhalte nicht auf der eigenen Website liegt, haben CSS-Dokumente keinen Einfluss auf das iFrame. Dies bedeutet, dass die Anpassungsmöglichkeiten begrenzt sind und dass zu viele Fremdinhalte, die über iFrames eingebunden werden, zu niedrigeren optischen Anpassungsmöglichkeiten und einer nachteiligen Auswirkung auf die Responsivität der Website führen können.

Anwendungsbeispiele für ein über iFrame eingebettetes Fremdobjekt sind YouTube-Videos. Hierbei wird das Video auf deiner Website angezeigt, obwohl es tatsächlich auf einem anderen Server gehostet wird. Aufgrund der Einschränkungen bei der Anpassung dieser Inhalte ist es wichtig, sorgfältig abzuwägen, wie viele Fremdinhalte auf einer Website eingebettet werden sollen.

Wenn du ein iFrame auf deiner Website einbinden möchtest, musst du zunächst den Quellcode deiner Seite bearbeiten. Dort kannst du eine HTML-Zeile einfügen, die das Frameset darstellt, und dieses mit verschiedenen Attributen anpassen. Mit diesen Attributen kannst du die optische Darstellung des iFrames, wie Höhe, Breite und Ausrichtung, festlegen.

Attribute von iFrames

Für iFrame stehen beispielsweise folgende Attribute zur Verfügung: die Breite und die Höhe, die sowohl relativ über Prozente als auch absolut in Pixeln angegeben werden können.Das srcdoc-Attribut ermöglicht es, HTML-Codes als Inhalt des iFrames anzugeben, dieses Verhalten ist äquivalent zu einer Data-URL mit HTML als Inhalt.

Für die Bildlaufleiste oder auch Scrollbars gilt:

  • scrolling=“yes“ – Bildlaufleisten erzwingen,
  • scrolling=“no“ – Bildlaufleisten unterdrücken
  • scrolling=“auto“ – automatisch, je nach Platzbedarf (ist Voreinstellung)

Und für die Rahmenbreite:

  • frameborder=“0″ – Rahmen nicht sichtbar
  • frameborder=“1″ – Rahmen sichtbar

HTML5 und iFrames

Mit der Einführung von HTML5 gibt es neue Möglichkeiten, um iFrame-Codes zu verbessern und zu erweitern. Dazu gehört beispielsweise das Attribut „allowfullscreen“, das die Anzeige von Inhalten im Vollbildmodus mit optimaler Bildschirmauflösung ermöglicht. Dies ist beispielsweise nützlich, wenn du eingebettete Videos auf die volle Größe des Bildschirms anpassen möchtest. Darüber hinaus können „Sandbox“-Attribute hinzugefügt werden, um die Befugnisse des iFrames in Bezug auf Veränderungen an der hostenden Website zu regulieren.

Im Zusammenhang mit HTML5 gibt es auch einige Änderungen bei den Standardeinstellungen. Beispielsweise werden die scrolling-Attribute und das Attribut style=border nicht mehr standardmäßig verwendet. Auch das Attribut „align“ und der noframe-Tag werden nicht mehr genutzt. Ebenso sollte das longdesc-Attribut vermieden werden. Diese Änderungen zeigen, dass sich die Nutzung von iFrames ständig weiterentwickelt und es wichtig ist, auf die neuesten Entwicklungen zu achten, um die bestmöglichen Ergebnisse zu erzielen.

Vorteile von iFrames 

  • Ladezeit und Speicherplatz: Einer der Vorteile, die das Einbinden von externen Inhalten mittels iFrame bietet, ist, dass es die Ladezeit und den Speicherplatz auf der eigenen Website nicht beeinflusst. Fremde Inhalte werden an einer anderen Stelle gehostet und beanspruchen somit keinen Platz auf der eigenen Seite. Dies kann zu einer schnelleren Ladezeit beitragen und eine optimale Nutzererfahrung fördern.
  • Leichter Content integrieren: Ein weiterer Vorteil von iFrames ist, dass du leicht Content von anderen Websites integrieren kannst. Dies kann besonders praktisch sein, wenn du zum Beispiel eine Werbeanzeige auf deiner Website platzieren möchtest, die sich öfter ändert.
  • Zeitersparnis: Zudem kann man durch das Einbinden von Inhalten über iFrames den Arbeitsaufwand minimieren, da man den Content nicht selbst neu gestalten muss.
  • Interne Inhalte integrieren: Zusätzlich können iFrames dazu verwendet werden, um interne Inhalte und Bereiche auf deiner Website anzuzeigen. Du kannst beispielsweise einen Kalender oder eine Karte in einem Frame auf deiner Website einbetten, ohne dass sich der restliche Inhalt der Seite ändert.

Nachteile von iFrames 

Einbindung von Inhalten mithilfe von iFrames kann zwar Vorteile wie schnelle Ladezeit und minimierte Arbeitsaufwände mit sich bringen, es sollte jedoch beachtet werden, dass es auch einige Nachteile gibt:

  • Links und Bookmarks: Bei der Verwendung von iFrames können zum Beispiel keine Links und Bookmarks auf den eingebetteten Inhalt gesetzt werden.
  • Höheres Risiko: Außerdem bergen externe Links ein höheres Sicherheitsrisiko, besonders im Hinblick auf den Schutz von Nutzerdaten.
  • Fehlende Kontrolle: Der Websitebetreiber hat keine Kontrolle über die Funktionalität solcher externen Links.
  • Inkonsistenz: Darüber hinaus kann es auch zu inkonsistenten Darstellungen von iFrames in verschiedenen Webbrowsern kommen.

Sind iFrames für SEO-Seiten sinnvoll?

Wenn es um die Suchmaschinenoptimierung geht, ist es von Bedeutung zu wissen, dass Suchmaschinen wie Google iFrame-Tags im HTML-Code erkennen können, jedoch die Inhalte innerhalb der Rahmen nicht berücksichtigen. Stattdessen wird lediglich dem Link zur ursprünglichen Website gefolgt. Daher sollten bei wichtigen, SEO-relevanten Inhalten iFrames vermieden werden.

Ein übermäßiger Gebrauch von iFrames beeinflusst außerdem die Usability, da diese bei unzureichender Darstellung durch Webbrowser oder CMS beeinträchtigt werden kann. Alles in allem sind iFrames in Bezug auf die SEO von Vorteil, solange sie sinnvoll eingesetzt werden und keine wichtigen Inhalte beeinträchtigen.