www.lipfert-malik.de>webdesign>tutorial>HTML für alle Browser> iframe Impressum

„iframe” für Netscape 4
Kristof Lipfert
Dipl.-Des.(FH)

Web-Design Beispiel zu den Tutorien HTML für alle Browser und CSS für alle Browser, iframe

Mit einem neuen iframe für Netscape 4 kann für viele Zwecke eine einheitliche Syntax bei JavaScript, zugleich auch bei HTML und CSS, für alle üblichen Browser ab Version 4 eingesetzt werden. Weitere Browserweichen werden oft überflüssig.

Iframe Beispiel

Valides HTML + CSS

Beim Aufbau der Seite wird für Netscape 4 das CSS des "iframe"-Tags nach den IDs der Iframe abgefragt. Bei validem HTML und ohne offene Verwendung des Layer-Tags handelt es sich um per JavaScript erzeugte Layer die auch weiter per JavaScript als Iframe angesprochen werden können.

CSS und HTML Code des Iframe für Netscape 4

Im CSS, also im Head oder im externen Stylesheet, werden die nötigen Informationen für Netscape 4 innerhalb einer Browserweiche eingetragen. Bei mehreren Iframes sind die Ids als Array nach dem Schema "ida","idb"; einzutragen.

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
#iFr{ width:315px; height:200px; margin:250px;
          margin-top:20px; margin-bottom:20px; }

/*/*//*/\{! i{}

iframe { id:"iFr"; }
#iFr   { content:"if-il2.htm"; }

*}{}/* */

Das externe Script wird innerhalb des Iframe eingebunden, somit ist das JavaScript bereits vor den iframe-fähigen Browsern versteckt.

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
<iframe id="iFr" name="iFr" src="if-il2.htm" border=0 width=330>

    <script type="text/javascript" src="nc4-iframe.js"></script>

    <a class="iframe" href="if-il2.htm"> iframe als Link </a>

</iframe>


Nötige Dateien

Ausser dem Script nc4-iframe.js werden noch die Bilddateien im Ordner ./images/ benötigt. Die einfache vertikale Scrollleiste benötigt zwei Buttons mit je zwei Zuständen, also vier Bilder: buttonU.gif, buttonU.png, buttonD.gif und buttonD.png. Wegen der Nutzung des Ladezustandes sind die Bilddateien für den Ablauf des Scripts erforderlich.

Aspekte

Eine direkte Einbindung der Dateien wäre scheinbar ideal zum einmaligen Laden des Iframe, bedeutet aber Stylebeeinflussung in der eigentlichen Seite und Styleverlust beim erneuten Laden. Deshalb erfolgt hier der Aufbau des Layers für Netscape 4 ohne src-Angabe, und das Laden der Unter-Seite erst nach Aufbau der Seite.

Eine Vorgehensweise bei der nach dem Laden der Seite erst die Layer per DHTML erstellt werden und auch komplett ersetzt werden falls der Layerinhalt geändert wird wurde auch entwickelt, hier überzeugt aber die Performance bei guter Stabilität und einer, wenn auch im Bereich des Body, sehr stimmigen Einbindung des JavaScripts im Iframe-Tag.

Da Netscape 4 Beitenangaben von Divs flexibel wie max-width interpretiert und horizontales Scrollen oft nicht benötigt wird beschränken sich die Scrollfunktionen auf das Notwendige um eine gute Performance zu erreichen.

Details der Iframe Lösung für Netscape 4

Historie

Die Entwicklung scrollbarer Layer für Netscape 4 ist nicht neu, so hat auch Netscape selbst 1997 ein Script von Henri Torgemane (Netscape) veröffentlicht, „Scrollable.js” (*), das ich zunächst in modifizierter Form 1998 als Grundlage eines Iframe-Ersatz für die Artikelvorschau eines Shopsystems getestet und dann aber durch andere Entwicklungen ersetzt hatte.

Mehrere Gründe sprechen gegen die Verwendung des von Netscape angebotenen Scripts. Zunächst die relativ grosse Datenmenge der Datei mit einer daraus resultierenden schlechten Performance. Dann der nicht W3C konforme Ansatz mit Layer-Tags. Dazu Probleme mit der schlechten Trennung der eingebunden Seiteninhalte von anderen Seitenteilen. Und die fehlende direkte Ansprechbarkeit durch Links bzw. per Target-Attribut im A-Tag. Auch eine sehr hohe Empfindlichkeit des Scriptes gegenüber Eigenschaften der einzubinden Datei, Probleme bei Styleangaben, Verlust von Styles, Absturz oder Scriptversagen beim Einbinden von Dateien. Schwierig auch eine relative Positionierung umzusetzen, dann unschöne Markierungeffekte von Text beim Anklicken der Scrollleiste.

Entsprechend diesen Kritikpunkten habe ich bei meiner Iframe-Lösung für Netscape 4 zunächst die Adressierbarkeit durch auf der Seite befindliche Links (auch in verschachteleten Divs oder Layern) realisiert. Dazu eine schlankere Scrollfunktion mit nur gut 1 k (zum Vergleich, das Netscape Paket ereicht über 40 k Datenmenge nur für Scrollfunktionen). Weiterhin standen W3C konforme Lösungen per Div oder wie hier per JavaScript im Vodergrund; auch eine Lösung mit dynamisch für Netscape 4 erzeugten Frames ist aus den dargelegten Sollanforderungen entstanden und seit 1999 auf einigen Seiten im Einsatz. Zugleich ging es um störungsfreie Einbindung und Austausch von Iframe-Dateien.

Bei der Anpassung des Iframes für Netscape 4 an die Standards des W3C und der Kompatibilität zu anderen Browsern ging es nicht nur um konformes HTML, CSS und JavaScript, sondern auch um um den Zugang zum CSS, also z.B. die automatische Anwendung der Styleangaben auf den Ersatziframe und automatische Erkennung von Layerverschachtelungen, Aspekte die in der 2002 veröffentlichten Arbeit „CSS für alle Browser” und ihren Teilen „JavaScript für alle Browser” „HTML für alle Browser” ausführlich dargelegt sind, und hier den u.a. einfachen Umgang mit der Funktion load ermöglicht, um den Iframeinhalt aufzubauen oder zu ersetzen; load hat übrigens Vorteile bei der Anpassung des jeweiligen Inhalts an den Iframe gegenüber src.

Autor, Entwicklung

© Dipl.-Des.FH Kristof Lipfert Webdesign GbR Düsseldorf 1998,2000,2002

* Externe Links, Adressen 2002 aktualisiert