`window.open`

Wie öffne ich ein Popup-Fenster?

Oft kommt bei Webautoren der Wunsch auf, neue Fenster zu öffnen. Sei es für zusätzliche Informationen, Werbung oder zu externen Seiten. Soll das Aussehen des neuen Fensters bestimmt werden, reicht HTML nicht aus. Wie geht das dann?

Philosophische Antwort

Am besten gar nicht. Ungewollt aufgehende Fenster verwirren vor allem Newbies, insbesondere dann, wenn sie im Vollbild oder zumindest größer als das ursprüngliche Fenster sind. Dabei spielt es keine Rolle, mit welcher Technik (HTML oder JS) dies geschieht. Deswegen sollte man i. d. R. davon absehen, neue Fenster öffnen zu wollen.

Praktische Antwort

In einfachen Fällen mit dem target-Attribut des a-Elements in HTML Transitional, dessen Wert entweder einen frei wählbaren Namen oder _blank erhält. Anderenfalls mit Javascript, das in diesem Fall voll kompatibel zur standardisierten Variante ECMA-Script (ECMA-262) und dem Microsoft-Derivat JScript ist:

Code

<a href="Ziel-URI" target="Name" onclick="window.open(this.href, this.target, 'sonstige Angaben'); return false;" >Zieltitel</a>

Erläuterung

a

Das a-Element zeichnet i. d. R. einen Link aus, nämlich dann, wenn es ein href-Attribut hat, obwohl sein Name (a steht für »anchor«) anderes vermuten lässt.

Zieltitel

Der verlinkte Text, der natürlich nahezu alle Inlineelemente beinhalten darf, also bspw. auch img (dieses selbstverständlich mit alt-Attribut). Er sollte erkennen lassen, was hinter dem Link zu erwarten ist.

href

Dieses Attribut beinhaltet das Linkziel.

Ziel-URI

Dies kann entweder ein relativer (../example) oder absoluter (http://www.example.com/foo.bar#baz) URI sein.

target

Gibt das Zielfenster oder -frame an. Das Attribut kann auch wegfallen, dann wird der Link in Browsern ohne Javascriptunterstützung normalerweise im aktuellen Fenster geöffnet.

Das Attribut ist ab HTML 4.01 und XHTML 1.0 deprecated, d. h. nur noch in der Transitional-DTD vorhanden und sollte nicht mehr benutzt werden.

Name

Name des Zielfensters oder -frames. Links, die hierin übereinstimmen, werden im gleichen Fenster geöffnet. In HTML gibt es darüber hinaus die reservierten Namen

_self: im selben Frame / Fenster
_parent: anstelle des direkt übergeordneten Framesets
_top: anstelle des höchstens Framesets
_blank: neues, unbenanntes Fenster

onclick

Der Mausklick-Event. Der Inhalt wird automatisch als Script interpretiert, dessen Sprache richtet sich nach dem in einem meta-Element (<meta http-equiv="Content-Script-Type" content="text/javascript">) oder HTTP-Header (Content-Script-Type: text/javascript) gesetzten Dokumentenstandard.

Oftmals wird das erste c groß geschrieben, in XHTML müssen aber alle Attribute vollständig klein geschrieben werden.

window.open()

Diese JavaScript-Funktion öffnet ein Fenster und erwartet ein, zwei oder drei kommaseparierte Parameter: den URI, den Fensternamen und einen String mit Darstellungsanweisungen für das Fenster.

this.href

Übernimmt automatisch den Inhalt des href-Attributes als ersten Parameter. Man könnte das Ziel natürlich auch doppelt angeben, aber das wäre ja ineffizient und außerdem lässt sich das Linkziel so viel leichter in einem Editor bearbeiten, denn viele gewähren (einfachen) Zugriff nur auf das href-Attribut.

this.target

Übernimmt automatisch den Inhalt des target-Attributes als zweiten Parameter. Da der String auch leer sein darf – das neue Fenster hat dann eben keinen Namen –, macht es nichts, wenn das target-Attribut wie empfohlen fehlt. Alternativ lässt sich in Quotezeichen eingeschlossen ein fixer Titel angeben.

sonstige Angaben

Hier können verschiedene Angaben über das Aussehen des neuen Fensters gemacht werden, dabei unterstützen nicht alle Browser alle Eigenschaften; u. a. gibt es

Eigenschaft	Werte	Funktion	Default	JS
`dependent`	`bool`	Fenster wird geschlossen, wenn öffnendes Fenster geschlossen wird.	no	1.2
`height`	`integer`	Höhe des neuen Fensters in Pixeln.		1.0
`hotkeys`	`bool`	Funktionsfähigkeit von Tastaturshortcuts.	yes	1.2
`innerHeight`	`integer`	Höhe des Anzeigebereichs des neuen Fensters in Pixeln.		1.2
`innerWidth`	`integer`	Breite des Anzeigebereichs des neuen Fensters in Pixeln.		1.2
`left`	`integer`	Abstand des neuen Fensters von links in Pixeln.		1.2
`location`	`bool`	Sichtbarkeit der Adresszeile.	no	1.0
`menubar`	`bool`	Sichtbarkeit der Menüleiste.	no	1.0
`resizable`	`bool`	Größenänderung des neuen Fensters erlaubt.	no	1.0
`screenX`	`integer`	Horizontalwert der linken oberen Ecke des neuen Fensters in Pixeln.		1.2
`screenY`	`integer`	Vertikalwert der linken oberen Ecke des neuen Fensters in Pixeln.		1.2
`scrollbars`	`bool`	Anzeige von Scrollbars.	no	1.0
`status`	`bool`	Sichtbarkeit der Statuszeile.	no	1.0
`toolbar`	`bool`	Sichtbarkeit der Werkzeugleiste.	no	1.0
`top`	`integer`	Abstand von oben des neuen Fensters in Pixeln.		1.2
`width`	`integer`	Breite des neuen Fensters in Pixeln.		1.0

Die Eigenschaften werden von Kommata getrennt aber ohne Leerzeichen hintereinanderweg aufgeführt. Boolwerte können als 1, y oder yes ('dependent=1,hotkeys=y,location=yes') bzw. 0, n oder no ('menubar=0,resizable=n,scrollbars=no') angegeben werden, ein Ja-Wert kann auch inklusive Gleichheitszeichen ganz weggelassen werden ('status,toolbar').

return false;

Der onclick-Event muss false zurückgeben, da ansonsten auch noch das Ziel des href-Attributs im Ursprungsfenster geöffnet werden würde.

Häufige Fehler

Häufig sieht man, dass Links nur mit Javascript funktionieren. Dabei wird entweder als Ersatz für return false; eine Raute (#) in das href-Attribut eingesetzt, was je nach Browser entweder ein Springen zum Dokumentenanfang oder rein gar nichts bewirkt, oder ein Pseudoprotokoll benutzt javascript:window.open(…) . Dies beides gilt es, ebenso wie das vollständige Weglassen des href-Attributs, zu vermeiden.