CSS, HTML und Javascript mit {stil}

JS window.open, window.close: Fenster öffnen und schließen

onorientationchange: Handy oder Tablett drehen

Javascript window.open kann zwei Arten von Fenstern öffnen und manipulieren: neue Browserfenster und modale Fenster – Dialogfenster oder Dialogboxen.

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

Javascript 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.

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

Javascript window.alert, window.prompt und window.confirm öffnen Dialogfenster für eine einfache Kommunikation mit dem Benutzer. Der Browser bestimmt, wie das modale Fenster aussieht. Dialogfenster müssen erst bestätigt oder beantwortet werden, bevor der Benutzer wieder auf das Browserfenster zugreifen kann und das Script fortgesetzt wird.

window.open

window.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, 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.

document.getElementById('win1').onclick = function() {
    window.open('test-open-window.html','win1');
}
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. 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.

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.

EigenschaftTyp 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.
widthintegerÄußere Breite des Fensters in Pixel. Das Fenster kann aus Sicherheitsgründen nicht kleiner als 100 Pixel werden.
copyHistoryyes | noKopiert das history-Objekt vom aktuellen Fenster in das neue Fenster.
directoriesyes | noZeigt Directory-Schaltflächen
location yes | noZeigt die Adressleiste
menubaryes | noZeigt die Menüleiste
statusyes | noZeigt die Statusleiste
toolbaryes | noZeigt die Werkzeugleiste
resizeableyes | noErlaubt dem Benutzer, die Größe des Fensters zu ändern. Auch wenn hier no angegeben wird, erlauben einige Browser dem Benutzer das Fenster zu maximieren.
scrollableyes | noZeigt 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.
topintegerGibt die Position des Fensters relativ zum Screen in Pixeln an. Die Browser erlauben nicht, dass ein Fenster vollkommen außerhalb des Screens positioniert wird.
leftintegerGibt 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>

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";
    }
}

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 die 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.

alert, confirm, prompt

alert() ist die bekannteste Javascript-Methode zum Öffnen und Schließen von Fenstern – sie wird vor allem für die Fehlersuche in kleinen Scripten eingesetzt, ist aber heute der einfachen Ausgabe in die Console des Browsers gewichen.

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

All diese modalen Fenster zeigen dem Benutzer einfache Dialogboxen, die der Benutzer schließen muss, bevor das Script weiter ausgeführt wird.

focus(), blur()

Javascript focus() und blur() belegen den Tastaturfokus des Fensters oder entziehen den Fokus. Die Window-Methode focus() stellt außerdem sicher, dass das Fenster sichtbar ist, indem es das Fenster nach vorne bringt.

window.print()

Javascript window.print () druckt ein Fenster oder einen Frame, so als hätte der Benutzer den Befehl „Drucken“ verwendet.

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

window.resizeBy | window.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 und die Bewegung durch Javascript window.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); }

window.scrollBy(dx, dy), window.scrollTo(x, y)

Javascript scrollBy scrollt die HTML-Seite im Fenster – aber diese Javascript-Funktion ist eine Mogelpackung. Die Javascript-Funktionen scrollBy und scrollTo springen zu den angegebenen Koordinaten – sie scrollen nicht langsam.

document.getElementById('scby').onclick = function() { 
    window.scrollBy(0,300); 
}
document.getElementById('scto').onclick = function() { 
    window.scrollTo(0,0); 
}

scrollBy und scrollTo müssen animiert werden, um den Effekt eines sichtbaren Scrollens zu erzeugen.

window.moveBy(dx,dy), window.moveTo(x,y)

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 Bildschirms positionieren würde, setzen die meisten Browser das Fenster an den jeweiligen Rand des Bildschirms.