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.

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();
}