Dialogfenster in JavaScript

Veröffentlicht am Sonntag, 24. Februar 2008, von Alphane Moon

Das Objekt window stellt drei Methoden bereit, mit denen man einfache Dialogfenster oder Dialogboxen öffnen kann: alert, confirm und prompt. Das Objekt window ist ein Browserobjekt, DOM Level 0, und die drei Dialogbox-Funktionen funktionieren somit in allem, was sich Browser nennt und JavaScript unterstützt.

Die Fenster an sich sind nicht besonders schön. Man sollte sie deshalb einem Webseitenbesucher nicht unbedingt zumuten, es gibt inzwischen elegantere Techniken. Trotzdem sind sie ganz nützlich, wenn man selber schnell etwas ausprobieren möchte.

alert

Die Funktion alert öffent ein kleines Pop-up-Fenster mit einer Meldung und einem einzigen Knopf: „OK“. Die Webseite wird eingefroren bis der Benutzer bestätigt hat.

Ein alert-Fenster zu öffnen ist nicht schwer: Wir schnappen und das Objekt window und übergeben der Methode alert einen String, der dann im Dialogfenster angezeigt wird.

window.alert("Super, ein alert-Pop-up!");

Die Angabe von window ist optional, es funktioniert auch so:

alert("Super, ein alert-Pop-up!");

Beispiel ausprobieren: Click here

Die Methode alert wird besonders gerne zum Demostrieren von XSS-Anfälligkeiten von Webseiten benutzt, weil das unkompliziert und sofort sichtbar ist. Die Funktion alert wird deshalb auf manchen Websites „geblockt“, was die Sicherheitslücke natürlich überhaupt nicht behebt. Die beiden anderen Funktionen sind wahrscheinlich erlaubt:

confirm

Die Funktion confirm ist nicht komplizierter. Der Benutzer darf sich zwischen „OK“ und „Abbrechen“ entscheiden bevor es weitergeht.

window.confirm("Eine Zeichenkette wird ausgegeben");

confirm("Eine Zeichenkette wird ausgegeben");

Der Rückgabewert von confirm ist entweder true oder false. Im folgenden Beispiel wird der Rückgabewert in einer alert-Box ausgegeben:

var confirmResult = confirm("Erträgst du es noch?");
alert(confirmResult);

Beispiel ausprobieren: Click here

prompt

Die Funktion prompt öffnet eine Dialogbox mit einem Texteingabefeld und den zwei Knöpfen, die auch confirm zu bieten hat: „OK“ und „Abbrechen“.

window.prompt("Eine Zeichenkette wird ausgegeben", "vorgegebener Text");

prompt("Eine Zeichenkette wird ausgegeben", "vorgegebener Text");

Der Rückgabewert ist entweder die durch den Benutzer eingebene Zeichenkette als String oder der leere String, wenn nichts eingegeben wurde, aber der „OK“-Button gewählt wurde. Wenn „Abbrechen“ gewählt wurde, ist der Rückgabewert null (Internet Explorer 7, Safari und Firefox) oder undefined (Opera 9.26).

Im nächsten Beispiel wird die Benutzereingabe mit alert wieder ausgegeben:

var promptResult = prompt("Noch mehr?", "Bitte nicht.");
alert(promptResult);

Beispiel ausprobieren: Click here

Ressourcen

Auf der Website des Mozilla Developer Center findet man für jede der Dialogfenster-Methoden eine eigene Dokumentationsseite: