Stil mit {stil}

Okt 2008

Javascript window: Fenster öffnen und schließen

Javascript kann zwei Arten von Fenstern öffnen und manipulieren: neue Browserfenster und modale Fenster.

window.open() öffnet normale Browserfenster (Top Level-Fenster) mit der Angabe der Breite und Höhe des Fenster mit und ohne Scrollleisten, Adress- und Statuszeile.

window.close() schließt Fenster, die vom Script geöffnet wurden.

window.alert, window.prompt und window.confirm öffnen modale Fenster für eine einfache Kommunikation mit dem Benutzer, deren Aussehen vom Browser bestimmt wird. Diese Fenster müssen erst bestätigt oder beantwortet werden, bevor der Benutzer wieder auf das Browserfenster zugreifen kann.

window.open(URL, name[, merkmale])

öffnet ein neues Top Level-Fenster und passt es durch drei Argumente an:

URL

Adresse der Seite, die geöffnet werden soll

name

programminterner Name des Fensters. Wird der Name eines existierenden Fensters angegeben, öffnet der Browser das neue Dokument in diesem statt in einem neuen Fenster.

merkmale

Name-/Wertpaare, legen Eigenschaften des Fensters fest

Die ersten beiden Argumente sind erforderlich, dürfen aber leere Strings sein. Das dritte Argument ist optional und kann weggelassen werden.

neues leeres Fenster öffnen Dokument in neuem Fenster öffnen

document.getElementById('win1').onclick = function() {
    window.open('','');
}
document.getElementById('win2').onclick = function() {
    var winURL = 'Test.html';
    var winName = 'win1';
    var winSize = 'width=660,height=620,scrollbars=yes';
    var ref = window.open(winURL, winName, winSize); 
}

window.open('', '') erzeugt ein neues leeres Fenster ohne name-Argument und ohne Angaben über das Aussehen des Fensters.

var ref = window.open(winURL, winName, winSize) erzeugt ein Fenster zu einer anderen Seite mit Angaben zur Breite und Höhe des Browserfensters.

Das dritte Argument bestimmt die Eigenschaften des neuen Fensters und ist ein String aus kommagetrennten Name-/Wertpaaren ohne jegliche Leerzeichen.

'width=200,height=400,resizeable=yes,scrollable=yes'

Wenn eine Eigenschaft deklariert wird, muss der String alle yes/no-Eigenschaften, die nicht vorgabemäßig auf no stehen, explizit setzen.

Eigenschaft	Typ	Beschreibung
height	integer	Äußere Höhe des Fensters in Pixel. Das Fenster kann aus Sicherheitsgründen nicht kleiner werden als die Höhe der Titelleiste plus Höhe des Fensterrahmens. Ein Fenster ohne Titelleiste kann nicht generiert werden.
width	integer	Äußere Breite des Fensters in Pixel. Das Fenster kann aus Sicherheitsgründen nicht kleiner als 100 Pixel werden.
copyHistory	yes | no	Kopiert das history-Objekt vom aktuellen Fenster in das neue Fenster.
directories	yes | no	Zeigt Directory-Schaltflächen
location	yes | no	Zeigt die Adressleiste
menubar	yes | no	Zeigt die Menüleiste
status	yes | no	Zeigt die Statusleiste
toolbar	yes | no	Zeigt die Werkzeugleiste
resizeable	yes | no	Erlaubt dem Benutzer, die Größe des Fensters zu ändern. Auch wenn hier no angegeben wird, erlauben einige Browser dem Benutzer das Fenster zu maximieren.
scrollable	yes | no	Zeigt die Scrollleisten des Fensters bei Bedarf. Wenn no angegeben wird, kann das Fenster auch nicht mit der Maus gescrollt werden, also muss sichergestellt werden, dass der gesamte Inhalt in das Fenster passt.
top	integer	Gibt die Position des Fensters relativ zum Screen in Pixeln an. Die Browser erlauben nicht, dass ein Fenster vollkommen außerhalb des Screens positioniert wird.
left	integer	Gibt die Position des Fensters relativ zum Screen in Pixeln an. Die Browser erlauben nicht, dass ein Fenster vollkommen außerhalb des Screens positioniert wird.

window.close()

schließt ein Fenster.

Javascript kann kein Fenster mit einem Dokument von einem anderen Server schliessen,

kein Fenster, das vom Browser beim Start oder vom Benutzer durch »Datei öffnen« oder »Neues Fenster« geöffnet wurde und

nur dann ein Elternfenster schließen, wenn das Fenster vom Skript selbst geöffnet wurde.

// Das aktuelle Fenster schliessen
window.close( );

// Ein Kind-Fenster schliessen
windowname.close( );

// Ein Eltern-Fenster schliessen
window.opener.close( );

Fenster öffnen

<button id="wop">Fenster öffnen</button>

var myWin = new Object;
myWin.prop = "width=600,height=400,scrollbars=no";
myWin.file = "Test.html";

document.getElementById('wop').onclick = function () {
    if (this.innerHTML == "Fenster öffnen") {
        myWin.ref = window.open(myWin.file, "", myWin.prop);
        this.innerHTML = "Fenster schließen";
    } else if (this.innerHTML == "Fenster schließen") {
        alert('fenster schließen ' + myWin.ref);
        myWin.ref.close();
        this.innerHTML = "Fenster öffnen";
    }
}

alert, confirm, prompt

• window.alert(nachricht) zeigt einen Text in einem modalen Fenster,
• window.confirm(frage) stellt dem Benutzer vor eine Ja / Nein-Alternative,
• window.prompt(nachricht, standard) stellt ein Feld für eine Texteingabe zur Verfügung.

zeigen dem Benutzer einfache Dialogboxen.

focus(), blur()

Belegt den Tastaturfokus des Fensters oder entzieht ihn. Die Methode focus() stellt außerdem sicher, dass das Fenster sichtbar ist, indem es das Fenster nach vorne bringt.

print()

Druckt ein Fenster oder einen Frame, so als hätte der Benutzer den Befehl „Drucken“ verwendet.

Drucken

<button id="jswinf13">Drucken</button>
…
document.getElementById('prin').onclick = function() {
	window.print();
}