Popup-Fenster

Die kürzeste Variante, um ein Popup-Fenster zu öffnen, ist die window.open-Methode, welche hier bereits beschrieben wurde. In einem richtigen Script lässt sich diese Methode ebenfalls benutzen, sogar mit zusätzlichen Möglichkeiten.

Popup-Fenster sollten dem Surfer einen Vorteil bringen und nicht einfach nur nerven. Das ist oft schwierig zu beurteilen, da sich einige grundsätzlich bei einem unfreiwillig aufgehenden Fenster aufregen, während die anderen einen Hinweis per Popup-Fenster zu schätzen wissen.

Eine Anwendungsmöglichkeit könnten Hinweise auf neue Seiten, Aktionen oder wichtige Anlässe sein. Weiter kann ein ständig geöffnetes Popup-Fenster auch der Navigation dienen, zur Fernsteuerung des Hauptfensters. Ausserdem lassen sich darin auch kleine Umfragen bewerkstelligen. Generell gesagt eignen sich Popup-Fenster für alle Ankündigungen, Hinweise oder Fragen, die eine gewisse Wichtigkeit haben - nichts wird so beachtet wie ein unverlangt öffnendes Fenster.

Popups öffnen und schliessen

Dieses Beispiel zeigt einerseits eine Möglichkeit, wie mit einigen Funktionen ein Popup-Fenster geöffnet und geschlossen werden kann, so bald der aufrufende Link mit der Maus berührt wird respektive den Fokus verliert. Andererseits wird in der fünften Zeile eine Möglichkeit gezeigt, wie man einen erklärenden Text an das neue Fenster übergibt. Auf diese Weise bietet sich das Script beispielsweise an, um einen Link oder einen beliebigen anderen Text im Hauptfenster mit zusätzlichen Erklärungen zu versehen: So bald der User die Maus über ein Wort fährt, könnte im aufpoppenden Fenster eine Definition des Begriffs erscheinen.

Im HTML-Code müssen diese Funktionen nur noch aufgerufen werden:

<a href="javascript:mywindow()" onmouseover="showpopup('Hallo Welt')" onmouseout="closepopup()">Testlink</a>

Navigation per Popup-Fenster

Popup-Fenster können auch zur Navigation durch eine Site eingesetzt werden. Im Fenster ist ein Inhaltsverzeichnis, eine Sitemap etc. zu sehen und ist daher als einfache Fernsteuerung anzuschauen.

Diese Fernsteuerung sollte einige Anforderungen erfüllen. Beim Laden der Seite muss sie automatisch geöffnet werden, ständig im Vordergrund sichtbar sein und sie sollte vom Surfer nicht geschlossen werden können. Die in der Fernsteuerung angeklickten Links müssen zudem korrekt an das zugehörige Hauptfenster übergeben und dort geöffnet werden. Natürlich muss sich die Fernsteuerung automatisch schliessen, wenn das zugehörige Hauptfenster geschlossen wird oder der Surfer die Site verlässt.

Zwei der Anforderungen lassen sich mit JavaScript nicht komplett erfüllen: Es lässt sich nicht verhindern, dass der Surfer das Steuerungsfenster schliesst. Ausserdem kann dem Fernsteuerungsfenster zwar mit dem Befehl <body onBlur="self.focus()"> ein ständiger Fokus übergeben werden, dies führt aber dazu, dass alle anderen offenen Browserfenster gestört werden und ein zum Teil ein seltsames Verhalten zeigen. Zum Beispiel können sie dann nicht mehr problemlos geschlossen werden.

Um so eine Fernsteuerung einzubauen, werden zwei HTML-Seiten und einige Scripts benötigt. Die eine Seite - zum Beispiel die Einstiegs- oder Homepage der Site - wird dabei ins Hauptfenster geladen. Die andere beinhaltet ausschliesslich die Navigationslinks. Die Scripts, die in beiden Seiten zu finden sind, bestimmen das Verhalten der Fenster.

Zuerst wird dafür gesorgt, dass die Fernsteuerung zusammen mit der Hauptseite geladen wird. Dazu wird der Body-Tag der Hauptseite um folgenden Code erweitert:

Mit diesem Code wird die Funktion remote() gestartet, so bald die Hauptseite fertig geladen ist. Die Funktion ist dafür zuständig, dass das Remote-Fenster geöffnet und die richtige Seite geladen wird.

