PopUp-Fenster – geliebt und gehaßt
An dieser Stelle möchten wir nicht den Sinn von Javascript-PopUps diskutieren. Wie (fast) alles im Web kann diese Technik sinnvoll angewendet werden, reine Spielerei sein oder aber schlichtweg 'mißbraucht' werden. Wir gehen davon aus, daß sie sinnvoll verwendet wird und wollen zeigen, wie man sie nutzbringend aufbaut.
Hinweis: Wenn Sie PopUp-Blocker oder fortschrittliche Tab-Einstellungen nutzen, funktionieren die folgenden Beispiele uU. nicht einwandfrei.
Die Problematik
- Ein Klick auf einen Link öffnet ein PopUp
- Nächste Aktion – das PopUp verschwindet im Hintergrund
- Erneuter Klick auf einen (PopUp-)Link – was passiert? Entweder öffnet sich erneut ein PopUp, dann endet man irgendwann mit „Fenstersalat” (der u.U. den Browser in die Knie zwingt). Oder der Link öffnet sich in dem bereits geöffneten PopUp – allerdings „unsichtbar”, sprich hinter dem Ursprungs-Fenster (Parent-Window) versteckt. Subjektiver Eindruck beim Anwender: „Huch, da passiert ja gar nix!”
- Javascript ist deaktiviert, ein Klick auf den Link bleibt wirkungslos
Die Aufgabe
Wir wollen in unserem Beispiel eine "Hilfe"-Funktion aufbauen, die folgende Voraussetzungen erfüllt:
- Das PopUp öffnet sich immer im gleichen Fenster
- Es muß nicht nach jedem Aufruf geschlossen werden
- Es wird bei jedem Aufruf in den Vordergrund geholt
- Es hat immer die gleiche Größe und Position
- Es ruft immer dieselbe Datei auf, aber jedesmal an einem anderen "Hilfe"-Eintrag
- Der Link funktioniert auch bei deaktiviertem Javascript
Probieren Sie es aus -
Hilfe: Eintrag 1 | Eintrag 2 | Eintrag 3
Die Lösung
Zuerst notieren Sie das nötige Script im <Head>-Bereich der Datei:
<script type="text/javascript">
function pop(file)
{
helpwindow = window.open(file,"pophelp","f1,f2,f3");
helpwindow.focus();
return false;
}
</script>
Die hervorgehobenen Begriffe sind Namen, die Sie frei wählen können.
pop = über diesen Namen rufen Sie die Funktion auf (im Link);
helpwindow = über diesen Namen definieren Sie die Eigenschaften des PopUp-Fensters;
pophelp = der eigentliche Name des aufgerufenen Fensters;
der Begriff (file) ist eine Art Platzhalter für den Namen der Datei, die Sie später im Link referenzieren.
Statt f1,f2,f3 usw. tragen Sie natürlich die gewünschten Eigenschaften ('Features') des PopUp-Fensters ein. Folgende Eigenschaften stehen, in einer Zeile und durch Kommata separiert, zur Verfügung:
| toolbar=yes/no | Symbolleiste anzeigen |
| location=yes/no | Adresszeile anzeigen |
| directories=yes/no | Linkleiste anzeigen |
| status=yes/no | Statusbar anzeigen |
| menubar=yes/no | Menüzeile anzeigen |
| scrollbars=yes/no | Scrollbalken anzeigen |
| resizable=yes/no | Fenstergröße verändern |
| width=420, height=320 | Breite und Höhe des Fensters |
| top=150, left=100 | Koordinaten des Fensters (oben, links) |
Der Link, über den Sie das PopUp aufrufen, sieht folgendermaßen aus:
<a href="datei.html" target="_blank" onclick="return pop('datei.html');">
Linktext
</a>
Den Namen datei.html ersetzen Sie durch die aufzurufende Datei, wobei Sie auch Sprungmarken anhängen können, also zum Beispiel datei.html#ziel2.
Sicherlich ist Ihnen aufgefallen, daß die datei.html zweimal referenziert wird. Was passiert also?
Fall 1: Aktiviertes Javascript
Bei Mausklick wird die Funktion pop ausgeführt und die datei.html in ein PopUp-Fenster mit den im Script definierten Eigenschaften geladen.
Fall 2: Kein aktiviertes Javascript
Bei Mausklick wird die Funktion pop nicht erkannt. Stattdessen wird die datei.html mittels target="_blank" in ein 'normales' neues Browser-Fenster geladen.
Hinweis: Die Option target="_blank" steht Ihnen natürlich nur zur Verfügung, wenn Sie Ihren Code als „transitional” validieren. Wenn Sie „strict” validieren, öffnet sich die datei.html (bei de-aktiviertem Javascript) im selben Browser-Fenster.
Mit dieser Lösung haben wir alle Bedingungen der oben gestellten Aufgabe erfüllt.
Variation
Natürlich können Sie mit diesem Script auch das andere Extrem bedienen. Nehmen wir an, Sie wollen bei jedem Aufruf ein eigenes PopUp-Fenster öffnen, mit unterschiedlichen Maßen und Positionen. Das Script sähe nun so aus:
<script type="text/javascript">
function pop(file,windowname,features)
{
helpwindow = window.open(file,windowname,features);
helpwindow.focus();
return false;
}
</script>
Probieren Sie es aus -
Hilfe: Eintrag 1 | Eintrag 2 | Eintrag 3
Wie Sie sehen, gibt es jetzt drei 'Platzhalter' (file,windowname,features) im Script, die erst im Link gefüllt werden:
<a href="datei.html" target="_blank" onclick="return pop('datei.html','pophelp','f1,f2,f3');">
Linktext
</a>
Um zu bewirken, daß immer ein neues Fenster geöffnet wird, müssen Sie den Fensternamen jedesmal ändern – zum Beispiel 'pophelp1', 'pophelp2', 'pophelp3' usw. Und Sie können natürlich jedem Fenster andere Eigenschaften zuweisen.
Andererseits gilt zu bedenken, daß Sie mit dieser Methode schnell den oben beschriebenen 'Fenstersalat' provozieren können.
Die beiden beschriebenen Methoden lassen sich natürlich noch weiter variieren – entscheidend ist immer, ob Sie im Script für die verschiedenen Bedingungen 'Platzhalter' verwenden oder sie direkt ins Script hineinschreiben.
Hinweise:
- Beachten Sie sorgfältig, wann keine, einfache oder doppelte Anführungszeichen genutzt werden!
- Produzieren Sie keinen 'Fenstersalat'!
- Weisen Sie darauf hin, daß ein PopUp bzw. ein neues Fenster geöffnet wird (entweder im Linktext oder im
title-Attribut)! - Wenn Sie strict validieren und deshalb kein
targetverwenden können, denken Sie an die notwendigen Navigationselemente auf der neuen (aber im selben Fenster geöffneten) Seite!
Weitere nützliche Hinweise, vor allem zur barrierefreien Gestaltung von PopUps, finden sich auf den Seiten von Jan-Eric Hellbusch
