JavaScript - window-Objekt
Dieses mal beschäftigen wir uns mit Fenstern. Das window-Objekt von JavaScript eignet sich für viele Anwendungen.
Wenn es "window" nicht gebe, müßte man es für das WWW erfinden. Neben den Bannerwerbungen sind die Popup-Fenster immer noch die beliebteste Werbeform. Das könnte sich mittelfristig ändern, denn einige Browser und Tools rücken den ungebetenen Fenstern an den Kragen. Es gibt allerdings keine Regel, das in diesen Popup-Fenstern nur Werbung für die XY10-Spionagekamera gemacht werden darf. Besonders interessant werden diese Fenster dadurch, das bis auf die Titelleiste alle Fensterelemente an- und abschaltbar sind. Selbst wenn alle Fensterelemente übernommen werden, ist die Einstellung der Fenstergröße von Vorteil. Wird ein Browserfenster über einen Link mit target="_blank" aufgerufen, so wird ein Fenster geöffnet, das genauso groß ist wie das Ursprungsfenster. Angenommen das Ursprungsfenster ist 800600 und im neuen Fenster soll ein 160120 "großer" QuickTime-Film abgespielt werden, ist dies optisch eine Platzverschwendung.
Fenster öffne dich
Für den Anfang soll sich beim Betreten der Seite ein Fenster öffnen:
<html>
<body>
<script>
Zwei = window.open("sdl_title.jpg", "Zweites",
"width=620,height=320,scrollbars=no,resizable=no");
</script>
</body>
</html>
Bei jedem Betreten der Seite öffnen sich nun ein weiteres Fenster, das gleiche geschieht, wenn ein Reload ausgelöst wird. Ist das Fenster bei einem Reload noch auf dem Bildschirm, wird natürlich kein weiteres Fenster geöffnet, sondern die Ansicht des Zweitfensters aktualisiert.
Der erste Parameter ("Zwei") ist das Fensterhandle. Unter dem Handle ist das Fenster für JavaScript-Funktionen ansprechbar.
Der zweite Parameter enthält in diesem Fall den Namen des Bildes. Es gelten dieselben Regeln wie für HTML-Links.
Der dritte Parameter macht das Fenster für das TARGET-Attribut von HTML-Links ansprechbar. Folgender Link ändert - ganz ohne JavaScript - den Inhalt des neu geöffneten Fensters:
<a href="beispiel.txt" target="Zweites">Text einblenden</a>
Allerdings sollte man sich darauf nicht unbedingt verlassen, denn das neue Fenster könnte schließlich vor Aktivierung des Links bereits geschlossen worden sein - die Textdatei wird in diesem Fall in einem neuen Browserfenster geöffnet.
Der vierte Parameter gibt schließlich dem Fenster sein Aussehen. Die einzelnen Werte werden durch ein Komma getrennt. Möglich ist dabei so ziemlich alles, was ein Browserfenster ausmacht.
Mit width und height wird die Fensterbreite bzw. Fensterhöhe definiert. Anzugeben ist dabei die absolute Größe in Pixeln. Übrigens sind sich die Browser dabei nicht immer einig, ob die Titelleiste und evtl. Fensterränder zu der gewünschten Fenstergröße gehören. Netscape 4.5 und Opera 5 öffnen z.B. ein Fenster, dessen Innenbereich 620 Pixel breit ist. Eine Garantie, das andere Browser ebenso verfahren, gibt es natürlich nicht. Der Ratschlag, dem Browser immer ein paar Pixel Toleranz zu geben, gilt also auch hier. Wie klein ein Fenster werden darf, hängt übrigens vom Betriebssystem ab. Der Bedarf an Fenstern, die kleiner als 40 Pixel sind, dürfte aber so gering sein, das Einschränkungen vom Betriebssystem nicht ins Gewicht fallen.
Wenn ein Inhalt an die Grenzen des Fensters stößt, kann es schon sein, das dann Scrollbalken gezeichnet werden, die dann vielleicht den Fensterinhalt nur um einen Pixel bewegen. Dies gilt besonders für grafische Objekte, denn diese kann der Browser schließlich schlecht umbrechen. Mit der Angabe "scrollbars" können die Scrollbalken ein- oder ausgeschaltet werden. "Eingeschaltet" bedeutet in diesem Fall, das die Scrollbalken bei Bedarf erscheinen.
Die vierte Angabe, resizable, sperrt das Vergrößern/Verkleinern des Fensters.
Es sind natürlich noch andere Angaben möglich, womit aus dem Popup-Fenster ein "vollwertiges" Browser-Fenster wird.
Mit "locationbar" kann die Adreßzeile eingeschaltet werden, "status" aktiviert die Statuszeile und "menubar" die Menüzeile im Browserfenster, sofern der Browser überhaupt eine Menüleiste im Browserfenster unterstützt. Bei den meisten Browsern sind die Adreßzeile, Statuszeile etc. über das Menü zuschaltbar. Die Browser sperren für gewöhnlich nicht die entsprechenden Menüpunkte, wenn bspw. die Statuszeile nicht erwünscht ist.
Um das Fenster auf dem Bildschirm zu positionieren, gibt es die beiden Werte "screenX" und "screenY", die mit JavaScript 1.2 eingeführt wurden.
Elegant ist das Attribut "dependent". Damit wird das Popup-Fenster geschlossen, sobald das Elternfenster geschlossen wird. Normalerweise bleibt das Popup-Fenster stehen, was im Bereich der Werbung durchaus erwünscht ist.
Wichtig bei Fenstern, die sich beim Betreten einer Seite öffnen, ist die Möglichkeit, das Fenster auch über einen HTML-Link zu öffnen. Schließlich kann es durchaus sein, das JavaScript gerade nicht aktiviert ist. Das Anzeigen einer leeren Seite spricht dann nicht gerade für das Sachverständnis des Web-Designers.
Status
Das window-Objekt dient aber nicht nur zum Öffnen von Popup-Fenstern, sondern bietet auch einige andere nützliche Eigenschaften. Eine davon ist das Ändern der Statusleiste. Die Statusleiste befindet sich bei Light of Adamas rechts oben, bei Netscape und IE unten. Wenn alle Grafiken geladen wurde, bleibt die Leiste meist ungenutzt, es sei denn, es trat ein JavaScript-Fehler auf. Der Inhalt der Statusleiste kann durch JavaScript geändert werden, was bei einigen Seiten sogar für Animationen und Laufschriften genutzt wird. Da diese Animationen nicht zu stoppen sind und in der Statusleiste bei Netscape/IE auch das Ziel von Links angezeigt wird, sollten solche Spielereien eher vermieden werden.
Damit die Änderung der Statuszeile nicht statisch bleibt, seien hier zwei sogenannte Event-Handler vorgestellt: onMouseOver und onMouseOut. Wie aus den Namen unschwer abzuleiten ist, werden diese aktiviert, wenn die Maus einen Bereich betritt (onMouseOver) und wieder verläßt (onMouseOut). Ohne jetzt allzu tief in die Event-Verwaltung einsteigen zu wollen, sollen diese beiden Handler auf einen HTML-Link angewendet werden:
<a href="test1.html" onMouseOver="status='Das erste Beispiel'; return true;">Link 1</a><br> <a href="test2.html" onMouseOver="status='Das zweite Beispiel'; return true;">Link 2</a>
Sehr wichtig ist in dem Beispiel das "return true", den es wird eine kleine JavaScript-Funktion innerhalb des HTML-Tags ausgeführt. Wenn jetzt mit dem Mauszeiger über die Links gefahren wird, ändert sich der Text der Statuszeile. Allerdings bleibt jeweils der letzte Text stehen. Deshalb wird die Statuszeile gelöscht, wenn der Mauszeiger einen Link verlassen hat:
<a href="test1.html" onMouseOver="status='Das erste Beispiel';return true;" onMouseOut="status='';return true;">Link 1</a><br> <a href="test2.html" onMouseOver="status='Das zweite Beispiel';return true;" onMouseOut="status='';return true;">Link 2</a>
Andere Möglichkeiten, eine Beschreibung für einen Verweis anzuzeigen, sollen hier nicht verschwiegen werden. So bietet HTML 4 die Möglichkeit, mit dem TITLE-Attribut jedem Objekt und sogar einzelnen Absätzen, eine Beschreibung zu verpassen, die beim Verweilen des Mauszeigers angezeigt wird. Das TITLE-Attribut wird vom IE4, Netscape 6 und Opera 5 verstanden, Light of Adamas ignoriert es noch.
Einen Vorteil hat die JavaScript-Variante, wenn die URL sehr lang, denn ein erklärender Text kann nicht nur hilfreicher als eine lange URL sein, sondern auch optisch schöner.
Nächstes mal...
...werden die weiteren Tiefen des Window-Objektes ergründet.
Mia Jaap