JavaScript - Objektreferenz - window

1. Das Objekt

Das window-Objekt steht in der Hierarchie des DOM an oberster Stelle. Daneben gibt es keine weiteren. Damit steuern wir ein Fenster als Ganzes. Dieses Objekt verfügt über Eigenschaften und Methoden.

2. Eigenschaften

innerHeight, innerWidth

(Internet Explorer ab Version 9)

Hiermit kann die innere Höhe und Breite eines Fensters abgefragt werden, also alles im eigentlichen Fenster ohne Menüleiste, Favoriten, Statuszeile, und so weiter.

breite = window.innerWidth;
alert (breite);

outerHeight, outerWidth

(Internet Explorer ab Version 9)

Hiermit kann die Gesamthöhe und -breite eines Fensters abgefragt werden.

hoehe = window.outerHeight;
alert (hoehe);

pageYOffset, pageXOffset

(Internet Explorer ab Version 9)

Fragt die aktuelle horizontale bzw. vertikale Position innerhalb einer Seite ab. Diese Eigenschaft kann wunderbar mit der Methode scrollTo kombiniert werden.

left_posi = window.pageXOffset;

name

Speichert und ändert den Namen eines Fensters. Ist besonders sinnvoll im Zusammenhang mit der Methode open.

3. Methoden

alert

Gibt eine Fehlermeldung aus. Eignet sich hervorragend, um nach Fehlern zu suchen oder auf fehlerhafte Benutzereingaben des Users zu reagieren.

breite = window.innerWidth;
if (breite < 740)
{
  alert ('Bitte die Fensterbreite vergrößern');
}

open

Öffnet ein neues Fenster. Im Gegensatz zur HTML-Attribut target="_blank" hat man deutlich mehr Einflussmöglichkeiten. Diese Methode erwartet mindestens zwei Parameter, optional drei. Der erste ist der Name der Datei, der zweite der Name des Fensters und im dritten definieren wir das Aussehen, also Größe, Darstellung, Scrollleisten und so weiter.

Der dritte Parameter

• height, width (px) Breite und Höhe des Fensters
• left, top (px) Position des Fensters in Pixeln
• resizable (yes|no) verhindert bzw. erlaubt, dass die Fenstergröße verändert werden kann
• scrollbars (yes|no) mit oder ohne Scrolleiste

window.open ('bla.htm', 'Blabla', 'width=300, height=400, scrollbars=no');

moveBy, moveTo

Verschiebt das Fenster um den angegebenen Wert. Der Unterschied liegt darin, dass man bei moveBy sagt, um wie viele Pixel es verschoben wird, während man mit moveTo sagt, wohin man es platzieren möchte. Erwartet werden zwei Werte, für die X- und Y-Position, moveBy gestattet auch negative Zahlen.

blubber = window.open ('blubb.htm', 'blubb', 'width=300, height=400');
blubber.moveBy (50,50);
blubber.moveTo (100,200);

prompt

Öffnet ein Dialogfenster mit einem Textfeld, das über einen Ok- und Abbrechen-Button verfügt.

eingabe = prompt ('Tipp was ein!', '');

print

Öffnet den "Drucken"-Dialog. Entspricht der Vorgehensweise "Datei" -> "Drucken". Es gibt keine Parameter.

resizeBy resizeTo

Verändert die Größe eines Fensters um den angegebenen Wert. Auch gilt derselbe Unterschied wie in obigem Beispiel. resizeBy verändert die Größe relative zum Ursprungswert, resizeTo dagegen absolut. Erwartet werden zwei Werte, für die X- und Y-Position. resizeBy gestattet auch negative Zahlen.

window.resizeBy (-50,50);
window.resizeTo (250,400);

scrollBy, scrollTo

Scrollt zu einem bestimmten Punkt. Bei scrollBy die Anzahl von Pixeln, bei scrollTo zu einer Position. Erwartet werden zwei Werte, für die X- und Y-Position. scrollBy gestattet auch negative Zahlen.

window.scrollBy (-20, -10);
window.scrollTo (100, 100);

setTimeout, clearTimeout

setTimeout führt eine Anweisung mit einer bestimmten Verzögerung aus. Es werden zwei Parameter erwartet, erstens die Anweisung oder Funktion und zweitens die Verzögerung in Millisekunden. Mit clearTimeout kann man das vorzeitig beenden. Als Parameter benötigt man die Referenz von setTimeout. Allerdings muss man bei diesen Methoden nicht das Hauptobjekt window angeben. Zu diesem Thema gibt es auch ein kleines Tutorial.

function tuWas ()
{

}
bla = setTimeout ("tuWas()", 5000);
clearTimeout (bla);

setInterval, clearInterval

Funktioniert fast wie setTimeout/clearTimeout. Der einzige Unterschied besteht darin, dass setInterval immer wieder nach einer bestimmten Zeitspanne aufgerufen wird. Und die gibt man im zweiten Parameter an.

function tuWas ()
{

}
bla = setInterval ("tuWas()", 1000);
clearInterval (bla);

4. Eine Besonderheit

opener

Damit könnt ihr von neu geöffneten Fenstern auf alle Eigenschaften und Methoden des Ursprungsfensters zugreifen. Um was es sich hier handelt, ist ein wenig umstritten. Manche nennen es eine Eigenschaft, manche bezeichnen es als Objekt und dann gibt es noch ein paar Leute die darin eine Art von Instanz des window-Objektes sehen.

window.opener.close ();
window.opener.location.href= 'bla.htm';
window.opener.style.color = '#f00';

var blubber = window.open (...);
blubber.opener.close();

zurück zum vorherigen Abschnitt weiter zum nächsten Abschnitt