JavaScript Window - Browser-Objektmodell

Browser-Object-Model (Browser Object Model (BOM) ermöglicht es JavaScript, mit dem Browser zu kommunizieren.

Browser-Object-Model (Browser Object Model (BOM))

Es gibt keine offizielle Standard für das Browser-Object-Model (BOM).

Moderne Browser haben (fast) die gleichen Methoden und Eigenschaften zur JavaScript-Interaktion implementiert, daher wird es oft als Methoden und Eigenschaften des BOM erwähnt.

Window-Objekt

Alle Browser unterstützen window Objekt. Es repräsentiert das Browserfenster.

Alle globalen JavaScript-Objekte, Funktionen und Variablen werden automatisch zu Mitgliedern des window-Objekts.

Globale Variablen sind Attribute des window-Objekts.

Globale Funktionen sind Methoden des window-Objekts.

Selbst der (HTML DOM) document-Objekt ist ein Attribut des window-Objekts:

window.document.getElementById("header");

Dasselbe wie:

document.getElementById("header");

Fenstergröße

Diese beiden Eigenschaften können verwendet werden, um die Größe des Browserfensters zu bestimmen.

Diese beiden Eigenschaften geben die Größen in Pixeln zurück:

  • window.innerHeight - Die innere Höhe des Browserfensters (in Pixeln)
  • window.innerWidth - Die innere Breite des Browserfensters (in Pixeln)

Das Browserfenster (Browseransicht) umfasst keine Werkzeugleiste und keine Scrollbalken.

Für Internet Explorer 8, 7, 6, 5:

  • document.documentElement.clientHeight
  • document.documentElement.clientWidth

oder

  • document.body.clientHeight
  • document.body.clientWidth

Eine praktische JavaScript-Lösung (für alle Browser):

Beispiel

var w = window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;
var h = window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;

Probieren Sie es selbst aus

Dieses Beispiel zeigt die Höhe und Breite des Browserfensters (ohne Toolbar und Scrollbalken):

Andere Fenstermethoden

Einige andere Methoden:

  • window.open() - ein neues Fenster öffnen
  • window.close() - das aktuelle Fenster schließen
  • window.moveTo() - das aktuelle Fenster verschieben
  • window.resizeTo() - das aktuelle Fenster neu anpassen