Javascript window open / close

Browserfenster und modale Fenster

Das Browserfenster ist ein normales Fenster, während die Fenster für Nachrichten (alert, prompt und confirm) als »modale Fenster« oder Dialogfenster / Dialogboxen bezeichnet werden.

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

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

alert (), prompt () und window confirm () öffnen Dialogboxen für eine einfache Kommunikation mit dem Benutzer.

window open

open() passt ein Browserfenster 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, die Eigenschaften des Fensters festlegen

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

document.getElementById("win1").addEventListener ("click", function () {
	window.open('test-open-window.html','win1');
});

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

window.open('', '') erzeugt ein neues leeres Fenster ohne name-Argument und ohne Angaben über das Aussehen des Fensters. Wenn nur die ersten beiden Argumente benutzt werden, öffnet der Browser das Fenster in einem neuen Tab.

var ref = window.open(winURL, winName, winSize) erzeugt ein Fenster zu einer anderen Seite mit Angaben zur Breite und Höhe des Browserfensters. Erst mit diesem dritten Parameter öffnet der Browser ein neues Fenster.

Die Browser auf Tabletts und Handys öffnen grundsätzlich neue Tabs.

window.open Argumente

Das dritte Argument bestimmt die Eigenschaften des neuen Browserfensters 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.

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

Javascript kann kein Fenster mit einem Dokument von einem anderen Server schließen,
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( );

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

const myWin = {};
myWin.prop = "width=600,height=400,scrollbars=no";
myWin.file = "Test.html";

document.getElementById('wop').addEventListener ("click", 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";
	}
});

target blank

Das Öffnen eines neuen Fensters sehen wir spätestens seit Jakob Nielsons Aufruf 1999 als bedenklich an. Die Popup-Fenster mit ihrer Werbung haben dem Benutzer die Lust auf neue Fenster genommen und nerven. »Wenn ich ein neues Fenster will, dann öffne ich es selber" ist ein Leitsatz von Jakob Nielson, an den sich verantwortungsvolle Webdesigner halten.

Mit dem tabbed Browsing – neue Fenster erscheinen ohne weitere Angaben als neue Tabs und werden vom Benutzer kaum wahrgenommen – sind Popup-Fenster selten geworden.

Das klassische HTML-Attribut target="_blank" öffnet kein neues Fenster mehr. Die Seite landet in einem neuen Tab des Browsers. Das passiert so schnell, dass der Benutzer es kaum wahrnimmt. Er verliert die History – das Zurück des Browsers – und findet das Originalfenster, aus dem er das Tab geöffnet hat, kaum wieder. Darüber hinaus ist target="_blank" anfällig für Cross-Side-Scripting und sollte niemals ohne rel="noopener" benutzt werden (wenn überhaupt).

window resizeBy | resizeTo

Javascript-Funktionen, die wir vergessen können: Dem Besucher so mir nichts dir nichts mit Javascript das Browserfenster vergrößern oder verkleinern?

Das machen die modernen Browser nicht mehr ohne Weiteres mit. Safari und Chrome reagieren nur, wenn das Javascript das Browserfenster geöffnet hat, Firefox schließt die Manipulation in den Voreinstellungen erst mal aus.

Safari und Chrome ignorieren Javascript resizeBy und resizeTo und ändern die Fenstergröße nicht, es sei denn, das Fenster wurde vom Javascript selbst geöffnet.

Firefox verbietet sich das Verändern der Größe des Browserfensters genauso wie die Bewegung durch Javascript moveTo per Voreinstellung. Diese Voreinstellung kann der Benutzer zwar aufheben – aber wer macht das schon?

resizeBy (w, h), resizeTo (w, h)

resizeBy () verkleinert oder vergrößert das aktuelle Fenster, je nachdem, ob w / h positive oder negative Werte enthalten.

window.resizeTo (600,600) setzt die Abmessungen des Fensters auf 600 x 600 Pixel.

less.onclick = function() { window.resizeBy(-60,-60); }
more.onclick = function() { window.resizeBy(60,60); }
reto.onclick = function() { window.resizeTo(600,600); }

moveBy | moveTo

window.moveBy() bewegt das Fenster um eine bestimmte Zahl von Pixeln in der x bzw. y-Richtung.

window.moveTo(x,y) bewegt das Fenster zu einer bestimmten Position auf dem Monitor.

Safari ignoriert moveBy() und moveTo() und ändert die Position des Fensters nicht, es sei denn, das Fenster wurde vom Script selbst geöffnet.

<button id="winmov">Fenster bewegen</button>

… 

document.getElementById('winmov').onclick = function () {
	window.moveBy(50,50);
}

Wenn die Bewegung das Fenster außerhalb des Monitors positionieren würde, setzen die Browser das Fenster zur Sicherheit an den jeweiligen Rand des Bildschirms.