Iframe - ein Browserfenster innerhalb der Homepage - Infos, Funktionsweise, Nachteile und Alternativen
Inhalte:
Infos zu Iframe bei Selfhtml (Nachschlagewerk zu Html, CSS, Javascript usw.)
Einfacher Beispielcode
Transparenter Iframe (funktioniert auch im Internet Explorer)
Einbau
Funktionsweise und Verlinkung von Iframe
Hinweise zum Scrollbalken und dessen farblicher Gestaltung
Nachteil vom Iframe bei Suchmaschinen und der Verlinkung der Einzelseiten
Was ist mit der Ladezeit, da gibt es doch Vorteile oder?
Wofür kann man Iframe nutzen?
Alternativen zu Iframe
Infos zu Iframe bei Selfhtml
Einfacher Beispielcode
<iframe src="willkommen.html" name="iframe" width="300" height="200" align="left"
scrolling="yes" marginheight="0" marginwidth="0" frameborder="0">
</iframe>
Iframe mit transparenten Hintergrund
Einbau
Der Iframe-Code wird an die Stelle auf der Hompeseite gesetzt, an der das Iframefenster escheinen soll.
Wenn der Webeditor keine Iframe-Funktion hat, dann im Quelltext bzw. in der Html-/Quelltextansicht den Iframe-Code einfügen. Als kleine Hilfe bei grafischen (WYSIWYG-)Webeditoren ohne Iframe-Funktion, an der gewünschten Stelle den Text
#########_Mein_Iframe_###########
schreiben, dann zur HTML-Ansicht
wechseln, den oberen Text suchen und diesen durch den Iframe-Code ersetzen.
Funktionsweise und Verlinkung von Iframe
Bei Seiten mit Iframe gibts meist nur eine Hauptseite bzw. eine Seite mit dem Homepagedesign (das ist in der Regel die
Startseite, meist index.html genannt) mit dem ganzen Drumherum (also Kopfgrafik,
Menü/Navigation usw.) und dem Iframe in der Mitte.1) Die Inhalte liegen in
Extradateien ohne das Drumherum und werden per (Menü-)Link, z.B.
<a href="mein-hobby.html" target="iframe"><b>Mein Hobby</b></a>
mit dem Zusatz
target="iframe"
in das Iframe sozusagen
eingebunden.
Anmerkung: Was bei target="iframe" innerhalb der
Anführungszeichen stehen muss, das wird im Iframe-Code bei name="iframe"
innerhalb der Anführungszeichen festgelegt.
2) Um auf der
Startseite gleich zu Beginn das "Herzlich Willkommen" einzubinden, wird dieser
Teil auch in eine Extradatei (z.B. willkommen.html) gelegt und dieser Dateiname
wird dann im Iframe-Code bei
src="willkommen.html"
angegeben.
3) Die Grösse des Iframe wird bei
width="300" height="200" festgelegt, evtl. die Breite (width) und Höhe (height) des Iframe
anpassen. So einfach funktioniert
Iframe.
Scrollbalken einfärben
Nachteil vom Iframe
Der
Nachteil (von Frames und) von Iframe ist, dass nur die einzelnen
Inhaltsdateien ohne das Drumherum (Design, Menü/Navigation usw.) oder
die Datei mit dem Iframe selbst (meist index.html) als Link
weitergegeben werden kann.
Auch Suchmaschinen finden entweder die Datei
mit dem Iframe oder die Inhaltsdateien ohne Menü, wodurch Besucher in
der Sackgasse stecken und nicht zu den anderen Seiten der Homepage
kommen können, daher sollte Iframe (und Frames) heutzutage vermieden
werden.
Was ist mit der Ladezeit, da gibt es doch Vorteile oder?
Da
die meisten Browser die Grafiken des Designs und schon einmal gezeigte
Bilder sowie den HTML-Code im Browsercache zwischenspeichern, wird ab
der 2.Seite fast nur noch der neue HTML-Code und einige neue Bilder
geladen. Und beim Anschauen von schon einmal geladen Seiten wird meist
auf den Browsercache zugegriffen, also spielt die Ladezeit kaum noch
eine Rolle. Dagegen
fallen die Nachteile bei Suchmaschinen und der Verlinkung von
Einzelseiten so stark ins Gewicht, dass von Iframe (und Frames)
abgesehen werden sollte.
Wofür kann man Iframe nutzen?
Eigentlich
nur zum Einbinden von externen Seiten (z.B. wenn das Gästebuch oder
Forum bei einem Anbieter liegt) oder von kleineren PHP-Scripten (z.B.
Shoutbox-Script o.ä.), die sich nicht mit anderen PHP-Scripten (oder
dem genutzen PHP-CMS) vertragen.
Einige Webmaster, die sich
unbedingt von der Masse abheben wollen und ihren Besuchern die Inhalte
in "Gucklöchern" (kleinem Iframe auf der Seite) zumuten, vor allem
Selbstdarsteller aus dem Bereich Musik, Kunst usw. sowie junge
Webmaster, die sich diese Seiten als Vorbild nehmen, haben eine
Vorliebe für Iframe. Oder die Faulen. Ob sie allerdings auch die
Nachteile bedacht haben?
Alternativen zu Iframe
Siehe auch
Anleitung (C) 2006 - 2008, 2010 Daniel Wurst - http://www.homepage-faqs.de