Javascript Fenster-Objekt

Optionen beim Fenster festlegen

Will man ein neues Fenster aus der HTML-Seite heraus öffnen, ist Javascript der richtige Ansprechpartner, aber man sollte mit dieser Technik sehr vorsichtig umgehen. Spammer haben schon Seiten mit vielfach sich öffnenden Fenster produziert und die Popups, wie neu geöffnete Fenster in kleinem Format auch heißen, sind nicht gerade sehr beliebt.

Fenster-Objekt in Javascript

Manchmal machen sie aber Sinn, um Zusatzfunktionen anbieten zu können - Beschreibungen zum eben präsentierten Produkt, Druckausgaben, Rechner für die Kalkulation oder viele mehr. Um diese Fenster anbieten zu können, verwendet Javascript das Fenster-Objekt, das über eine ganze Reihe an Optionen und Eigenschaften verfügt.

Auch hier kann man darüber diskutieren, ob man zulassen möchte, dass das Fenster durch die Maussteuerung vergrößert werden darf oder nicht. Schon bei der Verwendung des neuen Fensters selbst sollte über die Sinnhaftigkeit nachgedacht werden, bei den Optionen gilt gleiches. Das Unterdrücken der Scrollbalken dann so für viel Ärger sorgen.

Davon abgesehen ist das Fenster-Objekt ein mächtiges Werkzeug, das häufig in Javascript zum Einsatz kommen und auch auf professionellen Seiten genutzt wird, selbst wenn man Popups nicht wirklich mag, aber sie können schon wichtige Elemente eines Internetauftritts sein.

Mit dem Fenster-Objekt ein neues Fenster öffnen

Das Fenster-Objekt hat viele Optionen, aber diese funktionieren zum Teil nicht mehr, weil es völlig unterschiedliche Browser gibt und die Thematik der Bildschirmauflösungen sowie Popup-Politik rückten manche Optionen in den Hintergrund.

Wesentlich sind daher die Größe wie Breite und Höhe, die mit width (Breite des Fensters) und height (Höhe des Fensters) eingestellt werden sollten.

Das Beispiel zeigt eine Lösung mit einer Schaltfläche, durch die ein neues Fenster geöffnet wird. Im Code kann man erkennen, dass die Breite des Fensters auf 600 Pixel eingestellt wurde, die Höhe auf 400 Pixel.

Man kann nun diese Lösung mit verschiedenen Browsern durchtesten, entscheidend ist das Verständnis für das Öffnen neuer Fenster mit Javascript, wenn man diese Aufgabe umsetzen muss. Dies erfolgt, wie das Beispiel zeigt, mit windows.open, wobei der erste Parameter die Webseite ist, die im Fenster dargestellt werden soll, im zweiten Parameter bekommt das Fenster einen Namen und danach folgen die Optionen.

Zu diesen zählt

Nicht jede Option funktioniert in jedem Browser, daher sind die Angaben mit Vorsicht zu genießen. Mit "yes" und "no" sind die Optionen einstellbar.

Fenster-Objekt in der Praxis

Braucht man diese Funktion überhaupt noch? Auf normalen Webseiten kaum mehr für den eigenen Gebrauch, wie das in den Anfangszeiten des Webdesign erfolgt war. Aber es gibt einige Situationen, in denen man sich dessen gar nicht bewusst ist, dass Javascript im Spiel ist. Und eine der Situationen kennt man aus dem Alltag sogar sehr gut.

Das ist dann der Fall, wenn man auf einer Webseite ist und diese in den sozialen Netzwerken teilen will. Dann klickt man auf den Button für den gewünschten Dienst und prompt öffnet sich ein verkleinertes Fenster, damit man dort die Informationen eintragen kann. Das ist ein klassisches Beispiel für die Nutzung des Fenster-Objekts unter Javascript.

Lesen Sie auch

Ein wesentlicher Vorteil bei diversen Effekten mit Javascript ist die Tatsache, dass man das aktuelle Fenster und/oder Dokument direkt ansprechen kann. Mit dem Fenster-Objekt kann man festlegen, ob es sich in der Größe verändern darf, beim Dokument-Objekt kann man die Hintergrundfarbe ändern oder andere Daten abrufen.

Weitere Möglichkeiten gibt es mit den Event-Handler. Das sind die berühmten Funktionen rund um Links, wie der Mouseover-Effekt, aber auch bei Formularfeldern gibt es Möglichkeiten. Einige dieser Optionen sind aber durch CSS schon abgelöst worden. Eine andere Variante ist die umfangreiche Bibliothek jQuery, mit der mittels AJAX auch PHP-Abfragen von Datenbanken gelingen, ohne die Seite neu laden zu müssen.

Diesen Artikel teilen

Kategorien

Grundlagen
HTML-Grundlagen
CSS-Grundlagen
Javascript-Grundlagen
PHP-Grundlagen
MySQL-Grundlagen
SEO-Grundlagen

Infos, Tipps, Vermarktung
Webdesign-Lexikon
Online-Werbung
PHP-Codeschnipsel