JavaScript Open Methode

Mit der Methode open des Window-Objekts ist es möglich ein weiteres Browserfenster zu öffnen. Sie liefert einen Verweis auf die damit erzeugte Window-Instanz zurück, über den auf das geöffnete Fenster zugegriffen werden kann. Auf diese Weise läßt sich zum Beispiel die Darstellung von Informationen mit einer Master-Detail-Struktur realisieren.

Als Parameter müssen zumindest die URI der im geöffneten Browserfenster darzustellenden Datei, sowie der Fenstername, unter dem das Fenster ansprechbar sein soll, angegeben werden. Steht beim Öffnen des Fensters noch keine darzustellende Datei fest, so sollte – um Probleme mit alten Browsern zu vermeiden – „about:blank” angegeben werden, womit eine leere Datei geladen wird. Für die URI gelten die üblichen Adressierungsformen über die Angabe von relativen und absoluten Pfaden. Die Vergabe eines Fensternamen ist dann sinnvoll, wenn Verweisziele im geöffneten Fenster dargestellt werden sollen. Dies geschieht dann über die target-Eigenschaft des HTML A-Tags, wo der Name des Fensters angegeben wird, in dem das Verweisziel geöffnet werden soll.

Der optionale dritte Parameter dient der Konfiguration des Fensters. In einem String wird das Aussehen des Browserfensters festgelegt, wobei die einzelnen Optionen durch Kommata getrennt werden müssen. Hier können unter anderem Höhe, Breite und Position des zu öffnenden Fensters (neue Instanz des Browsers) angegeben werden. Auch ist hier das Ein- bzw. Ausblenden von Browserelementen (Adresszeile, Menüleiste, Status- und Toolbar) möglich.

Die oft verpönten, da sehr häufig als Träger von Werbeinformationen genutzten, sogenannten PopUp-Fenster lassen sich durch Aufruf der open-Methode öffnen. Viele Browser unterbinden das Öffnen von PopUps durch Verwendung von PopUp-Blockern um die auf manchen Seiten übertriebene Penetration durch diese HTML-Fenster zu verhindern.

JavaScript Open Beispiel: Öffnen eines Browserfensters

Das folgende Beispiel zeigt, wie ein Fenster mit Hilfe von JavaScript geöffnet werden kann. Durch Betätigung eines Links wird, soweit dies nicht schon zuvor geschehen ist, ein neues Browserfenster geöffnet und ein bestimmtes Bild im diesem Fenster dargestellt. Ein weiterer Link initiiert das Schliessen eines zuvor durch das Script geöffneten Fensters. In der Window.open Demo können Sie das Script ausprobieren. Ein weiteres Beispiel, in dem dem JavaScript window.open zur Anwendung kommt, finden Sie in der Window.close Demo.

Im unten stehenden Script wird zunächst eine Variable definiert, welche den Zugriff auf die später zu erzeugende Window-Instanz ermöglichen soll. Dann folgt die Definition der Funktion bildOeffnen, die bei Bedarf ein neues Fenster öffnet und ein Bild mit der übergebenen URI in diesem Fenster öffnet. Die Funktion prüft zunächst, ob bereits ein Fenster geöffnet und bislang auch nicht geschlossen wurde. Der erste Teil der Abfrage prüft, ob in der Variable fenster noch keine Instanz des Window-Objekts gespeichert ist, was bedeutet, dass zuvor noch kein Fenster geöffnet wurde. Mit der Window-Eigenschaft closed wird dann überprüft, ob das Fenster zwischenzeitlich geschlossen wurde. Trifft keine dieser Bedingungen zu, so wird mit der Methode Window.open ein neues Fenster mit der übergebenen URI geöffnet und ein Verweis auf die damit erzeugte Window-Instanz in der Variable fenster gespeichert. Anderenfalls wird die übergebene URI im bereits geöffneten Fenster geöffnet. Dies geschieht durch Zuweisung der entsprechenden URI an das Window-Unterobjekt location, in dem die URI der im Fenster dargestellten Zieldatei steht. Durch diese Zuweisung wird automatisch das Laden der Zieldatei ausgelöst.

Die Aufgabe der zweiten Funktion ist es, ein bereits durch den JavaScript-Code geöffnetes Browserfenster wieder zu schliessen. Dazu wird geprüft, ob fester eine Instanz des Window-Objekts enthält und das Fenster noch geöffnet ist. Ist dies der Fall, so wird das Fenster mit Hilfe der Window-Methode close() geschlossen.

Der darunter liegende HTML-Abschnitt enthält die Links zur Steuerung des Scripts. Die ersten beiden Links führen, nachdem der Benutzer diese angeklickt hat, die Funktion bildOeffnen mit den darzustellenden Bild-URIs als Parameter aus. Durch Anklicken des letzten Links wird die Funktion fensterSchliessen ausgeführt.

<script language="javascript" type="text/javascript">
<!-- // JavaScript-Bereich für ältere Browser auskommentieren
// Variable zur Speicherung des Fenster-Objekts
var fenster;

// Funktion zum Öffnen eines Fensters mit einem übergebenen Bild
function bildOeffnen (url) {
  // Wurde das Fenster schon geöffnet und bisher nicht geschlossen?
  if (!(fenster instanceof Window) ¦¦ fenster.closed)
    // Fenster nicht geöffnet -> Fenster mit Bild Öffnen
    fenster = window.open (url, 'Leinwand', 'top=100,left=330,height=400,width=590');
  else
    // Bild in bereits geöffnetem Fenster laden
    fenster.location = url;
}

// Funktion zum Schliessen eines zuvor geöffneten Fensters
function fensterSchliessen () {
  // Wurde bereits ein Fenster geöffnet, das noch nicht geschlossen wurde?
  if (fenster instanceof Window && !fenster.closed)
    // Fenster schliessen
    fenster.close ();
}
// -->
</script>
<a href="javascript:bildOeffnen ('/javascript-demos/java-script-galerie/photos/boot.jpg')">Boot anzeigen</a>
<a href="javascript:bildOeffnen ('/javascript-demos/java-script-galerie/photos/tor.jpg')">Tor anzeigen</a>
<a href="javascript:fensterSchliessen ()">Fenster schliessen</a>