Die Funktion remote() besteht hauptsächlich aus der Konfiguration des Fernsteuerungsfensters, der Definition des Hauptfensters sowie der Übergabe der URL des Remote-Fensters an die Funktion. Alternativ könnte man die URL bereits in Zeile 4 als erstes Attribut des window.open -Befehls eintragen.

Die Attribute dieses Befehls ergeben in diesem Beispiel ein "nacktes" Remote-Fenster ohne Menü- und Scrollbars und ohne Statuszeile. Selbstverständlich können diese Attribute nach Belieben angepasst werden.

Im Fernsteuerungsfenster selber ist ebenfalls ein Script zu finden:

Dieses Script besteht aus zwei Funktionen: Die erste, open(url), übergibt die im HTML-Code zu definierenden Links an das Hauptfenster, wo sie geöffnet werden. Die zweite, closeWindow() , schliesst das Remote-Fenster.

Nun müssen nur noch die Links in die Fernsteuerung eingebaut werden:

Nach diesem Muster lassen sich beliebig viele Links ins Navigationsfenster einbauen. Denkbar wäre auch etwa eine komplette Sitemap, und mit einer Imagemap liesse sich das Ganze sehr ansprechend gestalten. Nicht vergessen dürfen wir allerdings die Funktion, die das Fenster wieder schliesst. In unserem Beispiel erledigt das ein weiterer Link, den wir über ein Stylesheet ein wenig anders als von Standardlinks gewohnt formatieren:

So bald der Surfer mit der Maus auf den Link gelangt, wird das Fernsteuerungsfenster geschlossen.

Formulare in Popup-Fenstern

Wie bereits erwähnt, bietet ein solches Popup-Fenster viele Einsatzmöglichkeiten. So kann mit den onLoad- und onUnload -Eventhandlern direkt vom Hauptfenster aus dafür gesorgt werden, dass ein passendes Popup automatisch geöffnet und wieder geschlossen wird, so bald man die entsprechende Seite verlässt. Per setTimeout-Befehl lassen sich die Fenster auch nach einer bestimmten Zeit automatisch wieder schliessen.

Besonders interessant ist aber die Möglichkeit, Formulardaten vom Popup-Fenster ans Hauptfenster zu übergeben. Auf diese Weise könnten etwa auszufüllende Formulare nach Bedarf in einem separaten Fenster angezeigt werden. Eine andere Möglichkeit ist das Anzeigen einer kurzen Umfrage, deren Resultate dann wiederum im Hauptfenster zu sehen sind.

Grundsätzlich bedarf das letzte Beispiel dafür bloss kleinere Änderungen. Der Aufruf des Popup-Fensters bleibt gleich, ebenso die Funktion zum Schliessen des Fensters. Geändert wird die Funktion zur Übergabe der Werte an das Hauptfenster sowie natürlich der Inhalt des Remote-Fensters: Hier findet sich jetzt ein Formular statt einer Anzahl Links. Und schliesslich müssen im Hauptfenster die entsprechenden Formularfelder ebenfalls definiert werden, allerdings unsichtbar. Im Code sieht das folgendermassen aus:

<form name="hiddenForm" action="test.htm">
<input type="hidden" name="meinText">
</form>
<script language="javascript"></script>
<p>Geben Sie Ihren Namen ein</p>
<form name="popupForm" onSubmit="return copyForm()">
<p><input type="text" name="meinText">
<p><input type="button" value="Abschicken" onclick="copyForm()"></p>
</form>

Die ersten drei Zeilen gehören dabei ins Hauptfenster (zusammen mit den Elementen des vorherigen Beispiels), die restlichen Zeilen sind für das Popup-Fenster. Nun muss noch eine neue Seite namens test.htm erstellt werden, die vom Formular in der Hauptseite aufgerufen wird - in der Location-Bar dieser Seite, die nach dem Abschicken des Remote-Formulars angezeigt wird, sieht man, dass die Daten tatsächlich übergeben wurden.

Sind die Werte erst einmal an die Hauptseite übermittelt, können sie wie üblich weiterverarbeitet werden. Und natürlich funktioniert das auch in umgekehrter Richtung, so dass das Eingabeformular etwa auf der Homepage platziert werden kann, die Resultate dagegen in einem Popup-Fenster angezeigt werden.