Comparaison des différents types de popups JavaScript natifs

JavaScript fournit une variété d'API pop-up intégrée pour afficher des UIS spéciales pour l'interaction utilisateur. Les plus courants sont:

 alerte ("Bonjour, monde!");

L'interface utilisateur varie d'un navigateur à l'autre, mais généralement vous verrez une petite fenêtre apparaître au centre de la page d'une manière très accrocheuse, contenant les messages que vous passez. Voici des exemples de Firefox et Chrome:

Problèmes majeurs dans les popups JavaScript natifs

Les popups JavaScript bloquent .

Lorsque le pop-up s'ouvre, la page entière cessera de fonctionner. Pendant un pop-up, vous ne pouvez pas interagir avec quoi que ce soit sur la page - c'est exactement le sujet de la «fenêtre modale», mais c'est toujours un facteur d'expérience utilisateur auquel vous devriez prêter une attention particulière. Il est crucial qu'aucun autre code JavaScript principal principal ne s'exécute lorsque la fenêtre contextuelle s'ouvre, ce qui peut (et très probablement) empêcher inutilement votre site Web de faire ce qu'il doit faire.

Neuf sur dix fois, il est préférable de repenser votre architecture pour éviter d'utiliser ce comportement qui oblige toutes les opérations à s'arrêter. Le navigateur implémente également les alertes JavaScript natives vous empêche de contrôler sa conception. Vous ne pouvez pas contrôler où ils se trouvent sur la page ou à quoi ils ressemblent là-bas. À moins que vous n'ayez absolument besoin de leurs fonctionnalités de blocage total, il est presque toujours préférable d'utiliser une interface utilisateur personnalisée que vous pouvez concevoir pour personnaliser l'expérience pour l'utilisateur.

Jetons un coup d'œil à chaque fenêtre pop-up native.

window.alert()

 Window.Alert ("Hello World");

// Afficher l'exemple de message const Button = Document.QuerySelectorAll ("Button");
Button.AdDeventListener ("Click", () => {
  alert ("Button Text:" Button.InnerText);
});

Objectif: Affiche la valeur d'une variable de message simple ou de débogage.

Comment cela fonctionne: cette fonction prend une chaîne et la présente à l'utilisateur dans une fenêtre contextuelle d'un bouton avec l'étiquette OK. Vous ne pouvez modifier le message, pas un autre aspect, tel que le texte sur le bouton.

Alternative: comme d'autres alertes, si vous devez afficher un message à l'utilisateur, il est préférable de l'afficher d'une manière qui convient à l'action que vous essayez d'effectuer.

Si vous essayez de déboguer la valeur d'une variable, envisagez d'utiliser console.log("变量的值：", variable); et le voir dans la console.

window.confirm()

 window.confirm ("Êtes-vous sûr?");

// Demandez à un échantillon let réponse = window.confirm ("Aimez-vous les chats?");
if (réponse) {
  // L'utilisateur a cliqué sur "OK"
} autre {
  // L'utilisateur a cliqué sur "Annuler"
}

Objectif: Utilisé pour "êtes-vous sûr?" Tapez des messages pour voir si l'utilisateur veut vraiment terminer l'action qu'il a commencé.

Comment cela fonctionne: vous pouvez fournir des messages personnalisés, la fenêtre contextuelle fournira l'option OK ou Annuler, et vous pouvez ensuite utiliser cette valeur pour afficher le contenu renvoyé.

Alternative: il s'agit d'un moyen très intrusif de provoquer des utilisateurs. Comme l'a dit Aza Raskin:

… Peut-être que vous ne voulez pas du tout utiliser des avertissements. "

Il existe de nombreuses façons de demander à l'utilisateur de confirmer un certain contenu. Probablement une interface utilisateur claire avec un bouton de confirmation qui se connecte à ce dont vous avez besoin.

window.prompt()

 window.prompt ("Quel est votre nom?");

Let Answer = Window.prompt ("Quelle est votre couleur préférée?");
// Réponse est ce que l'utilisateur entre (le cas échéant)

Objectif: invitez l'utilisateur à entrer. Vous fournissez une chaîne (probablement formatée en tant que problème) et l'utilisateur verra une fenêtre contextuelle contenant la chaîne, une boîte d'entrée qui peut être entrée et les boutons OK et Annuler.

Comment cela fonctionne: si l'utilisateur clique sur "OK", vous obtiendrez ce qu'il a entré dans la zone d'entrée. S'ils ne tapent rien et cliquent sur OK, vous obtiendrez une chaîne vide. S'ils choisissent Annuler, la valeur de retour sera nul.

