1. Startseite
2. JavaScript
3. BOM (Browser Object Model)

BOM - Browser Object Model

Neben dem DOM (Document Object Model) gibt es auch ein BOM das Browser-Object-Model.

Bei dem Browser-Object-Model handelt es sich um eine API, über die wir Zugriff auf Informationen des Browsers erhalten. Das BOM beginnt am window-Object, dieser Startpunkt ist der einzelne Tab im Browser, das kennen wir bereits vom DOM. Der Startpunkt ist derselbe, das bedeutet, dass wir an Stelle von "document" auch "window.document" schreiben könnten, es würde auf das gleiche Objekt verweisen. Auch die Standartobjekte: Array, Function oder Object sind Eigenschaften des window-Object. Das Window-Objekt ist nicht nur der Einstiegspunkt für das DOM oder BOM, sondern auch diverser anderer API´s.

Die Größe und Position des Browserfensters ermitteln

Bei der Bestimmung von Position und Größe des Browserfensters gibt es eine ganze Reihe an Eigenschaften. Die Eigenschaften "outerHeight" und "outerWidth" stehen für die Höhe und die Breite des Browserfensters inklusive aller Browserleisten.

console.log(window.outerHeight); // Gesamte Browserhöhe
console.log(window.outerWidth); // Gesamte Browserbreite

Die Eigenschaften "innerHeight" und "innerWidth" stehen für die Höhe und Breite ohne Browserleisten, aber mit Scrollleisten.

console.log(window.innerHeight); // Innere Browserhöhe
console.log(window.innerWidth); // Innere Browserbreite

Über die Eigenschaften "screenX" und "screenY" erfahren wir, wo sich das Browserfenster am Bildschirm befindet.

console.log(window.screenX); // Horizontale Position des Browserfensters
console.log(window.screenY); // Vertikale Position des Browserfensters

Über die Eigenschaften "scrollX" und "scrollY" erfahren wir, wie weit der Inhalt gescrollt wurde, alternativ dazu gibt es die Eigenschaften "pageXOffset" und "pageYOffset".

console.log(window.scrollX); // Horizontal gescrollt
console.log(window.scrollY); // Vertikal gescrollt
console.log(window.pageXOffset); // Horizontal gescrollt
console.log(window.pageYOffset); // Vertikal gescrollt

Die Größe und Position des Browserfensters ändern

Dazu erstellen wir einfach ein neues Fenster mit der Methode "window.open()"

neuesFenster = window.open('', '', 'width=300, height=250');

Die Methode "window.open()" erwartet 3 Argumente. Das erste Argument ist die URL des neuen Fensters. Das zweite Argument ist der Name des neuen Fensters (nicht der Name von der Webseite). Über ein drittes Argument kann aussehen und verhalten des neuen Fensters beeinflusst werden. Dabei werden Wertepaare in Form von Zeichenketten übermittelt, mehrere Eigenschaftspaare werden mit Komma voneinander getrennt.

Fenster verschieben

Über die Methode "moveBy()" lässt sich ein Browserfenster um eine bestimmte Pixelanzahl verschieben.

neuesFenster = window.moveBy(100, 100);

Fenster fokussieren

Um das versetzte Fenster im Vordergrund zu behalten, verwenden wir die Methode "focus()".

neuesFenster = window.focus();

Fenster skalieren

Mit der Methode "resizeBy()" können wir das Browserfenster um einen bestimmten Faktor skalieren.

neuesFenster = window.resizeBy(50, -20);

Mit der Methode "resizeTo()" können wir das Browserfenster auf eine bestimmte Größe skalieren.

neuesFenster = window.resizeTo(400, 200);

Fensterinhalt scrollen

Die Methode "scrollTo()" scrollt den Inhalt zu einer bestimmten Position.

neuesFenster = window.scrollTo(200, 100);

Die Methode "scrollBy()" scrollt den Inhalt um eine bestimmte Anzahl von Pixel.

neuesFenster = window.scrollBy(100, 50);

Fenster schließen

Neben der Option, über JavaScript ein neues Browserfenster zu öffnen und zu verändern, sind wir auch in der Lage, dieses Browserfenster zu schließen.

