Popup-Generator

So funktioniert das Script

Das Script hat drei Aufgaben: Es liest die Formularfelder aus, setzt daraus die Merkmalsliste für window.open() zusammen und schreibt den fertigen Code in das Ausgabefeld. Der zweite Knopf ruft dieselbe Merkmalsliste auf und öffnet damit sofort ein Testfenster. Alles steckt in einer sofort ausgeführten Funktion, damit die Namen darin nicht mit anderen Scripts auf der Seite kollidieren.

function jaNein(id) {
  return document.getElementById(id).checked ? "yes" : "no";
}

Ein Ankreuzfeld liefert über .checked die Werte true oder false. window.open() erwartet aber die englischen Wörter yes und no. Der Bedingungsoperator ? : übersetzt in einer Zeile: Ist der Ausdruck vor dem Fragezeichen wahr, gilt der erste Wert, sonst der zweite. Man liest ihn als „wenn angekreuzt, dann yes, sonst no“.

return [
  "width=" + zahl("pg-breite"),
  "height=" + zahl("pg-hoehe"),
  "location=" + jaNein("pg-location")
].join(",");

Die Merkmale eines Popups übergibt man window.open() als eine einzige Zeichenkette, in der die Angaben durch Kommas getrennt stehen — etwa width=600,height=400,location=no. Statt sie mühsam aneinanderzuhängen, sammelt das Script sie als Liste und fügt sie mit join(",") zusammen. join() setzt zwischen je zwei Einträge das angegebene Trennzeichen; das spart die Fehlersuche nach einem vergessenen oder überzähligen Komma.

function saeubern(wert) {
  return wert.trim().replace(/["'<>]/g, "");
}

Adresse und Linktext landen später mitten im erzeugten HTML. Ein Anführungszeichen darin würde das href-Attribut vorzeitig beenden, spitze Klammern könnten ein fremdes Element einschleusen — der erzeugte Code wäre kaputt. replace() mit einem regulären Ausdruck entfernt diese vier Zeichen deshalb vorsorglich. Die Schrägstriche begrenzen das Suchmuster, in den eckigen Klammern stehen die gesuchten Zeichen, und das g dahinter steht für „global“, also alle Fundstellen statt nur der ersten. trim() schneidet vorher noch überflüssige Leerzeichen an den Rändern ab. Eine zweite kleine Funktion fuerHtml() ersetzt anschließend jedes kaufmännische Und durch & — so bleibt eine Adresse wie seite.html?a=1&b=2 auch als HTML korrekt geschrieben.

document.getElementById("pg-code").value = [
  '<a href="' + adresse + '" id="popup-link">' + linktext + '</a>',
  '<script>',
  '  window.open(this.href, "popupfenster", "' + merkmale() + '");',
  '<\/script>'
].join("\n");

Hier entsteht der Code, den ihr kopiert: wieder eine Liste von Zeilen, diesmal mit join("\n") verbunden — \n ist das Zeichen für einen Zeilenumbruch. Auffällig ist der Schrägstrich in <\/script>. Er ist ein kleiner, aber wichtiger Trick: Stünde dort ein normales </script>, würde der Browser beim Einlesen der Seite an dieser Stelle das laufende Script für beendet halten — mitten in einer Zeichenkette. Der Schrägstrich davor stört JavaScript nicht, der Browser erkennt das Ende aber nicht mehr als solches.

Beachtet außerdem, dass die Ausgabe über .value des Textbereichs läuft und nicht über innerHTML. Ein Textbereich behandelt seinen Inhalt immer als reinen Text; der erzeugte Code wird also angezeigt und nicht ausgeführt.

navigator.clipboard.writeText(feld.value).then(fertig, notnagel);

Der Knopf „Code kopieren“ reicht den Inhalt des Ausgabefeldes an die Zwischenablage weiter. navigator.clipboard.writeText() ist der heutige Weg dafür; die Funktion arbeitet asynchron und liefert ein Versprechen zurück, weshalb der Erfolgsfall in then() steht. Ältere Browser kennen sie nicht — für die markiert der Notnagel den Text mit select() und kopiert ihn mit dem betagten document.execCommand("copy").

if (zahl("pg-breite") > 0 && zahl("pg-hoehe") > 0) {
  return false;
}
hinweis.textContent = "Bitte für Breite und Höhe je eine Zahl größer als 0 eintragen.";
return true;

Diese kleine Prüfung nutzen beide Knöpfe gemeinsam. Sie liefert true, wenn etwas fehlt — daher der Name masseFehlen(). Steht in einem der Felder keine Zahl, ergibt Number() den Wert NaN, und jeder Vergleich mit NaN ist falsch; die Bedingung greift also auch bei Buchstaben im Feld. Der aufrufende Code bricht dann mit return ab, statt ein Fenster der Größe null zu öffnen.

Zum Anpassen: Der Aufruf erzeugen() in der vorletzten Zeile sorgt dafür, dass beim Laden schon ein fertiges Beispiel im Ausgabefeld steht — wer das nicht mag, löscht die Zeile.

Und wie funktioniert der erzeugte Code?

<a href="https://www.beispiel.de/" id="popup-link">Popup öffnen</a>
<script>
document.getElementById("popup-link").addEventListener("click", function (ereignis) {
  ereignis.preventDefault();
  window.open(this.href, "popupfenster", "width=600,height=400,top=100,left=100,location=no,…");
});
</script>

Das Ergebnis des Generators — und zugleich der Code im Kasten ganz unten — ist erfreulich kurz: ein gewöhnlicher Link und eine Handvoll Zeilen JavaScript. addEventListener("click", …) hängt sich an den Klick auf diesen Link. preventDefault() unterdrückt dabei die normale Reaktion des Browsers, also das Springen zur verlinkten Seite im selben Fenster. Erst danach übernimmt window.open().

Diese Funktion bekommt drei Angaben. Die erste ist die Adresse: this.href, also das Ziel des angeklickten Links — so steht die Zieladresse nur einmal im Code, nämlich im href. Die zweite ist der Name des Fensters, hier "popupfenster"; ein zweiter Klick lädt die neue Seite dann in dasselbe Fenster, statt ein weiteres zu öffnen. Die dritte ist der sogenannte Feature-String, eine einzige Zeichenkette mit allen Fenstereigenschaften: name=wert, durch Kommas getrennt und ohne Leerzeichen dazwischen — ein Leerzeichen an der falschen Stelle lässt manche Browser den Rest der Liste verwerfen. Zahlen sind Pixelangaben (width, height, top, left), die übrigen Merkmale schaltet man mit yes oder no. Lässt man den dritten Parameter ganz weg, öffnet der Browser statt eines Popups einfach einen neuen Tab.

Ein Punkt bleibt unumgänglich: Ein Popup öffnet sich nur, wenn ein Mensch geklickt hat. Ruft man window.open() beim Laden der Seite oder in einem Timer auf, blockieren die Browser das Fenster. Deshalb sitzt der Aufruf hier in einem Klick-Handler — und wenn ihr statt eines Popups lieber einen gewöhnlichen neuen Tab öffnen wollt, genügt im Link ein target="_blank" rel="noopener"; das ganze JavaScript entfällt dann.