Comment capturer l'événement de fermeture de la fenêtre du navigateur ?

Question

Je veux capturer l'événement de fermeture de la fenêtre/de l'onglet du navigateur. J'ai essayé ce qui suit avec jQuery :

jQuery(window).bind(
    "beforeunload", 
    function() { 
        return confirm("Do you really want to close?") 
    }
)

Mais cela fonctionne aussi sur la soumission du formulaire, ce qui n'est pas ce que je veux. Je veux un événement qui se déclenche uniquement lorsque l'utilisateur ferme la fenêtre.

Answer 1

El beforeunload se déclenche lorsque l'utilisateur quitte votre page pour une raison quelconque.

Par exemple, elle sera déclenchée si l'utilisateur soumet un formulaire, clique sur un lien, ferme la fenêtre (ou l'onglet) ou se rend sur une nouvelle page en utilisant la barre d'adresse, le champ de recherche ou un signet.

Vous pourriez exclure les soumissions de formulaires et les hyperliens (sauf ceux provenant d'autres cadres) avec le code suivant :

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 versions de jQuery antérieures à 1.7, essayez ceci :

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; 
})

El live ne fonctionne pas avec la méthode submit Ainsi, si vous ajoutez un nouveau formulaire, vous devrez également lier le gestionnaire à celui-ci.

Notez que si un autre gestionnaire d'événements annule l'envoi ou la navigation, vous perdrez l'invite de confirmation si la fenêtre est effectivement fermée ultérieurement. Vous pouvez remédier à cela en enregistrant l'heure dans le champ submit y click et de vérifier si le beforeunload se produit plus de deux secondes plus tard.

Answer 2

Peut-être qu'il suffit de délier le beforeunload dans le gestionnaire d'événement du formulaire submit gestionnaire d'événements :

jQuery('form').submit(function() {
    jQuery(window).unbind("beforeunload");
    ...
});

Answer 3

Pour une solution multi-navigateurs (testée dans Chrome 21, IE9, FF15), vous pouvez utiliser le code suivant, qui est une version légèrement modifiée du code de Slaks :

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

$(window).bind('beforeunload', function(eventObject) {
    var returnValue = undefined;
    if (! inFormOrLink) {
        returnValue = "Do you really want to close?";
    }
    eventObject.returnValue = returnValue;
    return returnValue;
}); 

Notez que depuis Firefox 4, le message "Do you really want to close ?" n'est pas affiché. FF affiche simplement un message générique. Voir la note dans https://developer.mozilla.org/en-US/docs/DOM/window.onbeforeunload

Answer 4

window.onbeforeunload = function () {
    return "Do you really want to close?";
};

Answer 5

J'ai utilisé la réponse de Slaks mais cela ne fonctionnait pas tel quel, puisque la returnValue onbeforeunload est analysée comme une chaîne de caractères et ensuite affichée dans la boîte de confirmation du navigateur. Ainsi, la valeur true était affichée, comme "true".

L'utilisation de return a fonctionné. Voici mon code

var preventUnloadPrompt;
var messageBeforeUnload = "my message here - Are you sure you want to leave this page?";
//var redirectAfterPrompt = "http://www.google.co.in";
$('a').live('click', function() { preventUnloadPrompt = true; });
$('form').live('submit', function() { preventUnloadPrompt = true; });
$(window).bind("beforeunload", function(e) { 
    var rval;
    if(preventUnloadPrompt) {
        return;
    } else {
        //location.replace(redirectAfterPrompt);
        return messageBeforeUnload;
    }
    return rval;
})