Maison  >  Article  >  interface Web  >  javascript empêche la fermeture de la page

javascript empêche la fermeture de la page

WBOY
WBOYoriginal
2023-05-09 09:04:363594parcourir

Dans le développement d'applications Web, une situation très courante consiste à demander à l'utilisateur de saisir le contenu d'un formulaire, d'effectuer certaines opérations ou d'effectuer une certaine tâche d'application. L'un des problèmes est que les utilisateurs peuvent accidentellement cliquer sur le bouton de fermeture du navigateur ou de l'onglet, ce qui entraînera la fermeture de la page et amènera l'utilisateur à cliquer accidentellement dessus. Pour éviter que cela ne se produise, du code JavaScript peut être utilisé pour empêcher la fermeture de la fenêtre ou de l'onglet du navigateur. Cet article vous montrera comment utiliser le code JavaScript pour empêcher la fermeture de la page.

1. Événement onbeforeunload
En JavaScript, vous pouvez utiliser l'événement onbeforeunload pour empêcher la fermeture de la fenêtre ou de l'onglet du navigateur. L'événement onbeforeunload est un événement déclenché lorsque le navigateur ferme une fenêtre ou un onglet et se produit avant la fermeture de la fenêtre ou de l'onglet. Vous pouvez empêcher les utilisateurs de mal fonctionner en enregistrant ce gestionnaire d'événements en JavaScript.

Ce qui suit est un exemple de code montrant comment utiliser l'événement onbeforeunload :

window.onbeforeunload = function() {
    return "您确定要离开吗?"; 
}

Dans cet exemple de code, nous enregistrons un gestionnaire d'événement onbeforeunload et renvoyons un message de confirmation "Êtes-vous sûr de vouloir partir ?". Lorsqu'un utilisateur tente de fermer une fenêtre ou un onglet du navigateur, le navigateur affichera ce message de confirmation demandant à l'utilisateur s'il souhaite vraiment fermer la page. Si l'utilisateur sélectionne le bouton Annuler, la fenêtre ou l'onglet du navigateur ne se fermera pas.

2. Annulez l'événement onbeforeunload
Si vous souhaitez annuler l'événement onbeforeunload, vous pouvez utiliser la méthode removeEventListener. Voici l'exemple de code :

window.removeEventListener("beforeunload", unloadEvent);

Dans cet exemple de code, utilisez la méthode removeEventListener pour supprimer le gestionnaire d'événements de l'événement onbeforeunload unloadEvent. De cette façon, vous pouvez débloquer la fermeture de la fenêtre ou de l'onglet de votre navigateur.

3. L'événement onbeforeunload n'est pas pris en charge
Cependant, il convient de noter que tous les navigateurs ne prennent pas en charge l'événement onbeforeunload. Par exemple, l'événement peut ne pas être disponible sur les appareils mobiles. Dans ce cas, vous pouvez essayer certaines solutions de contournement pour empêcher l'utilisateur de fermer la fenêtre ou l'onglet du navigateur.

Une alternative consiste à utiliser les notifications du navigateur. Par exemple, ajoutez une notification ou un titre en haut de l'application Web qui affiche des informations telles que « La sortie entraînera la perte des modifications non enregistrées » pour rappeler aux utilisateurs d'enregistrer les modifications afin d'éviter des erreurs d'opération.

Une autre alternative consiste à utiliser des styles CSS ou d'autres effets visuels pour rendre le bouton de fermeture inaccessible à l'utilisateur. Cependant, cette approche peut amener les utilisateurs à rester sur la page sans pouvoir effectuer d'autres opérations, dégradant ainsi l'expérience utilisateur.

Résumé :
Il existe plusieurs façons ci-dessus d'essayer d'empêcher la fermeture de la fenêtre ou de l'onglet du navigateur via du code JavaScript. Bien que ces méthodes ne puissent pas éliminer complètement le risque de mauvais fonctionnement, elles peuvent réduire considérablement le risque d’arrêt intempestif. Dans le développement réel, vous devez choisir une méthode appropriée pour protéger les opérations des utilisateurs sur la page en fonction des besoins réels et de la prise en charge du navigateur.

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn