Fenstersteuerung

In diesem Thema beschäftigen wir uns hauptsächlich mit dem BOM (Browser Object Model). Das wichtigste Objekt des BOMs ist window. Die darin enthaltenen Eigenschaften erlauben es, Informationen über die Seite abzufragen, eine Weiterleitung durchzuführen oder weitere Fenster in Form eines PopUps zu öffnen und zu kontrollieren.

Seiteninformationen

Innerhalb des window-Objekts gibt es einige Eigenschaften, mit welchen wir Informationen über den Browser bzw. die angezeigte Seite abrufen können. Ein wichtiges Unterobjekt von window ist location. Die darin enthaltenen Informationen enthalten die URL bzw. deren Bestandteile der aktuellen Seite. Welche Informationen die Eigenschaften enthalten, lässt sich wohl am einfachsten feststellen, wenn man einfach den untenstehenden Code ausführt oder das untenstehende Beispiel aufruft:

document.write("innerHeight: " + window.innerHeight + "<br />");
document.write("innerWidth: " + window.innerWidth + "<br />");
document.write("<br />");
document.write("location.protocol: " + window.location.protocol + "<br />");
document.write("location.port: " + window.location.port + "<br />");
document.write("location.host: " + window.location.host + "<br />");
document.write("location.hostname: " + window.location.hostname + "<br />");
document.write("location.origin: " + window.location.origin + "<br />");
document.write("location.pathname: " + window.location.pathname + "<br />");
document.write("location.search: " + window.location.search + "<br />");
document.write("location.hash: " + window.location.hash + "<br />");
document.write("location.href: " + window.location.href + "<br />");

Die Bedeutung von window.location.search und window.location.hash geht aus dem obigen Beispiel nicht vor, weshalb wir diese hier nochmals aufgreifen möchten. window.location.search enthält die sogenannte Suchanfrage, welche mittels GET-Parameter übergeben wurde. Dieser Teil sieht z. B. wie folgt aus: ?name1=wert1&name2&werte. window.location.hash hingegen enthält den Ankernamen inkl. dem #-Zeichen, welcher der Seite übergeben wurde (z. B. #bild). window.location.port gibt in den meisten Fällen eine leere Zeichenkette zurück, da Port 80 (für HTTP) bzw. Port 443 (für HTTPs) bereits aus dem Wert von window.location.protocol hervorgeht.

Weiterleitung

Die Eigenschaften des location-Objekts lassen sich natürlich nicht nur abfragen, sondern auch zuweisen. Dadurch können wir mittels JavaScript eine Umleitung auf eine andere Seite durchführen.

window.location.href = "/";

Wichtig: Die Verwendung von window.location.href gilt als sicherste Variante zum Weiterleiten mit JavaScript. Natürlich könnten Sie aber auch window.location.pathname zum Weiterleiten verwenden, wenn Sie innerhalb der gleichen Domain bleiben. Als Wert für window.location.href sind neben relativen und absoluten Pfadangaben auch Weiterleitungen mittels einer URL-Angabe auf andere Domains möglich.

PopUp-Fenster

Mit Hilfe der Funktion open() des window-Objekts ist es möglich, ein neues Browserfenster (und somit u. U. ein PopUp) zu öffnen. Dafür können der Funktion ein oder mehrere Parameter übergeben werden. Im ersten Parameter übergeben wir die URL der anzuzeigenden Seite. Wird hier lediglich eine leere Zeichenkette übergeben, so wird ein leeres Fenster geöffnet (Seite about:blank). Der zweite Parameter ersetzt das target-Attribut, welches wir bereits von HTML-Links kennen oder gibt dem Fenster einen Namen. Die Angabe dieses Parameters wird kaum gebraucht, muss jedoch als leere Zeichenkette angegeben werden, sofern der dritte Parameter benötigt wird. Im dritten Parameter können wir dem Fenster einige Attribute (in diesem Fall eine Art von Einstellungen) mitgeben, welche im Format name1=wert1,=name2=wert2 angegeben werden müssen. Die Attribute width und height legen die Fenstergröße fest. Mit den Attributen left und top lässt sich das Fenster platzieren. Über das Attribut scrollbars und die Werte yes und no lässt sich die Anzeige von Scrollbalken steuern (diese werden in den meisten Browsern bei PopUps standardmäßig ausgeblendet).

function PopUpOeffnen()
{
	window.open("/", "", "width=350,height=400,top=100,left=100,scrollbars=yes");
}

Übrigens: Die Funktion open() gibt das window-Objekt des PopUps zurück. Dadurch ist es möglich, auf das Fenster und dessen Elemente (DOM) vollständig zuzugreifen. Natürlich können wir auch Events im PopUp registrieren. Mittels der Funktion close() ist es zudem möglich, das Fenster wieder zu schließen. Dies funktioniert jedoch ausschließlich bei PopUps.