neuesFenster = window.close();

Auf Anzeigeinformationen der Browserleiste zugreifen

Das Browserfenster besteht aus verschiedenen Komponenten. Darunter zählen die Adressleiste, die Menüleiste, die Werkzeugleiste, die Scrollleisten und noch ein paar andere Leisten, die Status und persönliche Add-ons anzeigen. Wir können mit verschiedenen Eigenschaften prüfen, ob bestimmte Leisten eingeblendet werden oder nicht.

Dialoge öffnen

Um mit dem Benutzer ein Dialog zu starten, gibt es in JavaScript verschiedene Methoden.

Meldungen

Mit der Methode "alert()" werden einfache Meldungen über ein zusätzliches Fenster ausgegeben.

alert('Meldungen ausgeben');

Meldungen

Die Methode "confirm()" öffnet einen Dialog mit einer Meldung, die zur Abfrage dienen soll. Der Rückgabewert von "confirm()" ist entweder "true" oder "false".

confirm('Zustimmung einholen');

Eingabe

Über die Methode "prompt()" wird ein Dialogfenster geöffnet, in dem der Benutzer Text eingeben kann. Der Rückgabewert der Methode "prompt()" ist der Text, der vom Benutzer eingegeben wurde oder "null", wenn keine Eingabe erfolgt ist.

prompt('Werte abfragen');

Drucken

Der Dialog muss nicht zwangsweise über den Bildschirm erfolgen. Mit der Methode "print()" wird das Druckmenü geöffnet, um die Webseite auszudrucken.

print();

Funktionen zeitgesteuert ausführen

Um Funktionen zeitgesteuert ausführen zu können, stehen uns zwei Helfermethoden zur Verfügung.

Interval

"setInterval()" führt eine Aktion in bestimmten Zeitabständen aus.

ausgabe = window.setInterval(function() {
 console.log('Zeitgesteuerte Ausgabe');
}, 3000);

Sobald die Methode aufgerufen wird, erfolgt alle 3 Sekunden also alle 3000 Millisekunden die Ausgabe "Zeitgesteuerte Ausgabe" in der Konsole. Um die Ausgaben zu stoppen, verwenden wir die Methode "clearInterval()". "clearInterval()" benötigt einen eindeutigen Parameter, um auch den korrekten Intervall zu stoppen.

clearInterval(ausgabe);

Timeout

"setTimeout()" führt eine Aktion nach einem bestimmten Zeitraum aus. Die Methode "setTimeout()" erwartet als erstes Argument eine anonyme Funktion oder den Namen einer Funktion, die ausgeführt werden soll. Als zweites Argument wird der Zeitraum in Millisekunden angegeben, bis die Funktion aufgerufen werden soll.

ausgabe = window.setTimeout(function() {
 console.log('Zeitgesteuerte Ausgabe');
}, 3000);

In der Konsole wird nun einmalig nach 3000 Millisekunden die zeitgesteuerte Ausgabe ausgegeben. Um diese Ausgabe zu verhindern, verwenden wir die Methode "clearTimeout()".

clearTimeout(ausgabe);

Bei der Methode "setTimeout()" wird eine Funktion einmalig nach einer bestimmten Zeit aufgerufen. Bei der Methode "setInterval()" wird hingegen nach Ablauf einer bestimmten Zeit immer wieder eine Funktion aufgerufen.

Auf Navigationsinformationen der aktuellen Webseite zugreifen

Der Zugriff auf die Navigationsinformationen erfolgt über die Eigenschaft "location".

Auf einzelne Bestandteile der URL zugreifen

