Der JavaScript-Befehl „window.open“ kann auf vielfältige Weise eingesetzt werden, um neue Seiten, neue Tabs oder sogar Popup-Fenster zu öffnen. Wir erklären euch anhand einiger Beispiele, was ihr damit alles machen könnt.
Man sollte den JavaScript-Befehl window.open intelligent einsetzen. Durch den massenhaften Einsatz bei Werbe-Popups hat sich eine Aversion gegen diese Funktion entwickelt. Teilweise bildschirmfüllende Werbefenster haben sich in den Vordergrund gedrängt und führten so auch zur Entwicklung von AdBlockern. Aber sie lässt sich trotzdem noch praktisch einsetzen. Hier erfahrt ihr, wie das geht.
Aufbau des JavaScript-Befehls window.open
„window.open“ wird in JavaScript-Funktionen aufgerufen, um anhand nachfolgender Parameter auf bestimmte Weise Fenster beziehungsweise Webseiten aufzurufen. Nur einer der drei Parameter ist wirklich notwendig – die URL. Die beiden anderen Parameter bestimmen die Art und das Ziel des neuen Fensters.
window.open("URL", "Name", "Merkmale")
Folgende Regeln gelten dabei:
- Der Befehl lautet window.open()
- In der Klammer befinden sich die Parameter, eingefasst in Anführungszeichen und getrennt durch Kommata.
- An erster Stelle steht immer die URL.
- Fenstername und -Merkmale sind verzichtbar.
Der Parameter URL ist der Einzige, der auf jeden Fall angegeben werden muss. Es kann sich um Webadressen handeln („//www.giga.de“) oder um einzelne Seiten (start.html) beziehungsweise Bilder (pic.jpg).
Der Parameter Name bestimmt den Namen eines Fensters und damit auch das Ziel. Ist der Name bereits vorhanden, wird der Inhalt im gleichnamigen Fenster ersetzt. Außerdem kann der Name in Funktionen eingesetzt werden, um beispielsweise mit einem Button-Klick ein bestimmtes Fenster wieder zu schließen.
Möglich sind folgende Werte als Fenstername:
- _blank – die Adresse wird in einem neuen Fenster geöffnet, das ist der Standard.
- _self – die Adresse wird im aktuellen Fenster geladen.
- _top – die Adresse ersetzt alle möglichen Framesets.
- _parent – wird in Framesets eingesetzt, um die Adresse im Eltern-Frame zu laden.
- Name – hier wird ein eigener Name vergeben.
Die Merkmal-Parameter sind sehr umfangreich und einige beziehen sich nur auf spezielle Browser. Sie bestimmen allesamt das Erscheinungsbild des neuen Fensters. Ihr könnt damit beispielsweise die Höhe und Breite festlegen und angeben, ob sie eine Titelzeile oder Statuszeile haben sollen.
Die Syntax lautet hier immer Parameter, Gleichheitszeichen und Wert beziehungsweise yes/no oder 1/0. Also etwa width=400, toolbar=yes.
Diese Parameter könnt ihr nutzen:
- width=Pixel – Breite (100 Pixel sind die Mindestbreite)
- height=Pixel – Höhe (100 Pixel sind die Mindesthöhe)
- left=Pixel – Position von links
- top=Pixel – Position von oben
- menubar=yes/no/1/0 – Menüleiste ein- oder ausblenden
- titlebar=yes/no/1/0 – Titelleiste ein- oder ausblenden
- scrollbars=yes/no/1/0 – Scrollleiste ein- oder ausblenden (nur in MSIE, Firefox und Opera)
- status=yes/no/1/0 – Statuszeile an oder aus
- fullscreen=yes/no/1/0 – Vollbildanzeige, nur in MSIE
window.open: JavaScript-Beispiele
Nachfolgend einige Beispiele für die Verwendung von window.open in JavaScript-Funktionen.
Adresse mit einem Textlink und window.open öffnen:
Diese Methode ist auf den ersten Blick sinnlos, weil sie ja genauso wie ein normaler Link funktioniert. Aber sie sorgt etwa dafür, dass man nur mit aktiviertem JavaScript weiterkommt:
<a href="#" onClick="window.open('//www.giga.de', '_blank')">Klick hier!</a>
Achtung: Hier gibt es eine Besonderheit. Innerhalb der Klammer werden keine normalen Anführungszeichen verwendet, sondern einfache Hoch-Kommata, weil sonst die Befehlskette onClick=" … " zerstört wird.
Ein nacktes Fenster mit fester Größe und Position öffnen:
Dieses Beispiel fügt einen Button ein, der eine JavaScript-Funktion aufruft. Darin wird ein Fenster 100 Pixel von oben und links geöffnet, das 400 Pixel breit und hoch ist. Durch dieses Beispiel seht ihr auch gleich, wie window.open in einer JavaScript-Funktion eingesetzt wird.
<button onclick="gehAuf()">Hier klicken</button>
<script>
function gehAuf() {
window.open("//www.giga.de", "_blank", "toolbar=no,scrollbars=no,top=100,left=100,width=400,height=400");
}
</script>
