JavaScript: PopUp-Fenster

► JavaScript-Referenz: open() moveTo() resizeTo()

Falls man entgegen der Hinweise zur eingeschränkten Benutzerfreundlichkeit von PopUp-Fenstern dennoch auf diese Technik zurückgreifen möchte, kann man dies mit der Methode window.open() tun, die drei Argumente erwartet. Das erste ist der Pfad zu der Datei, die in dem neuen Fenster geladen werden soll. Das zweite ist der Name des Fensters, der im aufrufenden Script dazu verwendet werden kann, das Fenster erneut anzusprechen (z. B. im target-Attribut von Links). Im dritten Argument werden die Parameter für Größe und Position des Fensters übergeben. Wird das dritte Argument nicht angegeben, öffnet sich stattdessen einfach ein neues Tab.

Theoretisch lässt sich ein solches Fenster mit moveTo() an eine neue Position verschieben und mit resizeTo() dessen Größe verändern, allerdings funktioniert das nur in Firefox. Chromium bzw. Vivaldi boykottieren diese Möglichkeit gegenwärtig.

Code kopieren

<!DOCTYPE html>
<html lang="de">
  <head>
    <title>JavaScript PopUp</title>
    <meta charset="UTF-8">
    <script>
      function openPopUp() {
        MyPopup = window.open("popup.htm","popup","width=600, height=250, left=50, top=100");
        MyPopup.moveTo(500, 500);
        MyPopup.resizeTo(500, 500);
      }
    </script>
  </head>
  <body>
    <button type="button" onclick="openPopUp();">PopUp-Fenster öffnen</button>
  </body>
</html>

Elternfenster über Popup manipulieren

► JavaScript-Referenz: window.opener close()

Jetzt braucht man natürlich noch eine Datei, die in dem Popup angezeigt werden soll. Entsprechend der Referenz in der Elterndatei (Zeile 8) heißt diese popup.htm und befindet sich im gleichen Verzeichnis wie die Elterndatei. In dem Popup ist noch eine weitere JavaScript-Methode enthalten, die verdeutlichen sollen, wie man mit window.opener aus diesem Popup heraus den Inhalt des Elternfensters verändern kann (funktioniert allerdings nicht offline, sondern nur über einen Webserver, der aber auch lokal sein kann). Mit window.close() Kann das PopUp-Fenster wieder geschlossen werden.

Code kopieren

<!DOCTYPE html>
<html lang="de">
  <head>
    <title>JavaScript PopUp</title>
    <meta charset="UTF-8">
    <script>
      function changeParent() {
        window.opener.document.getElementsByTagName("body")[0].style.backgroundColor="cyan";
      }
    </script>
  </head>
  <body>
    <button type="button" onclick="changeParent();">Eltern-Fenster manipulieren</button>
    <button type="button" onclick="window.close();">Dieses Fenster schließen</button>
  </body>
</html>