Vergleich der verschiedenen Arten von nativen JavaScript Popups

JavaScript bietet eine Vielzahl von integrierten Popup-APIs, die spezielle Benutzeroberflächen für die Benutzerinteraktion anzeigen. Berühmterweise

alert("Hello, World!");

Die Benutzeroberfläche variiert je nach Browser, aber im Allgemeinen sehen Sie ein kleines Fenster, das mitten im Bild erscheint und die von Ihnen übergebene Nachricht enthält. Hier sind Firefox und Chrome

Es gibt ein großes Problem, das Sie im Voraus kennen sollten

JavaScript-Popups sind blockierend.

Die gesamte Seite stoppt im Wesentlichen, wenn ein Popup geöffnet ist. Sie können nicht mit irgendetwas auf der Seite interagieren, während eines geöffnet ist – das ist irgendwie der Sinn eines „modalen Fensters“, aber es ist immer noch eine UX-Überlegung, der Sie sich unbedingt bewusst sein sollten. Und entscheidend ist, dass kein anderer JavaScript-Code auf dem Hauptthread ausgeführt wird, während das Popup geöffnet ist, was unnötigerweise verhindern könnte (und wahrscheinlich auch tut), dass Ihre Website Dinge tut, die sie tun muss.

Neun von zehn Mal ist es besser, die Dinge so zu gestalten, dass Sie kein so schwerwiegendes, alles stoppendes Verhalten benötigen. Native JavaScript-Alerts werden von Browsern auch so implementiert, dass Sie keine Designkontrolle haben. Sie können nicht kontrollieren, *wo* sie auf der Seite erscheinen oder *wie* sie aussehen, wenn sie dort ankommen. Sofern Sie die vollständige blockierende Natur nicht unbedingt benötigen, ist es fast immer besser, eine benutzerdefinierte Benutzeroberfläche zu verwenden, die Sie so gestalten können, dass sie das Erlebnis für den Benutzer maßgeschneidert.

Damit das geklärt ist, schauen wir uns jeden der nativen Popups an.

window.alert();

window.alert("Hello World");

<button onclick="alert('Hello, World!');">Show Message</button>

const button = document.querySelectorAll("button");
button.addEventListener("click", () => {
  alert("Text of button: " + button.innerText);
});

Sehen Sie den Pen
alert("Beispiel"); von Elliot KG (@ElliotKG)
auf CodePen.

Wofür es gut ist: Anzeige einer einfachen Nachricht oder Debugging des Werts einer Variablen.

Wie es funktioniert: Diese Funktion nimmt einen String und präsentiert ihn dem Benutzer in einem Popup mit einer Schaltfläche mit der Beschriftung „OK“. Sie können nur die Nachricht ändern und keinen anderen Aspekt, z. B. die Beschriftung der Schaltfläche.

Die Alternative: Wie bei allen anderen Alerts ist es wahrscheinlich besser, eine Nachricht auf eine Weise zu präsentieren, die für das, was Sie tun möchten, maßgeschneidert ist.

Wenn Sie den Wert einer Variablen debuggen möchten, erwägen Sie console.log("Wert der Variablen: ", variable); und schauen Sie in der Konsole nach.

window.confirm();

window.confirm("Are you sure?");

<button onclick="confirm('Would you like to play a game?');">Ask Question</button>

let answer = window.confirm("Do you like cats?");
if (answer) {
  // User clicked OK
} else {
  // User clicked Cancel
}

Sehen Sie den Pen
confirm("Beispiel"); von Elliot KG (@ElliotKG)
auf CodePen.

Wofür es gut ist: Nachrichten im Stil von „Sind Sie sicher?“, um zu sehen, ob der Benutzer wirklich die Aktion abschließen möchte, die er eingeleitet hat.

Wie es funktioniert: Sie können eine benutzerdefinierte Nachricht angeben, und das Popup bietet Ihnen die Option „OK“ oder „Abbrechen“, einen Wert, den Sie dann verwenden können, um zu sehen, was zurückgegeben wurde.

Die Alternative: Dies ist eine sehr aufdringliche Art, den Benutzer aufzufordern. Wie Aza Raskin sagt

…vielleicht möchten Sie gar keine Warnung verwenden.“

Es gibt unzählige Möglichkeiten, einen Benutzer zur Bestätigung von etwas aufzufordern. Wahrscheinlich ist eine klare Benutzeroberfläche mit einem <button>Bestätigen</button>, der so verdrahtet ist, dass er das tut, was Sie von ihm verlangen.

window.prompt();

window.prompt("What’s your name?"); 

let answer = window.prompt("What is your favorite color?");
// answer is what the user typed in, if anything

Sehen Sie den Pen
prompt("Beispiel?", "Standardbeispiel"); von Elliot KG (@ElliotKG)
auf CodePen.

Wofür es gut ist: Aufforderung des Benutzers zur Eingabe. Sie geben einen String (wahrscheinlich wie eine Frage formatiert) an und der Benutzer sieht ein Popup mit diesem String, einem Eingabefeld, in das er tippen kann, sowie „OK“- und „Abbrechen“-Schaltflächen.

Wie es funktioniert: Wenn der Benutzer auf OK klickt, erhalten Sie, was er in das Eingabefeld eingegeben hat. Wenn er nichts eingibt und auf OK klickt, erhalten Sie einen leeren String. Wenn er Abbrechen wählt, ist der Rückgabewert null.

