Kurs: JavaScript

6.4.1 window.open

Mittels window.open() können Sie weitere Browserfenster öffnen. Als Rückgabe erhalten Sie dabei ein neues window-Objekt, das Sie normalerweise in einer Variablen speichern werden, um so im weiteren Programmverlauf Einfluss auf dieses neue Fenster zu nehmen.
Für das zu öffnende Browserfenster (oftmals auch als Pop-Up bezeichnet) können Sie eine Reihe von Argumenten angeben, die das Aussehen und Verhalten des neuen Fensters bestimmen.

Die Syntax der Methode lautet:

  window.open(URL, Name des Fensters, [ Eigenschaften des Fensters ])

Als erstes geben Sie den URL der Seite an, die in dem neuen Fenster geöffnet werden soll. Wollen Sie ein leeres Fenster erzeugen, können Sie als URL-Argument einen leeren String("") angeben.

Zweites Argument ist der Name des Fensters. Dieser Name hat die gleiche Bedeutung wie der Name, den ein Frame bei seiner Erstellung erhält. Das heißt, es ist möglich, diesen Namen im HTML-Code zu verwenden, um eine Seite in dem neuen Fenster anzeigen zu lassen.

Die Eigenschaften des Fensters wurden hier in eckigen Klammern dargestellt. Gemeinhin bedeutet dies, dass diese Angaben optional sind, also weggelassen werden können. Wollen Sie Eigenschaften für das Fenster angeben, fassen Sie diese alle in einer Zeichenkette zusammen, die folgenden Aufbau hat:
"Attribut1=Wert1, Attribut2=Wert2, …"

Beispielskript:
    <script type="text/javascript">
      mein_fenster = window.open("test.html", "popup", "width=320, height=240");
    </script> 
Ansehen

Grafik1

Das Skriptbeispiel zeigt den Aufruf der Methode open(), wobei die Seite test.html angezeigt und dem Fenster der Name popup zugeordnet wird. Außerdem werden als Eigenschaften des Fensters width und height für die Breite und Höhe des Fensters angegeben.
Die Variable mein_fenster dient als Zeiger auf das Fenster, um mit anderen Methoden auf das geöffnete Fenster zugreifen zu können, z.B. um es mit close() wieder zu schließen:

  mein_fenster.close();

Als Ergebnis von window.open() sehen Sie (zumindest in einigen Browsern, z.B. denen von Netscape) ein Browserfenster ohne die sonst üblichen Menüleisten. Dieses Verhalten können Sie steuern, indem Sie die entsprechenden Attribute im Eigenschaften-Argument angeben. Sofern die dafür erforderlichen Argumente nicht angegeben werden, gilt der jeweilige Standardwert, was eben gerade dafür sorgt, dass weder Menüleiste noch Statuszeile angezeigt werden.

Der nachfolgenden Liste können Sie alle möglichen Attribute für die Steuerung der Eigenschaften des Fensters entnehmen mit der Voreinstellung für den Fall, dass Sie ein Attribut nicht angeben. Leider gehen auch hier schon die Browser-Hersteller unterschiedliche Wege, so dass einige Attribute im Internet Explorer und den Browsern von Netscape unterschiedlich heißen.

Argument Verfügbarkeit Beschreibung Voreinstellung

dependent

JS 1.2, NN4

Legt die Abhängigkeit des geöffneten Fensters vom öffnenden Fenster fest. Sofern yes angegeben ist, schließt sich auch das geöffnete Fenster beim Schließen des öffnenden Fensters.

no

directories

JS 1.0, NN2, IE5

Legt fest, ob das geöffnete Fenster eine Menüleiste mit den Navigationsschaltflächen besitzen soll.

no

fullscreen

JS 1.3, IE5

Legt fest, dass das Fenster voller Bildschirmgröße geöffnet werden soll

no

height

JS 1.0, NN2, IE3

Beziffert die Höhe des Fensters in Pixeln.

-

hotkeys

JS 1.2, NN4

