Wie programmiere ich ein Popup für meine Website?

1 Antwort

guterfrager5
24.10.2022, 12:52

Edit/TL;DR: sorry dass es so lang geworden ist, wenn es zu viel zu lesen ist, kannst du auch einfach die verlinkte Seite durchlesen, und sehen, ob du es da verstehst und dir einfach die Beispiele angucken :D

Auf MDN kannst du dir die Dokumentation durchlesen, wie das geht.

In allen modernen Browsern werden automatische Popups blockiert. Wenn es essenziell ist, dass es geöffnet wird, muss es durch Benutzerinteraktion (z.B. klicken von einem Button) geöffnet werden.

Um ein Fenster zu öffnen, rufst du also window.open() auf. Damit gibt es natürlich verschiedene Versionen:

window.open()
window.open(url)
window.open(url, target)
window.open(url, target, windowFeatures)

Das erste also window.open() öffnet einfach ein neues Tab/Fenster (je nach Einstellungen), in dem nichts steht (also eine leere Seite). Das kannst du in einer Variable speichern, um etwas reinzuschreiben bzw. mit dem Inhalt zu interagieren:

// Fenster/Tab öffnen
var win = window.open();

// Änderungen im anderen Fenster machen
win.document.write("<html><head></head><body><p>Hellou there</p></body></html>");

// Fenster wieder schließen
win.close();

Die zweite Variante ist window.open(url). Damit kannst du eine Adresse öffnen, was den selben Effekt hätte, als ob der Benutzer mit Mittel-Klick auf einen Link geklickt hätte. Wenn du damit eine Unterseite öffnest, kannst du allerdings auch auf den Inhalt zugreifen und ihn ändern.

Die dritte Version also window.open(url, target) ist das gleiche wie die zweite mit dem Unterschied, dass du ein Ziel angegeben hast.
Es kann immer nur ein einziges Fenster mit einem target existieren, was bedeutet, dass du damit verhindern kannst, für alles ein neues aufzumachen. Hier ein kleines Beispiel damit:

 <button onclick="window.open('', 'ziel');">Fenster öffnen</button>
<button onclick="window.open('http://google.de', 'ziel');">Google aufrufen</button>
<button onclick="window.open('http://duckduckgo.com', 'ziel');">Duckduckgo aufrufen</button>

Das sind drei Buttons, in denen allen window.open() aufgerufen wird. Weil aber bei allen das target gleich ist (also ziel), würde der erste Button beim klicken eine leere Seite öffnen, der zweite würde diese Seite mit http://google.de ersetzen und der dritte würde sie mit http://duckduckgo.com ersetzen.

Wenn das target unterschiedlich wäre, würde es für jedes ein eigenes Fenster öffnen. Das hat also den gleichen Effekt wie das target-Attribut vom <a> Tag in HTML.

Die letzte Version ist window.open(url, target, windowFeatures). Damit hast du alle Funktionen der vorherigen und kannst zusätzlich auch noch Optionen angeben, wie es sich verhält. Das sind Dinge wie ob es ein Popup sein soll, die Breite/Höhe (ein/ausschließlich Scrollbars), Position auf dem Bildschirm, ob das geöffnete Fenster sehen darf, wer es geöffnet hat und ob der Referer-Header gesendet wird oder nicht (wie <a rel="noreferer"> in HTML).

Hierfür noch ein Beispiel, wie du ein Fenster öffnen kannst, dass eine festgelegte Größe hat.

<button onclick="window.open('', 'ziel', 'width=400,height=300');">Fenster öffnen</button>
<button onclick="window.open('http://google.de', 'ziel', 'width=500,height=400');">Google aufrufen</button>
<button onclick="window.open('http://duckduckgo.com', 'ziel', 'width=600,height=500');">Duckduckgo aufrufen</button>

Hier wurde bei allen Buttons unterschiedliche Größen aber immer das selbe Ziel angegeben. Wenn man zuerst auf den ersten Link klickt, würde es ein 400x300 großes Fenster öffnen. Wenn man dannach auf einen der anderen klickt, wird einfach die Adresse geändert, die Größe aber nicht angepasst. Wenn man also zuerst auf den größten geklickt hat, würde es auch nicht kleiner gemacht werden.

Die Größe kann aber natürlich auch vom Benutzer geändert werden und sollte nicht ausschlaggebend sein :D

Um das Fenster zu schließen, gibt es die Funktion window.close(). Bei dieser Funktion gibt es aber natürlich auch wieder die Einschränkung, dass nur Fenster geschlossen werden können, die auch von einem Skript geöffnet wurden. Um das zu nutzen, musst du das Fenster in einer Variable speichern, dass du später noch darauf zugreifen kannst.

Hier ein Beispiel damit:

<button onclick="fensterAufmachen()">Fenster öffnen</button>
<button onclick="fensterZuMachen()">Fenster zu machen</button>

<script>
function fensterAufmachen() {
  window.fenster = window.open('', 'ziel', 'width=400,height=300');

  // hier wird ein Button eingefügt, der die Funktion
  // fensterZuMachen() von unten aufruft.
  fenster.document.write("<button onclick='window.opener.fensterZuMachen()'>Fenster zu machen</button>");
}

function fensterZuMachen() {
  window.fenster.close();
}
</script>

Hier habe ich den Code mal in Funktionen geschrieben, dass es übersichtlicher ist. Der Button, der auf der Seite eingefügt wird, greift über "window.opener" auf das Fenster zu, welches die Seite aufgemacht hat, und ruft dort die Funktion zum schließen auf.

Theoretisch könnte man auch einfach nur window.close() aufrufen, das hat bei mir allerdings nicht immer funktioniert. Wenn du nur in dem Popup bleiben kannst, kannst du es auch noch mit window.parent.close() versuchen. Das macht auf den ersten Blik zwar wenig Sinn (auf den zweiten auch nicht) aber es scheint das Fenster zu schließen :D