Auf einer HTML-Seite ist manchmal einfach nicht genug Platz, um z.B. Eingaben
vom Benutzer entgegenzunehmen, eine Liste bereits bestehender Einträge anzuzeigen
und das alles ohne zu scrollen. Abhilfe schaffen hier Popup-Fenster. So ist
es z.B. vorstellbar auf der Hauptseite die Liste darzustellen und dem Benutzer
einen Link zur Verfügung zu stellen, mit dem er neue Einträge vornehmen kann
und dieser Link öffnet einfach ein neues Fenster. Problem an der Sache: wie
soll die Liste aktualisiert werden, wenn die Eingabe abgeschlossen ist. Die
Lösung bietet Javascript über das opener-Objekt, das
auf das Fenster verweist, über das das Popup mit dem Target '_blank' geöffnet
wurde.
Kümmern wir uns zunächst darum, das Popup-Fenster zu öffnen. Hierzu dient
die Javascript-Funktion open, die folgende Parameter besitzt:
- URL - bezeichnet den Pfad zur HTML-Seite, die in dem neuen Fenster
dargestellt werden soll
- Fenstername - frei wählbarer Name
- Fensteroptionen - komma-separierte Liste mit folgenden Möglichkeiten:
- width=<pixel> - erzwungene Fensterbreite in Pixel
- height=<pixel> - erzwungene Fensterhöhe in Pixel
- resizable=yes/no - Größe des Fensters veränderbar?
- scrollbars=yes/no - Anzeige der Scrollbalken
- toolbar=yes/no - Anzeige der Buttonleiste
- status=yes/no - Anzeige der Statusleiste
- menubar=yes/no - Anzeige der Menüleiste
- location=yes/no - Anzeige der Adressleiste
Die Optionen mit der Auswahl yes/no können statt dessen auch mit
0/1 belegt werden. Schreiben wir also mit diesen Informationen eine kleine
Javascriptfunktion...
<script language="JavaScript">
<!--
function OpenPopUp()
{
var sURL = "popup.htm";
var sName = "popup";
var sOptions = "toolbar=0,scrollbars=1,location=0,statusbar=0,menubar=0,resizable=0";
var sWidth = 250;
var sHeight = 200;
window.open(sURL, 'Name', sOptions + ',width=' + sWidth + ',height=' + sHeight);
}
//-->
</script>
... und verweisen in einem Link auf der Hauptseite darauf:
<a href="javascript:OpenPopUp();" target=_blank>Popup öffnen</a>
In der aufgerufenen Seite müssen wir nun dafür sorgen, dass die Hauptseite
z.B. beim Betätigen einer Formular-Schaltfläche aktualisiert wird. Dies geschieht
mit einer Javascript-Funktion, die wir im Head der Popup-Seite definieren:
<script language="JavaScript">
<!--
function RefreshMe()
{
if(opener && opener.closed!=1){
opener.location.reload();
}
}
//-->
</script>
Diese wird beim Klick auf eine Schaltfläche aufgerufen, deren Formular wir
im Body definieren:
<form method="POST">
<input type="button" value="Aktualisieren" name="cmdRefreh" onclick="RefreshMe();">
</form>
Man könnte nun der Form noch einen Action-Tag geben und die Javascript-Funktion
etwas erweitern, damit z.B. ein neu eingegebener Datensatz wird.