8.8 Fenster bewegen mit JavaScript  
Prinzipiell gibt es zwei Möglichkeiten, ein Fenster zu bewegen, und das ist reine Definitionssache. Entweder wollen Sie das gesamte Fenster irgendwohin bewegen, oder Sie wollen den Inhalt des Fensters scrollen. Beides ist mit neueren Browsern möglich und wird an dieser Stelle kurz vorgestellt.
8.8.1 Fenster verschieben 
Eine häufig gestellte Frage lautet: Wie kann ich das Browserfenster zentrieren? Andere Leute wiederum möchten, dass das Browserfenster maximiert oder minimiert wird (so viel vorweg: Das ist nicht möglich) oder dass es sich am oberen Bildschirmrand befindet. Dies ist kein aufwändiges Verfahren, es müssen einfach entsprechende Eigenschaften des window-Objekts gesetzt oder ausgelesen oder Methoden aufgerufen werden. Übertreiben Sie es jedoch nicht mit diesen Effekten. Viele Webbesucher reagieren ziemlich giftig, wenn man ihnen vorschreiben will, wo sich ein Fenster befindet.
Moderne Browser können ein Fenster verschieben, und zwar sowohl an eine bestimmte Position als auch um einen gewissen Wert. Dazu gibt es zwei Methoden:
 |
window.moveTo(x, y): Verschiebt das Fenster so, dass die linke obere Ecke die Koordinaten (x, y) hat. Es handelt sich hier um eine absolute Verschiebung. Sie können das Fenster damit nicht aus dem sichtbaren Bereich hinaus verschieben, außer Sie verwenden signierte Skripten (die werden in Kapitel 29 behandelt). |
| |
window.moveBy(x, y): Verschiebt das Fenster horizontal um x Pixel, vertikal um y Pixel, führt also eine relative Verschiebung durch. Auch hier kann das Fenster nicht aus dem sichtbaren Bereich hinaus verschoben werden. |
Erinnern Sie sich noch an die Auflistung der Parameter für window. open()? All diese Parameter sind auch gleichzeitig Eigenschaften für das window-Objekt. Somit werden beispielsweise mit window.outerHeight und window.outerWidth die Ausmaße des Browserfensters angegeben.
Um nun die Maximierung eines Fensters zu simulieren (man führt damit nicht die API-Funktion für die Fenstermaximierung aus, sondern vergrößert das Fenster nur entsprechend), muss man noch die Ausmaße des Bildschirms bestimmen. In JavaScript kann man diese Werte aus dem screen-Objekt erhalten:
| |
screen.availWidth enthält die Bildschirmbreite. |
| |
screen.availHeight enthält die Bildschirmhöhe. |
Eine Funktion zum Maximieren des Fensters sieht also folgendermaßen aus: Die linke obere Ecke des Fensters wird zunächst an die linke obere Ecke des Bildschirms gesetzt, und dann wird das Fenster entsprechend vergrößert.
function maximieren() {
window.moveTo(0, 0);
window.outerHeight = screen.availHeight;
window.outerWidth = screen.availWidth;
}
8.8.2 Fensterinhalt scrollen
Bereits in JavaScript Version 1.1 wurden Methoden zum Scrollen des Fensterinhalts eingeführt. Die dazugehörige Methode heißt window.scroll(x, y). Sie scrollt den Fensterinhalt an die angegebenen Koordinaten. Es ist eigentlich unlogisch, dass das Scrollen eine Methode des window-Objekts ist, da ja nicht das Fenster gescrollt wird, sondern das Dokument, das sich darin befindet. Auch hier gilt: Übertreiben Sie es nicht. Der Benutzer ärgert sich immer, wenn er das Gefühl hat, nicht die Kontrolle über ein Fenster zu besitzen. Scrollen Sie also nur dann, wenn es wirklich Sinn macht.
Eine der möglichen Anwendungen besteht darin, nach oben zu scrollen. Auf vielen längeren Webseiten finden Sie einen Link, der nach oben scrollt – Sie ersparen Ihren Benutzern so die Mühe, mit der Maus den Scrollbalken zu treffen. Dieser Effekt wird meistens so angeboten:
<a href="#top">nach oben</a>
Am Anfang des Dokuments befindet sich eine Textmarke namens "top", zu der dann gescrollt wird. Das ist ein netter Effekt, vor allem bei längeren Dokumenten. Zum einen jedoch ändert sich die URL – was Neulinge immer stark irritiert, man glaubt es kaum –, und zum anderen ist es bei komplexeren Dokumenten nicht immer möglich, ganz oben eine Textmarke unterzubringen. Wenn beispielsweise direkt nach dem <body>-Tag ein Werbebanner eingefügt wird (manche Gratis-Hoster machen das so), kann man nie nach ganz oben scrollen.
Das Scrollen an den Dokumentenanfang geht ganz bequem. Es muss einfach zu den Koordinaten (0, 0) gescrollt werden:
<a href="javascript:window.scroll(0, 0)">nach oben</a>
In JavaScript 1.2 wurden zwei neue Methoden eingeführt. Dabei verhält sich window.scrollTo(x, y) genauso wie window.scroll(x, y), während window.scrollBy(x, y) neu ist: Ebenso wie bei window.moveBy(x, y) wird hier relativ gescrollt.
Die Methoden zum Scrollen werden im Zusammenhang mit der exakten Positionierung von HTML-Dokumenten bei DHTML noch interessant werden; fürs Erste aber sollte dieser Einblick genügen.
1 Der Koordinatenursprung liegt in der linken oberen Ecke des Bildschirms.
Ein kurzes Wort zu diesem neuen Sprachelement von JavaScript. Bei with() handelt es sich primär um eine Sprachabkürzung. Wenn Sie, wie im Listing gezeigt, with (fenster.document) { ... } verwenden, können Sie sich innerhalb der geschweiften Klammern das Tippen von fenster.document sparen; die Aufrufe open(), write() und close() beziehen sich hier alle auf fenster.document, da dieses Objekt bei with() in den runden Klammern angegeben worden ist.
|
