Sie sind hier: Startseite -> HTML-Grundlagen -> iFrame

Eingebetteter Frame auf Webseiten mit iFrame

Darstellen fremden Inhaltes

Eine Variante der Frame-Technik, die trotz der immer breiteren Ablehnung von Frames gerne genutzt wird, ist jene vom iFrame. Es handelt sich dabei um einen sogenannten eingebetteten Frame, der so aussieht, als würde er Teil der Seite sein, aber nicht in dem Sinne wie die herkömmlichen Frames.

iFrames werden genutzt, um fremden Inhalt auf der Seite anzuzeigen. Man kann den iFrame mit Scrollbalken ausstatten oder diese ausblenden und verschiedenste Lösungen in die eigene Seite integrieren. Die Technik ist dabei jene, dass an fremder Stelle ein Skript oder ein HTML-Dokument abläuft, es aber so aussieht, als ob dies auf der eigenen Seite erfolgt.

Erweiterung der Seite durch ein iFrame

Das Beispiel zeigt den Aufbau eines Aufrufes mit iFrame. Beliebige fremde Seiten können eingebaut werden und wirken dann so, als ob der Inhalt von der eigenen Seite stammt. Das liest sich jetzt sehr trickreich, ist aber oft beabsichtigt.

Beispiele und Nutzen der iFrames

Denken Sie an Tools wie man sie beim Wetter kennt, bei denen die Wetterkarte mit aktuellen Werten angezeigt wird. Das Wetter wird beim Anbieter aktualisiert, aber durch den iFrame sieht man auf der eigenen Webseite das Wetter mit den neuen Werten und das ist ein interessantes Service für die Leserinnen und Leser. Damit wird die eigene Seite aufgewertet, ohne dass man damit eine Arbeit hat und umgekehrt gibt es Werbung für den Anbieter, weil zu lesen ist, wer die Quelle dieser Information ist.

Ein anderes Beispiel ist ein Webshop, ein Shop mit Reiseangebote oder ähnliche Lösungen, die durch einen iFrame integriert werden und wie eigener Inhalt aussehen, in Wirklichkeit aber beim Partner ablaufen. Für den Partner ist das gute Werbung, für die eigene Seite kann es eine Verkaufsprovision bedeuten, wenn es zu einer Buchung kommt.

Sehr häufig werden Nachrichten eingebunden, speziell Börsenachrichten mit den aktuellen Kursen sind eine beliebte Lösung. Es gibt aber auch andere Möglichkeiten von Rezeptvorschlägen bis zu Kinoinformationen und alles was man tun muss ist den iFrame einzubinden.

iFrame ist super, normaler Frame nicht

Die Frames waren am Beginn des Webdesigns ein großes Thema, weil man verschiedene Dokumente in einen Raster einbauen konnte, dem sogenannten Frameset. Das hatte den Vorteil, dass man nicht jedes Seite als eigenes HTML-Dokument aufbauen musste, sondern die Navigation konnte individuell erweitert werden und galt für alle Seiten - also das, was heute bei den Webseiten mittels Datenbank, PHP oder anderen Sprachen und CMS möglich ist. Damals gab es diese Lösungen noch nicht und so behalf man sich mit den Frames, die aber sperrig waren und für Sehbehinderte eine Katastrophe.

Heute nutzt man diese Variante zum Glück nicht mehr und viele kennen die Technik gar nicht. Mit dem iFrame interessante externe Inhalte einzubinden, macht hingegen Sinn und ist ein erweitertes Angebot für die Leserschaft. Aber man muss damit auch vernünftig umgehen, denn nur wirklicher Mehrwert rechtfertigt den Einsatz. Aktuelle Kursdaten sind eine solche Möglichkeit, das Wetter auch.

Zu beachten ist aber auch, dass man sich darauf verlassen können muss. Wenn durch diese Widgets, wie die Zusätze gerne bezeichnet werden, die Ladezeit sich deutlich erhöht, macht es keinen Sinn und man sollte es lassen, denn gerade bei den Mobiltelefonen ist die Ladezeit ein wichtiger Faktor geworden - nicht nur für die Suchmaschinen.

Buchtipp: Einstieg in HTML und CSS (Thalia)*
* = Affiliate-Link; bei Kauf unterstützen Sie diese Plattform

Lesen Sie auch

Die Positionierung auf der Webseite ist eines der Themen, die am stärksten verändert wurden. Statt der Layouttabelle wird mit Ebenen, den div-Tags gearbeiten, die Framesets gibt es nicht mehr und auch die align-Befehle werden zwar noch verwendet, sind aber durch CSS praktisch abgelöst worden.

Mit dem align-Zusatz horizontal und valign vertikal hat man lange Jahre die Texte an Bilder ausgerichtet und umgekehrt, mit CSS-Definitionen lässt sich das aber längst leichter bewerkstelligen.

Ein anderes Thema ist die Ebene mit dem div-Tag, die auch für die responsive Darstellung für Handys und andere Geräte zuständig ist. In Kombination mit CSS gelingen so sehr übersichtliche Seiten, die sich auch anpassen können. Ebenfalls oft im Einsatz ist ein besonders Element auf der Seite und zwar der IFrame als Platzhalter für externen Inhalt wie etwa Börsennachrichten.

Themenseiten

Diesen Artikel teilen

Infos zum Artikel

eingebetteter Frame mit iFrameArtikel-Thema: Eingebetteter Frame auf Webseiten mit iFrame
Beschreibung: Mit dem 🌍 iFrame kann man in HTML ✅ externe Inhalte in die eigene Webseite integrieren wie etwa Wetterberichte, News oder andere Daten.

Kategorien

Grundlagen
HTML-Grundlagen
CSS-Grundlagen
Javascript-Grundlagen
PHP-Grundlagen
MySQL-Grundlagen
SEO-Grundlagen

Infos, Tipps, Vermarktung
Webdesign-Lexikon
Online-Werbung
PHP-Codeschnipsel
Praxisartikel