Die Alternative: Wie bei allen anderen nativen JavaScript-Alerts ist es nicht möglich, die Alert-Box zu gestalten oder zu positionieren. Es ist wahrscheinlich besser, ein <form> zu verwenden, um Informationen vom Benutzer zu erhalten. Auf diese Weise können Sie mehr Kontext und ein zielgerichteteres Design bereitstellen.

window.onbeforeunload();

window.addEventListener("beforeunload", () => {
  // Standard requires the default to be cancelled.
  event.preventDefault();
  // Chrome requires returnValue to be set (via MDN)
  event.returnValue = '';
});

Sehen Sie den Pen
Beispiel für das beforeunload-Ereignis von Chris Coyier (@chriscoyier)
auf CodePen.

Wofür es gut ist: Den Benutzer warnen, bevor er die Seite verlässt. Das klingt, als könnte es sehr nervig sein, aber es wird nicht oft nervig eingesetzt. Es wird auf Websites verwendet, auf denen Sie arbeiten und Ihre Arbeit explizit speichern müssen. Wenn der Benutzer seine Arbeit nicht gespeichert hat und gerade dabei ist, wegzunavigieren, können Sie dies verwenden, um ihn zu warnen. Wenn er seine Arbeit gespeichert hat, sollten Sie sie entfernen.

Wie es funktioniert: Wenn Sie das beforeunload-Ereignis an das Fenster angehängt haben (und die zusätzlichen Dinge wie im obigen Snippet getan haben), sehen die Benutzer ein Popup, das sie fragt, ob sie „Verlassen“ oder „Abbrechen“ möchten, wenn sie versuchen, die Seite zu verlassen. Das Verlassen der Website kann daran liegen, dass der Benutzer auf einen Link geklickt hat, es kann aber auch das Ergebnis des Klickens auf die Aktualisierungs- oder Zurück-Schaltflächen des Browsers sein. Sie können die Nachricht nicht anpassen.

MDN warnt, dass einige Browser Interaktionen mit der Seite erfordern, damit es überhaupt funktioniert

Um unerwünschte Popups zu bekämpfen, zeigen einige Browser keine Prompts an, die in beforeunload-Ereignishandlern erstellt wurden, es sei denn, die Seite wurde bereits vom Benutzer interaktiv genutzt. Darüber hinaus zeigen einige gar keine an.

Die Alternative: Nichts, was mir einfällt. Wenn es darum geht, dass ein Benutzer Arbeit verliert oder nicht, müssen Sie dies irgendwie verwenden. Und wenn er sich entscheidet zu bleiben, sollten Sie klarstellen, was er tun muss, um sicherzustellen, dass es sicher ist, die Seite zu verlassen.

Barrierefreiheit (Accessibility)

Native JavaScript-Alerts wurden früher in der Barrierefreiheitswelt verpönt, aber es scheint, dass Screenreader inzwischen intelligenter damit umgehen. Laut Penn State Accessibility

Die Verwendung einer Alert-Box wurde früher abgeraten, aber sie sind in modernen Screenreadern tatsächlich zugänglich.

Es ist wichtig, die Barrierefreiheit bei der Erstellung eigener Modals zu berücksichtigen, aber es gibt einige großartige Ressourcen wie diesen Beitrag von Ire Aderinokun, die Sie in die richtige Richtung weisen.

Allgemeine Alternativen

Es gibt eine Reihe von Alternativen zu nativen JavaScript-Popups, wie z. B. das Schreiben eigener Popups, die Verwendung von Modal-Fenster-Bibliotheken und die Verwendung von Alert-Bibliotheken. Beachten Sie, dass nichts, was wir behandelt haben, die JavaScript-Ausführung und Benutzerinteraktion vollständig blockieren kann, aber einige können dem nahe kommen, indem sie den Hintergrund ausgrauen und den Benutzer zwingen, mit dem Modal zu interagieren, bevor er fortfährt.

Sie sollten sich das native HTML-Element <dialog> ansehen. Chris hat es kürzlich ausprobiert. Es ist überzeugend, leidet aber anscheinend unter einigen erheblichen Barrierefreiheitsproblemen. Ich bin mir nicht ganz sicher, ob das Erstellen eines eigenen besser oder schlechter wäre, da die Handhabung von Modals ein extrem nicht triviales interaktives Element ist, mit dem man sich befassen kann. Einige UI-Bibliotheken wie Bootstrap bieten Modals an, aber die Barrierefreiheit liegt immer noch größtenteils in Ihrer Verantwortung. Möglicherweise sollten Sie sich Projekte wie a11y-dialog ansehen.

Zusammenfassung

Die Verwendung integrierter APIs der Webplattform kann den Eindruck erwecken, dass Sie das Richtige tun – anstatt riesige Mengen JavaScript zu versenden, um Dinge zu replizieren, verwenden Sie das, was wir bereits integriert haben. Aber es gibt ernsthafte Einschränkungen, UX-Bedenken und Performance-Überlegungen, von denen keine besonders für die Verwendung der nativen JavaScript-Popups spricht. Es ist wichtig zu wissen, was sie sind und wie sie verwendet werden können, aber Sie werden sie wahrscheinlich nicht sehr oft in produktiven Websites benötigen.