JavaScript/Window/open

Die Methode Window.open öffnet ein neues Fenster oder eine neue Registerkarte.

Syntax

var fenster = window.open(URL, name, [strWindowFeatures]);

Folgende Angaben sind nötig:

• URI: URL-Zieladresse einer Datei, die in das neue Fenster geladen werden soll. Wenn sich die Datei im gleichen Verzeichnis befindet, genügt der Dateiname. Ansonsten relative Pfadnamen oder absolute http-Adressen angeben. Um ein leeres Fenster zu öffnen kann auch eine leere Zeichenkette angegeben werden.

Anstelle eines URI können Sie auch mit about:blank eine leere Datei in das Fenster laden.

• Fenstername: Ein Name, der nur aus Buchstaben, Ziffern und Unterstrich bestehen darf. Unter diesem Namen können beispielsweise Verweise ihre Ziele mit <a href="ziel.htm" target="NameDesFensters"> in das erzeugte Fenster laden.

Gültige Fensternamen sind auch _blank, _parent, _self und _top.

• strWindowFeatures: optionale Angaben zum Aussehen des Fensters

Anwendungsbeispiel

Beispiel ansehen …

function fensterOeffnen() { 
  window.open('https://forum.selfhtml.org/');
}

Durch einen Klick auf den Button wird die Funktion fensterOeffnen() aufgerufen, die mit window.open() ein neues Fenster in einer neuen Registerkarte öffnet.

Beachten Sie: In heutigen Browsern wird ein neues Fenster nur noch dann geöffnet, wenn es durch eine Benutzereingabe aktiv eingeleitet wurde.
Im Normalfall wird nur eine neue Registerkarte geöffnet.

Angaben zum Aussehen des Fensters

Eine Zeichenkette, in der Sie die Größe und die Eigenschaften des Fensters festlegen können. Mehrere Angaben sind durch Kommata zu trennen.

Folgende Angaben sind möglich:

• height: Höhe des neuen Fensters in Pixeln, z. B. height=200.
• innerHeight: Höhe des Anzeigebereichs des neuen Fensters in Pixeln, z. B. innerHeight=200.
• innerWidth: Breite des Anzeigebereichs des neuen Fensters in Pixeln, z. B. innerWidth=200.
• left: Horizontalwert der linken oberen Ecke des neuen Fensters in Pixeln, z. B. left=100.
• location: (yes/no) Wenn ja (yes), erhält das Fenster eine eigene Adresszeile. Wenn nein (no), erhält es keine Adresszeile. Voreinstellung ist no, beim Internet Explorer jedoch nur, wenn die Optionenzeichenkette mindestens eine Option enthält.
• menubar: Wenn ja (yes), erhält das Fenster eine eigene Menüleiste mit Browser-Befehlen. Wenn nein (no), erhält es keine Menüleiste. Voreinstellung ist no, beim Internet Explorer jedoch nur, wenn die Optionenzeichenkette mindestens eine Option enthält. Beachten Sie: Bei Safari ist die Menüleiste wie auf dem Macintosh üblich nicht Bestandteil des Fensters, kann also nicht ausgeblendet werden.
• resizable: yes/no Wenn ja (yes), kann der Anwender das Fenster in der Größe verändern. Wenn nein (no), kann er die Fenstergröße nicht ändern. Voreinstellung ist no, beim Internet Explorer jedoch nur, wenn die Optionenzeichenkette mindestens eine Option enthält.
• screenX: Horizontalwert der linken oberen Ecke des neuen Fensters in Pixeln, z. B. screenX=100.
• screenY: Vertikalwert der linken oberen Ecke des neuen Fensters in Pixeln, z. B. screenY=100.
• scrollbars: Wenn ja (yes), erhält das Fenster Scroll-Leisten. Wenn nein (no), kann der Anwender in dem Fenster nicht scrollen. Voreinstellung ist no, beim Internet Explorer jedoch nur, wenn die Optionenzeichenkette mindestens eine Option enthält.
• status: (yes/no) Zeigt die Statusleiste an.
• toolbar: Wenn ja (yes), erhält das Fenster eine eigene Werkzeugleiste. Wenn nein (no), erhält es keine Werkzeugleiste. Voreinstellung ist no, beim Internet Explorer jedoch nur, wenn die Optionenzeichenkette mindestens eine Option enthält.
• top: Vertikalwert der linken oberen Ecke des neuen Fensters in Pixeln, z. B. top=100.
• width: Breite des neuen Fensters in Pixeln, z. B. width=200.

Zweitfenster

Beispiel ansehen …

function fensterOeffnen () { 
  var text ='<p>ein neues Fenster!<br>(Besser wäre aber auf solche Popup-Boxen zu verzichten!)</p>';
  var MeinFenster = window.open("about:blank", "Zweitfenster", "width=300,height=400,left=100,top=200"); 
  MeinFenster.document.write(text); 
  MeinFenster.focus(); 
}

Das Beispiel enthält einen normalen Button. Sobald er angeklickt wird, wird die Funktion fensterOeffnen() aufgerufen.

Die Funktion ruft die open()-Methode mit der Adresse "about:blank" auf, sodass ein leeres Fenster erzeugt wird, und übergibt gleichzeitig den Fensternamen "Zweitfenster" als zweiten Parameter sowie diverse Angaben zum Aussehen des Fensters im dritten Parameter. Anschließend wird das neue Fenster mit focus() in den Vordergrund geholt.

Beachten Sie: Die meisten Browser erlauben keine Fensterhöhe oder -breite, die kleiner als 100 Pixel ist. Je nach Betriebssystem und Browser wird bei kleineren Fenstern eine Fehlermeldung (Zugriff verweigert) ausgegeben bzw. die jeweiligen Minimalwerte verwendet.

In verschiedenen Browsern kann der Nutzer bestimmte Fenstereigenschaften selbst vorgeben, sodass manche Angaben zum Aussehen des Fensters ignoriert werden. Auch ist es möglich, das Öffnen von neuen Fenstern zu unterbinden. Insbesondere werden solche Fenster verhindert, die sich automatisch z.B. beim Laden einer HTML-Seite öffnen. Alle neueren Browser besitzen sogenannte Popup-Blocker, die das Aufspringen von aufdringlichen Fenstern u.a. mit Werbung verhindern.

Zudem setzen immer mehr Browser auf Tabbed Browsing, d. h. das Darstellen von mehreren Webseiten in einem Browserfenster, die der Benutzer in einer Leiste als Registerkarten anwählen kann. Sie müssen damit rechnen, dass window.open() in solchen Browsern lediglich eine neue Registerkarte öffnet - oder die Zielseite kurzerhand im selben Karteireiter angezeigt wird. In solchen Fällen sind Ihre Angaben zum Aussehen des neuen Fensters natürlich wirkungslos.

Sie sollten sich also nicht darauf verlassen, dass wirklich ein neues Fenster mit dem gewünschten Aussehen geöffnet wird.

Empfehlung: Heute ist es üblicher eine Popup-Box , evtl. mit dem dialog-Element, als ein neues Fenster zu öffnen.

Siehe auch

• JavaScript/Tutorials/Sicherheitskonzepte

Weblinks

• CSSWG: open
• WHATWG: Window.open
• MDN: Window.open