PopUp in JavaScript öffnen

PopUps kommen zu den unterschiedlichsten Anlässen zur Anwendung. Beispielsweise können PopUp Fenster dazu verwendet werden Bilder, die auf einer Internetseite in Form einer Vorschau dargestellt werden, in einer Detailansicht zur Verfügung zu stellen. Durch Anklicken des entsprechenden Bildes wird dann ein PopUp in JavaScript geöffnet, in den das Bild mit höherer Auflösung angezeigt wird.

Oft werden PopUps in JavaScript aber auch zu einem weniger erfreulichen Zweck, nämlich zur Anzeige von Werbebotschaften, verwendet. Dabei werden in einem PopUp Fenster, teils auf äußerst penetrante Weise, Informationen zu Produkten oder Dienstleistungen angezeigt. Diese PopUps werden meist direkt nach dem Laden einer Internetseite – hier wird das onLoad-Event genutzt – geöffnet und über das aktuelle Browserfenster gelegt, um sicher zu gehen, dass die Werbebotschaft beachtung findet. Moderne Browser sind heute allerdings in der Lage solche Einblendungen – zumindest, wenn traditionelle PopUps verwendet werden – zu verhindern (PopUp-Blocker).

Neben den traditionellen PopUps wird heute, aufgrund der zunehmenden Verbreitung von PopUp-Blockern, immer häufiger auf sogenannte DIV-PopUps zurückgegriffen. Bei dieser Vorgehensweise wird kein neues Browserfenster geöffnet, sondern ein DIV-Element über den Seiteninhalt gelegt, in dem die Werbebotschaften untergebracht sind. Anders als bei PopUp Fenstern kann diese Art der Werbeeinblendung auf einer Internetseite durch PopUp-Blocker nicht ohne weiteres verhindert werden. Bitte beachten Sie, die dass hier gezeigten Beispiele bei aktiviertem PopUp-Blocker teilweise nicht funktionieren!

Im JavaScript-Code unten wird eine Funktion zum Öffnen eines PopUp Fensters definiert. Die aufzurufende URL wird der Funktion in Form eines Strings übergeben. Hier wird durch Speicherung eines Verweises auf das Window-Objekt eines geöffneten PopUp Fensters das mehrfache Öffnen eines Fensters verhindert. Das eigentliche Öffnen des PopUp Fensters geschieht über die Methode open des JavaScript Objekts Window. Allerdings wird diese Methode nur dann aufgerufen, wenn es noch kein geöffnetes PopUp Fenster gibt.

Anderenfalls führt der Aufruf der Funktion lediglich dazu, dass die übergebene URL im PopUp Fenster geladen wird. Hierzu bedient sich das Script des vordefinierten JavaScript-Objekts Location. Die Änderung der in diesem Objekt gespeicherten Eigenschaft href hat zur Folge, dass die entsprechende URL geladen wird. Beachten Sie auch das Beispiel unter Fenster, wo auf die Window-Eigenschaften eines aufrufenden Fensters zugegriffen wird.

<script language="javascript" type="text/javascript">
<!-- // JavaScript-Bereich für ältere Browser auskommentieren
// Variable zur Speicherung eines Verweises auf das
// PopUp Fenster.
var popup = null;

// Funktion öffnet ein PopUp Fenster in JavaScript
// Übergeben wird eine URL, die im geöffneten Fenster geladen
// werden soll. Darüber hinaus können optional die Fensterhöhe
// sowie die Fensterbreite übergeben werden.
function popup_fenster (url, width, height) {
  // Parameter für die Höhe und Breite des PopUp-Fensters
  // zur Übergabe an die open-Methode vorbereiten.
  var parameter = (width ? 'width=' + width : '') +
      (height ? ',height=' + height : '') +
      ',resizable';
  // Wenn keine URL übergeben wird, soll die aktuell
  // angezeigte Seite im PopUp geöffnet werden.
  url = (url ? url : location.href);
  // Erstmal prüfen, ob schon ein Fenster geöffnet wurde,
  // dessen Objektverweis in der Variablen popup gespeichert
  // ist und das bislang (weder manuell, noch per
  // Funktionsaufruf) nicht geschlossen wurde..
  if (popup instanceof Window && !popup.closed)
    // Fenster ist noch offen: Übergebene URL laden
    popup.window.location.href = url;
  else
    // Es wurde noch kein Fenster geöffnet bzw.
    // das PopUp wurde zwischenzeitlich geschlossen:
    // Neues Fenster mit Parametern öffnen
    popup = window.open (url, '', parameter);
}
// -->
</script>

JavaScript PopUp close

