CSS, HTML und Javascript mit {stil}

Javascript window • Browserfenster

Javascript Window Adresse der Webseite, Größe des Browserfensters.

Javascript Window ist die Schnittstelle zum Browser mit Breite und Höhe des ViewPorts, Events und Timern und das API zur URL und der Geolocation.

HTML body erzeugt automatisch ein Window-Objekt in Javascript. JS window ist das API zum Browserfenster mit der URL, Statuszeile, Dialogboxen, dem Dokument, der Ereignissteuerung und Timern.

window.matchMedia ist das Äquivalent zu CSS Media Queries in JavaScript und unterstützt obendrein Events.

Dass Javascript sich mit Browsern und Webseiten versteht, verdankt es seinen vorgefertigten Objekten. Die Objekte des Browserfensters liegen in einer leicht nachvollziehbaren Hierarchie.

Javascript wird von der ECMA standardisiert, aber das Window-Objekt und (fast) alles, was darunter liegt, legt das W3C fest. Dort hat das Document Object Model große Karriere gemacht, aber das Windows-Objekt kam nie richtig zum Zuge: Window Object 1.0 W3C.

Auflösung, URL und Screen

Dennoch hat das Window-Objekt nützliche Informationen zu bieten: die Auflösung des Browserfensters und die nutzbare Höhe und Breite des Browserfenster sowie die URL, die Adresse der aktuellen Webseite.

Die Informationen zur Anzeige der Webseite sind nicht konsistent unter den Browsern und mussten trickreich programmiert werden. Heute unterstützen die modernen Browser windows.matchMedia, Internet Explorer unterstützt windows.matchMedia IE10.

Javascript window Object windowModell desBrowserfensters ● documentDocumentObject frames ● locationURL desaktuellen Fensters historyZuvor besuchteURL (nur lesen) ● navigatorDer Browser,der die Seiteaktuell anzeigt ● screenEigenschaftendes Monitors

Bei History, Location, Navigator und Screen holt sich Javascript Informationen: Auflösung und Farbtiefe des Monitors, die Historie des Browserfensters (wo war Benutzer vorher?), Betriebssystem, Browsertyp und die Adresse der Webseite. Der Manipulation dieser Objekte sind aber enge Grenzen gesetzt.

window.document (nur lesen )

Document-Objekt des aktuellen Fensters – Zentrale für das Scripting von Internetseiten. Das Document Object – DOM – liegt zwar unter dem Window-Objekt, ist aber der Kern des Javascripts für Webseiten.

window.location (lesen/schreiben)

URL des aktuellen Fensters.

window.history(index) (nur lesen)

die URLs, die vom aktuellen Fenster besucht wurden.

window.navigator Referenz

Verweis auf das Navigator-Objekt (den Browser).

window.screen Referenz

Ermittelt Eigenschaften des Bildschirms

Viele Methoden und Eigenschaften von JS Window haben an Bedeutung verloren: Für window.screen und window.history gibt es kaum noch eine Verwendung, window.frames ist heute überflüssig. Die Javascript-Funktionen resizeTo/resizeBy und moveTo werden von den Browsern blockiert. window.navigator liefert keine Informationen über den Browser und das Betriebssystem, auf denen Javascript sicher agieren kann.

Dafür hat das window-Objekt eine neue Eigenschaft: window.matchMedia ist das Äquivalent zu Media Query in CSS3 und fragt Eigenschaften der Anzeige auf dem jeweiligen Gerät ab. Dazu gibt es eigene Events, die Größenänderungen und Änderungen der Orientierung des Browserfensters entdecken.

window self, closed und opener

self | window Referenz

window.self ist ein Verweis auf das aktuelle Window-Objekt – ein Synonym für window. window wiederum ist ein Verweis auf das aktuelle Fenster, in dem das Script agiert.

window.closed Boolean

Ein boolescher Wert, der angibt, ob das angesprochene Fenster/ der Frameset geschlossen wurde.

window.opener

Beim Öffnen eines neuen Fensters gibt window.opener Informationen über das Fenster zurück, aus dem das Fenster geöffnet wurde.