Eine URL besteht aus verschiedenen Bestandteilen. Beginnend mit dem Protokoll (https://), gefolgt vom Hostname (www.webseite.de). Darauf folgt die Portangabe oder eine Pfadangabe bis hin zum Dateiname. Manchmal hängen dann noch ein paar Informationen hinten dran, das sind dann die Queryparameter.

Die Eigenschaft "href" enthält die gesamte URL.

location.href;

Die Eigenschaft "protocol" enthält das Protokoll der URL mit dem Doppelpunkt.

location.protocol;

Die Eigenschaft "host" enthält den Hostname der URL. Wenn eine Portangabe vorhanden ist, wird auch dieser mit angegeben.

location.host;

Die Eigenschaft "hostname" enthält den Hostname der URL. Hier gibt es keine Portangabe.

location.hostname;

"port" enthält den Port einer URL.

location.port;

"pathname" enthält den Pfad einer URL.

location.pathname;

Die Eigenschaft "search" enthält den Querystring beginnend mit dem Fragezeichen(?).

location.search;

Die Eigenschaft "hash" enthält den sogenannten "Fragment Identifer", zusammen mit dem #-Symbol. Der "Fragment Identifer" wird verwendet, um beim Aufruf einer Seite bis zu einer bestimmten Stelle zu scrollen.

location.hash;

Gefolgt von weiteren Eigenschaften.

Auf Querystring-Parameter zugreifen

Um auf die einzelnen Parameter zugreifen zu können, benötigen wir die Hilfe von regulären Ausdrücken und extrahieren dann die Werte, die wir benötigen.

Den Browserverlauf einsehen und verändern

Die Eigenschaft "history" ermöglicht es uns auf ein Objekt zuzugreifen, welches über den Browserverlauf verfügt. Damit können wir nicht nur den Verlauf einsehen, sondern auch verändern.

Im Browserverlauf Navigieren

Jedes Mal, wenn der Browser eine Seite lädt, wird ein neuer Eintrag im Browserverlauf erstellt. Die einzige Ausnahme ist dabei die Methode "replace()", bei der wird kein Eintrag erzeugt. Der Einfluss auf den Browserverlauf steht noch nicht so lange zur Verfügung. Noch vor wenigen Jahren gab es nur die Möglichkeiten, die Anzahl der Einträge im Browserverlauf auszulesen sowie das vor und zurückblättern und das springen auf einen bestimmten Index.

Die Anzahl der Einträge

Über die Länge des "history"-Objekt können wir die Anzahl der Einträge herausfinden.

console.log(window.history.length);

Eine Seite zurück springen

window.history.back();

Wieder eine Seite vorwärts springen

window.history.forward();

Mehrere Seiten springen

window.history.go(-2);

Aktuelle Seite neu laden

window.history.go(0);

Weiteres

Bei Single-Page Applikationen werden keine neuen URL´s generiert, weil nur ein Teil der Seite neu geladen wird. Mit JavaScript können auch Einträge zu dem Browserverlauf hinzugefügt werden. Bei Veränderungen im Browserverlauf können wir entsprechend reagieren. JavaScript ermöglicht es uns auch, den aktuellen Eintrag im Browserverlauf zu ersetzen.

Browser erkennen und Browserfeatures bestimmen

Um Information über den Browser selber zu erhalten, verwenden wir die Eigenschaft "navigator" des "window"-Objects

console.log(window.navigator);

Die Eigenschaft stellt eine ganze Reihe an Informationen bereit. Die Eigenschaft "navigator.userAgent" wurden früher gerne verwendet, um Rückschlüsse auf den verwendetet Browser ziehen zu können. Dabei ging es nie darum herauszufinden, wer mit welchem Browser online ist, sondern um heraus zu finden, welche Features der Browser unterstützt, um dadurch die meiste Performance mit JavaScript raus zu holen.

console.log(window.navigator.userAgent);

Inzwischen wird stattdessen überprüft, ob der Browser bestimmte Features unterstützt:

if (navigator.geolocation) {
 console.log('geolocation wird unterstützt');
} else {
 console.log('geolocation wird nicht unterstützt');
}

Neben der "geolocation"-Eigenschaft gibt es noch viele weitere Eigenschaften, die abgefragt werden können.

Auf Informationen des Bildschirms zugreifen

Mit der Eigenschaft "screen" vom Objekt "screen" können wir auf bestimmte Werte wie die Höhe oder Breite des Bildschirmes zugreifen oder in Erfahrung bringen, welche Farbtiefe oder Pixeltiefe der Bildschirm verwendet.