Alternative: comme toutes les autres alertes JavaScript natives, cela ne vous permet pas non plus de styliser ou de positionner la boîte d'alerte. Mieux à utiliser<input> Élément pour obtenir des informations utilisateur. De cette façon, vous pouvez fournir plus de contexte et de conception délibérée.

window.onbeforeunload()

 window.adDeventListener ("avant en charge", () => {
  // La norme nécessite l'annulation de l'opération par défaut.
  event.PreventDefault ();
  // Chrome nécessite le réglage de returnValue (via MDN)
  event.reTurnValue = '';
});

Objectif: émettez un avertissement avant que l'utilisateur ne quitte la page. Cela peut sembler très ennuyeux, mais il n'est pas souvent utilisé avec ennuyeux. Il est utilisé pour les sites Web sur lesquels vous pouvez travailler et devez le sauvegarder explicitement. Si l'utilisateur n'a pas sauvé son travail et est sur le point de partir, vous pouvez utiliser cette méthode pour les avertir. S'ils ont sauvé leur travail, vous devriez le supprimer.

Comment cela fonctionne: si vous avez joint l'événement beforeunload à la fenêtre (et effectué d'autres actions indiquées dans l'extrait ci-dessus), lorsque l'utilisateur essaie de quitter la page, ils verront un pop-up demander s'ils veulent "quitter" ou "annuler". Le départ du site peut être dû au fait que l'utilisateur a cliqué sur un lien, mais il peut également être le résultat du clic sur le bouton de rafraîchissement ou de retour du navigateur. Vous ne pouvez pas personnaliser le message.

MDN avertit que certains navigateurs nécessitent une interaction avec la page pour le faire fonctionner:

Pour lutter contre les fenêtres indésirables, certains navigateurs n'affichent pas d'invites créées dans le gestionnaire d'événements beforeunload à moins que la page n'ait interagi avec elle. De plus, certains navigateurs ne les montrent pas du tout.

Alternative: rien ne peut être pensé. S'il s'agit d'un problème avec la perte de travail de l'utilisateur, vous devez l'utiliser. S'ils choisissent de rester, vous devez indiquer clairement ce qu'ils devraient faire pour s'assurer que le départ est sûr.

Accessibilité

Les alertes JavaScript natives étaient impopulaires dans le monde de l'accessibilité, mais les lecteurs d'écran semblent devenir plus intelligents dans la façon dont ils sont manipulés. Selon les directives d'accessibilité de Penn State:

L'utilisation de boîtes à alerte n'a pas été encouragée, mais elles sont en fait accessibles dans les lecteurs d'écran modernes.

Lors de la création de votre propre fenêtre modale, assurez-vous de considérer l'accessibilité, mais il existe d'excellentes ressources (comme ce post par IRE Aderinokun) qui peuvent vous orienter dans la direction.

Alternatives courantes

Il existe de nombreuses alternatives aux popups JavaScript natifs, tels que la rédaction de vos propres popups, l'utilisation de bibliothèques de fenêtres modales et l'utilisation de bibliothèques d'alerte. N'oubliez pas qu'aucune des choses que nous avons introduites ne peut complètement empêcher l'exécution JavaScript et l'interaction utilisateur, mais certains peuvent le faire en grisonnant l'arrière-plan et en forçant l'utilisateur à interagir avec la fenêtre modale avant de continuer.

Vous voudrez peut-être voir le HTML natif<dialog></dialog> élément. Chris a récemment mené une étude pratique à ce sujet. C'est attrayant, mais il y a évidemment des problèmes d'accessibilité majeurs. Je ne sais pas s'il serait meilleur ou pire de construire vos propres fenêtres, car la gestion des fenêtres modales est un élément interactif très important. Certaines bibliothèques d'interface utilisateur telles que Bootstrap fournissent des fenêtres modales, mais l'accessibilité est encore en grande partie entre vos mains. Vous voudrez peut-être consulter des projets comme A11y-dialog.

Résumer

L'utilisation de l'API intégrée de la plate-forme Web semble être la bonne chose à faire - au lieu d'envoyer beaucoup de code JavaScript pour copier les fonctionnalités, vous utilisez les fonctionnalités que nous avons déjà intégrées. Cependant, il existe de sérieuses limitations, des problèmes d'expérience utilisateur et des problèmes de performances qui ne sont pas propices à l'utilisation des popups JavaScript natifs. Il est important de savoir ce qu'ils sont et comment les utiliser, mais vous n'en avez peut-être pas beaucoup besoin dans un site Web de production.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!