JavaScript - Popup öffnen

Das aufgelistete Beispiel demonstriert das Öffnen eines Popup-Fensters unter Verwendung der Funktion window.open.

Beispiel ansehen

Die Bestandteile des Attribute-Strings (drittes Argument der window.open-Funktion) sind unter der Objektreferenz des Windows-Objekts nicht extra erläutert, deshalb hole ich das an dieser Stelle nach.
Der String selbst wird in der Form
"Attribut1=Wert1,Attribut2=Wert2,...,Attribut#=Wert#"
aufgebaut.

Attribute, die jeder getestete Browser kennt, sind:
AttributErklärung
locationyes oder no,
URL-Leiste (oben) anzeigen oder nicht
menubaryes oder no,
Menüleiste (oben) anzeigen oder nicht
toolbaryes oder no,
Navigationsleiste (oben) anzeigen oder nicht
statusyes oder no,
Statusleiste (unten) anzeigen oder nicht
resizableyes oder no,
erlaubt oder verbietet das Verändern der Größe durch den Nutzer
scrollbarsyes oder no,
erlaubt oder verbietet die Anzeige von Rollbalken
widthNatürliche Zahl
Breite des Fensters, je nach Browser Innen- oder Außenabmessung
heightNatürliche Zahl
Höhe des Fensters, je nach Browser Innen- oder Außenabmessung

Welche Werte voreingestellt sind, ist von Browser zu Browser unterschiedlich.
Eigentlich sind zwar Vorgaben durch Netscape definiert, den anderen Browseranbietern ist dies aber herzlich egal. Daher sollte der Attribute-String möglichst vollständig sein.
Die Lage des Fensters ist nach dem Öffnen entweder durch dieses selbst oder vom Elternfenster mittels der Funktion window.open festzulegen, falls dafür Bedarf besteht. Es gibt zwar auch für die Lage des Fensters Attribute, da der Microsoft Internet Explorer die aber sowieso nicht kennt, kann ich uns deren Aufzählung ersparen.

Querverweise zum Verständnis : [Einbindung in HTML] [Spezifikation Funktionen] [Objektreferenz window]

Im folgenden Quelltext sind wichtige Bereiche grün und Kommentare gelb markiert.
<html>

<head>
<title>
JavaScript - Beispiel
</title>

<script type="text/javascript"> <!-- Script-Bereich einleiten -->
<!--                            /* HTML-Kommentar fuer Browser ohne JavaScript */

var attribWithAll="location=yes,menubar=yes,toolbar=yes,status=yes";
attribWithAll+=",resizable=yes,scrollbars=yes,width=450,height=200";
  /* Attribute fuer ein Fenster, das alles dran haben soll */

var attribWithoutAll="location=no,menubar=no,toolbar=no,status=no";
attribWithoutAll+=",resizable=no,scrollbars=no,width=450,height=200";
  /* Attribute fuer ein Fenster, das nix, aber auch rein gar nix haben soll */

var subwindow=0;
  /* Initialisierung der Variablen, die spaeter mal auf das Fensterobjekt verweist */

function ClosePopUp()
/* diese Funktion schliesst (so geoeffnet) das Popup-Fenster */
{
  if (!subwindow)          /* wenn noch nicht geoeffnet */
    return;                /* nix zu tun, Abbruch */
  if (subwindow.closed)    /* wenn schon zugemacht */
    return;                /* nix zu tun, Abbruch */
  subwindow.close();       /* mach zu */
}

function PopUpWithAll()
/* oeffnet das Popup-Fenster mit allem drum und dran an der Stelle (10,50) */
{
  ClosePopUp()             /* erstmal bisher geoeffnetes Popup zumachen */
  subwindow=window.open("test.html","popup",attribWithAll);
    /* test.html unter dem Fensternamen "popup" aufmachen und Fensterobjekt merken */
  subwindow.moveTo(10,50); /* Fenster nach links oben schieben */
}

function PopUpWithoutAll()
/* oeffnet das Popup-Fenster ohne irgendwas an der Stelle (10,50) */
{
  ClosePopUp()             /* erstmal bisher geoeffnetes Popup zumachen */
  subwindow=window.open("test.html","popup",attribWithoutAll);
    /* test.html unter dem Fensternamen "popup" aufmachen und Fensterobjekt merken */
  subwindow.moveTo(10,50); /* Fenster nach links oben schieben */
}

//-->                          <!-- HTML-Kommentarende -->
</script>                      <!-- Script-Bereich beenden -->

</head>
<!-- onUnLoad="ClosePopUp()" schliesst das Popup bei Verlassen der Seite -->
<body onUnLoad="ClosePopUp()">

<a href="popup.html">Erkl&auml;rung</a>
<br><br><br><br>

<!-- Hier mal die Moeglichkeit mittels Button-Pressung  -->
<form>
<input type="button" value="Fenster mit allem drum und dran" onClick="PopUpWithAll()">
<br>
<input type="button" value="Fenster mit nix, aber auch rein gar nix" onClick="PopUpWithoutAll()">
</form>

<br><br>

<!-- Hier mal die Moeglichkeit mittels Verlinkung  -->
<a href="javascript:PopUpWithAll()">Fenster mit allem drum und dran</a>
<br>
<a href="javascript:PopUpWithoutAll()">Fenster mit nix, aber auch rein gar nix</a>

</body>
</html>
Autor: Ulrich Kritzner