Auch das Schließen von PopUp Fenstern ist mit Hilfe von JavaScript kein großes Problem. Im folgenden Code-Abschnitt wird eine Funktion definiert, welche ein zuvor geöffnetes Fenster schließt. Zur Sicherheit wird, vor Aufruf der entsprechenden Methode zum Schließen des Fensters, geprüft, ob zuvor ein Fenster geöffnet und bis dato nicht geschlossen wurde. Abgefragt wird der Status des Fensters über die zugehörige Variable popup, in der ein Verweis zum PopUp Fenster gespeichert wird – s. Abschnitt oben, wo die Variable definiert und die Funktion zum Öffnen eines Fensters implementiert ist. Ist dies der Fall, so wird das Fenster mit Hilfe der Methode close geschlossen und die Variable zur Speicherung des Objektverweises auf das Fenster zurückgesetzt.

<script language="javascript" type="text/javascript">
<!-- // JavaScript-Bereich für ältere Browser auskommentieren
// Funktion zum Schließen eines ggf. geöffneten PopUp Fensters
function popup_close () {
  // Wurde das PopUp-Fenster geöffnet und bisher nicht
  // geschlossen?
  if (popup instanceof Window && !popup.closed) {
    // Fenster schließen...
    popup.close ();
    // und dann die Variable zur Speicherung des
    // Verweises auf das PopUp zurücksetzen.
    popup = null;
  }
}
// -->
</script>

PopUp in JavaScript: Browserfenster automatisch öffnen

Der folgende Beispiel-Code zeigt, wie ein PopUp-Fenster unmittelbar nach dem Laden eines HTML-Dokuments geöffnet werden kann. Dazu wird eine Funktion mit entsprechender Funktionalität als Event-Handler für das onLoad-Event eingesetzt. Dabei handelt es sich im unteren Beispiel um die Funktion popup_fenster, die bei Eintreten des Events mit den gewünschten Parametern aufgerufen wird. Weitere Informationen zur Verarbeitung von Benutzerereignissen finden Sie unter Event.

<html>
  <head>
    <title>PopUp Fenster mit JavaScript nach Laden der Seite öffnen</title>
    <!-- JavaScript-Code für das PopUp-Fenster -->
    <script language="javascript" type="text/javascript">
    <!-- // JavaScript-Bereich für ältere Browser auskommentieren
    var popup = null;

    function popup_fenster (url, width, height) {
      var parameter = (width ? 'width=' + width : '') +
          (height ? ',height=' + height : '') +
          ',resizable';
      url = (url ? url : location.href);
      if (popup instanceof Window && !popup.closed)
        popup.window.location.href = url;
      else
        popup = window.open (url, '', parameter);
    }
    // -->
    </script>
  </head>
  <!-- onLoad-Event mit einer Event-Handler-Funktion belegen.
       In diesem Fall ist dies die Funktion zum Öffnen des PopUps -->
  <body onload="popup_fenster('http://....', 250, 150)">
    Hier folgt der eigentliche Inhalt der Seite
    .....
  </body>
</html>

Auch die zeitverzögerte Anzeige eines JavaScript-PopUps – nach Laden des HTML-Dokuments oder nach Eintreten eines anderen Benutzerereignisses – ist möglich. Die zeitliche Verzögerung kann mit Hilfe der Methode setTimeout realisiert werden. Ein solcher Aufruf wird im folgenden Script-Abschnitt realisiert, wobei das Foto nicht automatisch, sondern erst nach Anklicken des Links geöffnet wird.

Soll das Fenster automatisch nach Ablauf des Timeouts angezeigt werden, so muss lediglich der Teil innerhalb der Void-Klammer in einem JavaScript-Bereich notiert werden (s. a. JavaScript in HTML einbauen). Mit einer zweisekündigen Verzögerung wird ein PopUp-Fenster mit einem Foto geöffnet – Zum Thema Darstellung von Fotos auf Internetseiten beachten Sie bitte auch die JavaScript Galerie. Bei diesem Beispiel wird der Void-Operator verwendet um zu verhindern, dass der von setTimeout gelieferte Rückgabewert zum Überschreiben der aktuell angezeigten Seite führt.

<a href="javascript:void(window.setTimeout ('popup_fenster (\'/javascript-demos/java-script-galerie/photos/tor.jpg\', 570, 380)', 2000))" title="">PopUp Fenster mit Verz&ouml;gerung &ouml;ffnen</a>

PopUp Fenster mit Verzögerung öffnen

JavaScript PopUp Fenster Beispiel: Manuelles öffnen eines PopUp Fensters

Beim letzten Beispiel wird ein PopUp-Fenster direkt und ohne Verzögerung nach Anklicken eines Links geöffnet. Hier erfolgt der Aufruf der Funktion zum Öffnen des PopUp-Fensters direkt in der href-Eigenschaft des A-Tags.

<a href="javascript:popup_fenster ('/javascript-demos/java-script-galerie/photos/tor.jpg', 570, 380)" title="">PopUp Fenster &ouml;ffnen</a>

PopUp Fenster öffnen



¬ Insolvenzrecht