IFrames richtig einsetzenEingebettete Elemente
Mit IFrames integrieren Sie externe Dokumente in Ihre Website oder realisieren eine Navigation. Der Workshop zeigt, welche Möglichkeiten Ihnen IFrames bieten und wie Sie Probleme mit den eingebetteten Elementen vermeiden.
Simple Lösung
IFrames richtig einsetzen
Mit IFrames steht dem Webdesigner ein einfacher Weg zur Verfügung, um externe Elemente innerhalb eines HTML-Dokuments einzubetten. Dabei teilen IFrames nicht wie herkömmliche Frames den Bildschirm über die gesamte Breit oder Höhe auf, sondern sind als Bereiche innerhalb der Webseite zu verstehen, in denen andere HTML-Dokumente und Daten angezeigt werden können. Diese Bereiche können sehr präzise definiert werden und fügen sich so perfekt in das eigene Design ein.
Immer dann, wenn Sie Informationen in einer Box fester Größe anzeigen wollen oder aber Daten für andere Websites bereitstellen möchten, ohne verschiedene Versionen für unterschiedliche Skriptsprachen erzeugen zu wollen, sind IFrames eine simple Lösung, da sie einfach in ein HTML-Dokument eingebaut werden. Es ist auf dem Server, auf der die HTML-Seite liegt, keine besondere Skriptsprache notwendig, selbst wenn ein IFrame dynamische Inhalte enthält. Die eingebettete Seite wird vom entfernten Server angefordert und im Browser innerhalb des IFrame-Fensters angezeigt.
IFrames werden beispielsweise von Amazon (www.amazon.de) für das Partnerprogramm eingesetzt. Partner generieren hier Produkt-Kästen, die auf Amazon-Artikel verlinken und die Partner-ID übergeben. Die Produkt-Kästen selbst sind IFrames, die überall leicht eingebaut werden können.
So geht’s
IFrames richtig einsetzen
Der Einsatz des iframe-Elements ist dem object-Element sehr ähnlich, mit dem sich zum Beispiel Medienelemente wie Bilder und Videos oder auch ganze HTML-Dokumente in eine andere HTML-Seite einbetten, ausrichten und steuern lassen. Ein einfaches Beispiel für ein iframe-Element:
Die HTML-Seite extern.html wird an dieser Stelle in Ihre Website eingefügt und bei Bedarf mit Scrollbalken versehen.
IFrames anpassen
IFrames richtig einsetzen
Das Ergebnis ist aber noch ausbaufähig. Sie können nun noch die Höhe und Breite des IFrames festlegen, um eine optimale Darstellung zu gewährleisten, oder einen Rahmen um das eingebettete Element legen.
Eine width-Prozentangabe von 100% zieht den IFrame über die ganze Breite der Seite auf.
In den meisten Fällen wird allerdings ein fester Wert nötig sein, um die externen Informationen optimal in das eigene Layout einzupassen. Außerdem wird ein Rahmen um das Element gelegt:
Mit internen Margins definieren Sie den Abstand des Inhalts zum Rand des IFrames:
Mit vspace und hspace schaffen Sie dem IFrame auf der Außenseite noch den gewünschten Platz.
Wollen Sie die Scrollbalken unterdrücken, setzen Sie den Wert scrolling=no. Lassen Sie das Scroll-Attribut dagegen weg, dann hat dies den gleichen Effekt wie die Einstellung auto. Die Scrollbalken werden also bei Bedarf angezeigt.
Probleme und Lösungen
IFrames richtig einsetzen
Ihr Browser unterstuetzt keine Frames oder Frames wurden zeitweise deaktiviert.
Besuchen Sie alternativ die Website von Internet
Professionell
IFrames als Navigationselement
IFrames richtig einsetzen
Browser-Check und Suchmaschinen
IFrames richtig einsetzen
Seit HTML 4.0 sind die IFrames W3C-Standard. Einige Browser ? vor allem ältere Modelle ? haben trotzdem noch Probleme damit. Der Internet Explorer zeigt IFrames seit Version 4 an. Netscape 6 unterstützt IFrames, in Version 4.x funktionieren die Inline Frames dagegen nicht. Nur auf dem Mac kann Netscape 4.7 mit IFrames umgehen. Opera kennt die IFrames seit Version 4, allerdings kann die Unterstützung hier vom Anwender ausgeschaltet werden, was dem Webdesigner die Suppe versalzen kann.
Um zu verhindern, dass Suchmaschinen nur einzelne IFrames indizieren und die eigentliche umgebende Website ignorieren, können Sie Ihre IFrames noch mit einem Javascript ausstatten, das bei einem Einzelaufruf das gesamte Frameset nachlädt. Das folgende Skript funktioniert problemlos mit IFrames und ist auch dann hilfreich, wenn sich Besucher direkt auf den IFrame verirrt haben:
<!? Begin
if (window == top) top.location.href = ?index.html";
// End ?>
index.html ersetzen Sie mit der Seite, die den IFrame als Element beherbergt. Nun folgt der Spider beispielsweise von Google den angegebenen Links zurück auf Ihre Website, führt den Javascript-Code jedoch nicht aus.
Fazit
IFrames richtig einsetzen
IFrames sind eine einfache Lösung, wenn Sie eine Box mit Angeboten, News oder eine gesamte Website innerhalb Ihrer Seite platzieren möchten. IFrames werden von allen modernen Browsern unterstützt, können aber ohne Anpassungen auch Suchmaschinen in die Irre führen. Eine Alternative zu IFrames sind beispielsweise Layer, die mit der gleichen Funktionalität ausgestattet und wesentlich flexibler gehandhabt werden können.
Alle Dateien und Listings zum Workshop finden Sie auf der Heft-CD und unter listings.internet-pro.de.