Meldung

19.08.2007 - PopUp Fenster in JavaScript

Unter einem PopUp-Fenster versteht man ein mittels JavaScript geöffnetes Browserfenster. PopUps werden häufig eingesetzt um Fenster zur Anzeige von Werbebotschaften verwendet. Allerdings können diese Fenster nicht allein zu Werbezwecken genutzt werden. Denkbar ist auch die Nutzung von PopUps zur Anzeige von Detailbildern in Bildergalerien oder aber das Präsentieren von Zusatzinformationen, die in der eigentlichen Seite keinen Platz mehr finden.

Im allgemeinen werden Events genutzt um PopUp-Fenster automatisch zu öffnen. Direkt nach dem Laden einer HTML-Seite wird das JavaScript-Event onLoad ausgelöst, welches das Öffnen eines Browserfensters auslösen kann. Das Öffnen des Fensters wird über das onLoad-Attribut des BODY-Tags eingeleitet. Dieses Attribut enthält dabei einen JavaScript-Aufruf, der das PopUp-Fenster über einen Funktionsaufruf oder den Aufruf der Methode window.open öffnet. Ein PopUp-Fenster kann aber auch geöffnet werden, wenn vom Benutzer ein onClick-Event durch Anklicken eines HTML-Elements mit der Maus ausgelöst wird. Auch hier kann durch Angabe einer Funktion im onClick-Attribut ein neues Browserfenster zur Darstellung zusätzlicher Informationen geöffnet werden.

Zum Öffnen oder Schließen von PopUps unter JavaScript werden Methoden des in JavaScript vordefinierten Objekts Window benötigt. Für das Öffnen eines neuen Browserfensters wird die Methode open() des Window-Objekts eingesetzt – auch diese Methode wird im Beispielbereich näher beschrieben und Anhand von praktischen Beispielen demonstriert. Das Aussehen des Fensters wird per Parameter, die als Zeichenkette angegeben werden, angepasst – Anzeige von Browserelementen, wie beispielsweise Adresszeile, Menüleiste, Status- und Toolbar. Soll ein PopUp-Fenster geschlossen werden, so erfüllt die Methode close() diesen Zweck. Dazu wird ein Verweis auf das Window-Objekt der zuvor geöffneten Browserinstanz benötigt, welche die close-Methode als Parameter benötigt.

Eines der Beispiele verwendet das href-Attribut um das Öffnen eines HMTL-Fensters einzuleiten. Über das Anklicken des Links wird ein PopUp nach Ablauf eines Timeouts (mit setTimeout realisiert) geöffnet. Damit keine unerwünschten Nebeneffekte auftreten wird der Void-Operator zur Ünterdrückung des von setTimeout gelieferten Rückgabewertes genutzt.

Alexander Müller