Parlons des événements de fermeture de page Web JavaScript

Événement de clôture de page Web JavaScript

Avec la popularité de l'Internet mondial, les applications de pages Web deviennent de plus en plus populaires Afin d'améliorer l'expérience utilisateur, nous devons maîtriser certaines technologies d'interaction de pages Web. Parmi eux, l'événement de fermeture de la page Web est un événement très important, qui peut nous aider à effectuer certaines opérations spécifiques avant la fermeture de la page Web, telles que la soumission de données, la sauvegarde des informations utilisateur, etc.

Cet article présentera l'événement de fermeture de page Web en JavaScript et fournira quelques exemples et techniques pratiques pour aider les lecteurs à mieux apprendre et comprendre cet événement.

1. La signification de l'événement de fermeture de page Web

L'événement de fermeture de page Web signifie que lorsque l'utilisateur ferme la page Web actuelle, le navigateur déclenchera l'événement, afin que des opérations spécifiques puissent être effectuées via JavaScript. Ces opérations peuvent inclure la soumission de données, la suppression du cache, la suppression des cookies, etc.

Dans les applications Web traditionnelles, l'événement de fermeture de page Web n'est pas un événement important, car la page Web est uniquement utilisée pour afficher des informations et n'a pas besoin de répondre aux opérations de l'utilisateur. Mais dans les applications Web modernes, nous devons interagir avec les utilisateurs via des pages Web et enregistrer les données des utilisateurs en temps opportun. À l'heure actuelle, les événements de fermeture de pages Web sont très importants.

2. Comment utiliser l'événement de fermeture de page Web

En JavaScript, vous pouvez utiliser l'événement beforeunload de l'objet window pour répondre à l'événement de fermeture de page Web. Cet événement est déclenché juste avant que le navigateur ne décharge le document. Dans l'événement beforeunload, vous pouvez effectuer certaines opérations de nettoyage, enregistrer des données, etc.

Ce qui suit est l'utilisation de base de l'événement beforeunload :

window.addEventListener('beforeunload', function(event) {
   event.preventDefault(); // 阻止默认行为
   event.returnValue = ''; // 设置returnValue，可以提示用户是否离开
});

Dans le code ci-dessus, nous ajoutons l'événement beforeunload à l'objet window via la méthode addEventListener(). Dans le gestionnaire d'événements, nous pouvons effectuer certaines opérations de nettoyage et empêcher le comportement de désinstallation par défaut du navigateur.

Parfois, nous avons besoin d'obtenir les données saisies par l'utilisateur lors de l'événement de clôture, telles que les informations saisies dans le formulaire. À ce stade, nous pouvons utiliser l'événement onbeforeunload :

window.onbeforeunload = function(event) {
   var message = '您输入的内容尚未保存，确定要退出吗？';
   event.returnValue = message; // 设置提示消息
   return message; // 返回提示消息，可以在一些浏览器中生效
};

Dans le code ci-dessus, nous définissons le message d'invite en définissant l'attribut event.returnValue, et renvoyons le même message d'invite pour garantir qu'il peut prendre effet dans certains navigateurs.

3. Cas pratiques

Voici quelques cas pratiques qui montrent comment utiliser les événements de fermeture de page Web pour améliorer l'expérience utilisateur :

1) Sauvegarde des données du formulaire

Lorsque l'utilisateur saisit des informations dans le formulaire, si c'est le cas n'est pas enregistré, alors ces informations seront perdues. Nous pouvons enregistrer automatiquement les données du formulaire lorsque la page Web est fermée. Par exemple :

window.addEventListener('beforeunload', function() {
   var inputBox = document.getElementById('input-box');
   localStorage.setItem('user-input', inputBox.value);
});

Dans le code ci-dessus, nous utilisons localStorage pour enregistrer les données du formulaire. Dans l'événement beforeunload, nous obtenons la valeur de la zone de saisie et la sauvegardons sur le stockage local.

2) Soumettre les données du formulaire

Dans certains scénarios spécifiques, il peut être nécessaire d'envoyer des données au serveur lorsque la page Web est fermée. Par exemple, une fois que l'utilisateur a rempli les informations du formulaire, s'il ferme la page Web, les données seront perdues, nous pouvons donc soumettre les données avant la fermeture de la page Web. Par exemple :

window.addEventListener('beforeunload', function() {
   var formObj = document.getElementById('my-form');
   formObj.submit();
});

Dans le code ci-dessus, nous appelons la méthode submit() de l'objet formulaire pour soumettre les données du formulaire. Le navigateur enverra automatiquement ces données au serveur avant la fermeture de la page Web.

3) Effacer les données du cache

Si la page Web contient beaucoup d'images et de vidéos, le cache du navigateur peut occuper beaucoup d'espace disque. Afin de réduire l'utilisation de l'espace disque, nous pouvons effacer les données du cache lors de la fermeture de la page Web. Par exemple :

window.addEventListener('beforeunload', function() {
   window.localStorage.clear();
   window.sessionStorage.clear();
   window.indexedDB.deleteDatabase('my-database');
});

Dans le code ci-dessus, nous utilisons localStorage et sessionStorage pour enregistrer les données du cache des pages Web. Dans l'événement beforeunload, nous utilisons la méthode clear() pour effacer ces données. De plus, nous utilisons la méthode indexedDB.deleteDatabase() pour supprimer la base de données d'index.

4) Détecter si l'utilisateur quitte

Si l'utilisateur ferme malheureusement le navigateur alors qu'il navigue sur le Web, cela peut entraîner la perte de certaines données. Pour éviter cela, nous pouvons détecter si l'utilisateur souhaite réellement quitter lorsque la page est fermée. Par exemple :

window.addEventListener('beforeunload', function(event) {
   var message = '您输入的内容尚未保存，确定要退出吗？';
   event.returnValue = message;
   return message;
});

window.addEventListener('unload', function() {
   alert('您已经成功退出本网站！');
});

Dans le code ci-dessus, nous définissons le message d'invite dans l'événement beforeunload et invitons l'utilisateur à avoir quitté avec succès lors de l'événement unload. Dans le même temps, nous renvoyons le même message d'invite pour garantir qu'il peut prendre effet dans certains navigateurs.

4. Résumé

L'événement de fermeture de la page Web est un événement très important qui peut nous aider à effectuer certaines opérations spécifiques avant la fermeture de la page Web. En JavaScript, nous pouvons utiliser l'événement beforeunload et l'événement onbeforeunload de l'objet window pour répondre à l'événement de fermeture de la page Web. En maîtrisant l'utilisation des événements de fermeture de pages Web, nous pouvons offrir aux utilisateurs une expérience d'interaction plus fluide avec les pages Web.

En plus des cas d'utilisation présentés dans cet article, il existe de nombreux autres scénarios d'application dans lesquels les événements de fermeture de page Web peuvent être utilisés, et les lecteurs peuvent les appliquer de manière flexible en fonction de leurs propres besoins.

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!