Comment écouter les événements du bouton de fermeture en JavaScript

JavaScript est l'un des outils puissants de programmation côté client, qui peut être utilisé pour ajouter diverses fonctions et interactivités afin d'améliorer l'expérience utilisateur du site Web. Le bouton de fermeture est un élément important dans les applications Web. Dans cet article, nous verrons comment écouter l'événement du bouton de fermeture en JavaScript et l'utiliser pour ajouter des fonctionnalités à votre application.

Le bouton de fermeture est un bouton situé dans le coin supérieur droit de la fenêtre du navigateur. Lorsque l'utilisateur clique sur ce bouton, la fenêtre ou l'onglet actuellement ouvert sera fermé et le processus en cours se terminera. Les boutons de fermeture sont couramment utilisés dans les applications Web et les extensions de navigateur.

Utilisez JavaScript pour écouter les événements du bouton de fermeture

Voyons d'abord comment utiliser JavaScript pour écouter les événements du bouton de fermeture. En JavaScript, nous utilisons l'écouteur d'événement window.onbeforeunload pour détecter l'événement de clic du bouton de fermeture. L'événement onbeforeunload est déclenché juste avant la fermeture de la fenêtre, de l'onglet ou du navigateur. Nous pouvons ajouter la fonctionnalité que nous souhaitons exécuter dans la fonction de rappel de l'événement.

Les utilisations courantes suivantes sont les suivantes :

window.onbeforeunload = function() {
  // 您想要运行的功能
};

Dans le code ci-dessus, nous définissons une fonction anonyme comme fonction de rappel de l'événement window.onbeforeunload. Dans la fonction, nous pouvons ajouter n'importe quelle opération, comme ouvrir une nouvelle fenêtre, rappeler à l'utilisateur de sauvegarder les données, etc.

Effectuer des opérations dans les fonctions de rappel

Maintenant, regardons un exemple concret. Disons que nous construisons une application d'achat en ligne et que nous devons nous assurer que le client a enregistré son panier avant de quitter la page ou de cliquer sur le bouton de fermeture. Pour y parvenir, nous pouvons utiliser le code suivant :

window.onbeforeunload = function() {
  const cart = JSON.parse(localStorage.getItem("shoppingCart"));
  if (cart.length > 0) {
    alert("请确保您已保存购物车！");
  }
};

Dans ce code, nous utilisons d'abord localStorage pour récupérer le contenu du panier. Dans la fonction de rappel, nous utilisons une instruction if pour vérifier s'il y a un article dans le panier. S'il y a des articles dans le panier, nous affichons une fenêtre de rappel à l'utilisateur pour l'inviter à s'assurer qu'il a bien enregistré son panier.

Remarque : Lorsque vous attachez une fonction à l'événement onbeforeunload, le navigateur informe l'utilisateur qu'il essaie de fermer la fenêtre et lui demande s'il est sûr de partir. L'utilisateur a la possibilité de rester sur la page ou de continuer à fermer la fenêtre. Si vous ne l'ajoutez pas dans la fonction de rappel de l'événement onbeforeunload, l'événement ne se déclenchera pas.

Cet événement s'applique également à la fermeture des onglets du navigateur. Utilisez simplement l'événement onbeforeunload dans la page. Cet événement ne sera déclenché que lorsque l'utilisateur quittera la page.

Résumé

Dans cet article, nous avons expliqué comment écouter les événements du bouton de fermeture en JavaScript et ajouter des fonctionnalités dans votre application Web. Nous utilisons l'écouteur d'événement window.onbeforeunload pour surveiller l'événement et effectuer les actions requises dans la fonction de rappel. De plus, lorsque vous attachez une fonction à l'événement onbeforeunload, le navigateur informe l'utilisateur qu'une tentative est en cours pour fermer la fenêtre et lui demande s'il est sûr de partir.

N'oubliez pas que lorsque vous utilisez l'événement onbeforeunload, assurez-vous que votre code n'interfère pas ou n'interrompt pas l'expérience de navigation de l'utilisateur. Réfléchissez attentivement à ce que ressentiront vos utilisateurs avant d’essayer d’ajouter des fonctionnalités.

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!