Aktivierung bzw. Deaktivierung der Tastaturkommandos für ein Browserfenster.

yes

innerHeight

JS 1.2, NN4

Beziffert die Höhe des Anzeigebereichs im geöffneten Fenster in Pixeln.

-

innerWidth

JS 1.2, NN4

Beziffert die Breite des Anzeigebereichs im geöffneten Fenster in Pixeln.

-

left

JS 1.3, IE3

Beziffert die Position der linken oberen Ecke des geöffneten Fensters auf der horizontalen Achse der Bildschirmanzeige.

-

location

JS 1.0, IE5

Legt fest, ob das geöffnete Fenster eine Adress-Zeile besitzen soll.

yes

locationbar

JS 1.0, NN2

Legt fest, ob das geöffnete Fenster eine Adress-Zeile besitzen soll.

no

menubar

JS 1.0, NN2, IE3

Legt fest, ob das geöffnete Fenster eine Standard-Menüleiste besitzen soll. Beim Internet Explorer werden damit ebenso die Navigationsschaltflächen eingeblendet. Der Netscape Navigator speichert diese Eigenschaft unter dem Namen directories ab (siehe dort).

no im NN,

yes im IE

resizable

JS 1.0, NN2, IE3

Legt fest, ob das geöffnete Fenster skalierbar ist.

yes

screenX

JS 1.2, NN4

Beziffert die Position der linken oberen Ecke des geöffneten Fensters auf der horizontalen Achse der Bildschirmanzeige.

-

screenY

JS 1.2, NN4

Beziffert die Position der linken oberen Ecke des geöffneten Fensters auf der vertikalen Achse der Bildschirmanzeige.

-

scrollbars

JS 1.3, IE3

Legt fest, ob das Fenster Scrollbalken haben soll

no

status

JS 1.0, NN2, IE3

Legt fest, ob das geöffnete Fenster eine Statusleiste besitzen soll.

no im NN,

yes im IE

top

JS 1.0, IE3

Beziffert die Position der linken oberen Ecke des geöffneten Fensters auf der vertikalen Achse der Bildschirmanzeige.

-

width

JS 1.0, NN2, IE3

Beziffert die Breite des Fensters in Pixeln.

-

In den Übungen soll nach und nach ein etwas größeres Beispiel entwickelt werden, in dem Sie einige Features einbauen, die man oft bei der Erstellung von Webseiten benötigt:
Auf der Beispielseite will ein Veranstaltungsservice Tipps fürs Wochenende präsentieren, wobei Sie für folgende Aufgaben zuständig sein sollen:
- Englischsprachige Besucher werden automatisch auf die englische Version der Seite weitergeleitet.
- Damit der Besucher in Ruhe alle Tipps lesen und sich die Veranstaltungen merken kann, die ihn interessieren, stellt die Seite einen Notizzettel zur Verfügung.
- Der Besucher kann sich eine druckerfreundliche Variante der Seite in einem neuen Fenster anzeigen lassen.

Übung 6.3:
Gestalten Sie eine Seite mit drei Veranstaltungstipps fürs Wochenende. Bringen Sie auf dieser Seite einen Link unter, der eine druckerfreundliche Variante (eine meist etwas einfacher gestaltete weitere HTML-Seite) in einem neuen Fenster öffnet.
Schreiben Sie eine Funktion, die ein neues leeres Fenster für den Notizzettel öffnet und rufen Sie diese per Button für jeden Veranstaltungstipp auf.

Hinweis:
"Popup-Fenster" werden von manchen Websites dazu missbraucht, störende Werbung anzuzeigen. In vielen modernen Browsern kann daher das Öffnen neuer Fenster unterdrückt werden – dann sehen Sie bei unseren Beispielen unter Umständen nichts. Wählen Sie z.B. in Opera unter File->Preferences die Kategorie Windows aus und stellen Sie in der Liste unter Pop-up Windows den Eintrag Accept pop-up windows ein, um window.open() testen zu können.