window.opener.source schliesst z.B. das Quellfenster. window.opener gibt null zurück, wenn der Benutzer das Fenster geöffnet hat.

<button id="jswinOpener">Neues Fenster öffnen</button>
… 
<script type="text/javascript">
var jswinOpener = document.getElementById('jswinOpener'); 
jswinOpener.onclick = function() {
   window.open('NewWindow.html',
               'testMyOpener',
               'width=500,height=800'); 
}
</script>
innerWidth | innerHeight Integer

verfügbare Breite und Höhe des Browserfensters in Pixeln
Wird von IE nicht unterstützt. Das Äquivalent für IE ist

document.body.clientWidth | document.body.clientHeight
outerWidth | outerHeight Integer

Größe des Fensters mit allen Elementen wie Scrollleisten und Titelleiste in Pixeln.
Wird von IE nicht unterstützt und es gibt auch kein Äquivalent.

pageXOffset | pageYOffset Integer

gibt an, wie weit das aktuelle Dokument von der oberen linken Ecke des Fensters horizontal bzw. vertikal gescrollt wurde.
Wird von IE nicht unterstützt. Das Äquivalent für IE ist

document.body.scrollLeft | document.body.scrollTop
screenX | screenY Integer

X/Y-Kooridinaten des Browsers auf dem Monitor
Wird von IE nicht unterstützt. Das Äquivalent für IE ist

window.screenLeft | window.screenTop
window.name (lesen und ändern) String

liest bzw. ändert den Namen des aktuellen Fensters. Das Browserfenster hat per Vorgabe keinen Namen, aber der String window.name ist immer vorhanden, auch wenn er leer ist.

Mit window.name können Daten zwischen Fenster übertragen werden – sogar bei Dokumenten aus verschiedenen Domainen.

window.defaultStatus String

Ein Text, der in der Statuszeile des Browserfensters angezeigt wird. Wird in den Browsern beim Laden des Fensters häufig nur kurz angezeigt.

window.defaultStatus = "Meine schöne Seite";

Firefox deaktiviert den Zugriff auf die Statuszeile durch Javascript aus Sicherheitsgründen. Das Beispiel funktioniert in Firefox nur, wenn in den erweiterten Einstellung für Javascript „Statuszeilentext ändern“ aktiviert ist (und welcher Besucher macht das schon?).

window.status (lesen und schreiben)

Eine Nachricht, die kurz in der Statuszeile des Browsers angezeigt wird.

Die meisten Browser zeigen flüchtige Hinweise für den Benutzer in einer Statuszeile am unteren Rand des Fensters. Wenn der Benutzer die Maus über einen Link führt, zeigt der Browser i.d.R. die URL des Links und löscht den Hinweis sofort wieder, wenn die Maus den Link verlässt. Wenn der Benutzer die Maus über eine Schaltfläche führt, kann der Browser eine Kontexthilfe zu der Schaltfläche anzeigen.

window Events

EreignisBeschreibung
onloadwird aufgerufen, wenn das Dokument oder der Frameset vollständig mit allen Bildern und Plugins im Fenster geladen ist
onunloadwird aufgerufen, wenn der Browser das Dokument verlässt
onfocuswird aufgerufen, wenn das Fenster den Fokus erhält
onblurwird aufgerufen, wenn das Fenster den Fokus verliert
onerrorwird aufgerufen, wenn ein JavaScript-Fehler auftritt. Wird mit drei Argumenten aufgerufen: Fehlermeldung, URL des fehlerhaften Dokuments, Zeilennummer des Fehlers
onresizewird aufgerufen, wenn die Größe des Fensters geändert wird

window und frames

window.frames (frameID)

ein Array mit allen FRAME-Elementen des aktuellen Fensters

window.length

Anzahl der Frames, die in diesem Frame oder Fenster enthalten sind.

window.parent (lesen) Referenz

Verweis auf das Fenster oder den Frame, die das aktuelle Fenster aufgerufen haben. Wenn das aktuelle Fenster ein Frame ist, ist window.parent ein Verweis auf das Fenster, das den Frame enthält

top
Synonym für das oberste Browserfenster