Maison >interface Web >js tutoriel >Comment puis-je détecter la fermeture de la fenêtre du navigateur sans intercepter les soumissions de formulaires ?

Comment puis-je détecter la fermeture de la fenêtre du navigateur sans intercepter les soumissions de formulaires ?

Barbara Streisand
Barbara Streisandoriginal
2024-12-13 22:40:14325parcourir

How Can I Detect Browser Window Closure Without Intercepting Form Submissions?

Capture de l'événement de fermeture de la fenêtre du navigateur sans interception de soumission de formulaire

Pour capturer spécifiquement l'événement de fermeture de la fenêtre du navigateur, en évitant les conflits avec la soumission du formulaire, beforeunload de jQuery l'événement peut être exploité avec une légère modification.

L'événement beforeunload, tel qu'il est, déclenche toute action qui provoque la page à abandonner. Pour le limiter aux seuls événements de fermeture de fenêtre, nous utilisons l'approche suivante :

  • Nous définissons un indicateur, inFormOrLink, qui est défini sur true lorsqu'un lien est cliqué ou qu'un
    est soumis. Cela indique que l'utilisateur quitte intentionnellement la page via un formulaire ou un lien.
  • Dans le gestionnaire d'événements beforeunload, nous vérifions la valeur de inFormOrLink.

    • Si c'est vrai , l'événement a été déclenché par l'envoi d'un formulaire ou par un clic sur un lien. Dans ce cas, nous renvoyons un message de confirmation à l'utilisateur.
    • Si c'est faux, l'événement a été déclenché par une action de fermeture de fenêtre, et nous pouvons laisser le navigateur fermer la fenêtre en toute sécurité sans interférence.

Le code mis à jour pour les versions 1.7 et ultérieures de jQuery :

var inFormOrLink;
$('a').on('click', function() { inFormOrLink = true; });
$('form').on('submit', function() { inFormOrLink = true; });

$(window).on("beforeunload", function() { 
    return inFormOrLink ? "Do you really want to close?" : null; 
})

Pour les anciennes versions de jQuery (avant la version 1.7) :

var inFormOrLink;
$('a').live('click', function() { inFormOrLink = true; });
$('form').bind('submit', function() { inFormOrLink = true; });

$(window).bind("beforeunload", function() { 
    return inFormOrLink ? "Do you really want to close?" : null; 
})

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