web-dev-qa-db-fra.com

Comment savoir si l'utilisateur a cliqué sur Annuler dans une boîte de dialogue Javascript onbeforeunload?

J'ouvre une boîte de dialogue lorsque quelqu'un essaie de s'éloigner d'une page particulière sans avoir enregistré son travail. J'utilise l'événement onbeforeunload de Javascript, fonctionne très bien.

Maintenant, je veux exécuter du code Javascript lorsque l'utilisateur clique sur "Annuler" dans la boîte de dialogue qui s'affiche (en disant qu'il ne veut pas quitter la page).

Est-ce possible? J'utilise également jQuery, alors y a-t-il peut-être un événement comme beforeunloadcancel auquel je peux me lier?

[~ # ~] mise à jour [~ # ~] : L'idée est de réellement enregistrer et diriger les utilisateurs vers une autre page Web s'ils ont choisi d'annuler

javascriptjquerydom-eventsonbeforeunload
32
at.

Vous pouvez le faire comme ceci:

$(function() {
    $(window).bind('beforeunload', function() {
        setTimeout(function() {
            setTimeout(function() {
                $(document.body).css('background-color', 'red');
            }, 1000);
        },1);
        return 'are you sure';
    });
});

Le code de la première méthode setTimeout a un délai de 1 ms. C'est juste pour ajouter la fonction dans le UI queue. Puisque setTimeout s'exécute de manière asynchrone, l'interpréteur Javascript continuera en appelant directement l'instruction return, qui à son tour déclenche les navigateurs modal dialog. Cela bloquera le UI queue et le code du premier setTimeout n'est pas exécuté tant que le modal n'est pas fermé. Si l'utilisateur appuie sur annuler, cela déclenchera un autre setTimeout qui se déclenche en environ une seconde. Si l'utilisateur confirme avec ok, l'utilisateur redirigera et le deuxième setTimeout n'est jamais déclenché.

exemple: http://www.jsfiddle.net/NdyGJ/2/

48
jAndy

Je sais que cette question est ancienne maintenant, mais au cas où quelqu'un aurait encore des problèmes avec cela, j'ai trouvé une solution qui semble fonctionner pour moi,

Fondamentalement, l'événement unload est déclenché après l'événement beforeunload. Nous pouvons l'utiliser pour annuler un délai d'expiration créé dans l'événement beforeunload, modifiant la réponse de jAndy:

$(function() {
    var beforeUnloadTimeout = 0 ;
    $(window).bind('beforeunload', function()  {
        console.log('beforeunload');
        beforeUnloadTimeout = setTimeout(function() {
            console.log('settimeout function');
            $(document.body).css('background-color', 'red');
        },500);
        return 'are you sure';
    });
    $(window).bind('unload', function() {
        console.log('unload');
        if(typeof beforeUnloadTimeout !=='undefined' && beforeUnloadTimeout != 0)
            clearTimeout(beforeUnloadTimeout);
    });
});

EDIT: jsfiddle ici

5
99 Problems - Syntax ain't one

Pas possible. Peut-être que quelqu'un va me prouver le contraire ... Quel code voulez-vous exécuter? Voulez-vous enregistrer automatiquement lorsqu'ils cliquent sur Annuler? Cela semble contre-intuitif. Si vous n'avez pas déjà enregistré automatiquement, je pense que cela n'a pas de sens de sauvegarder automatiquement quand ils ont frappé "Annuler". Vous pouvez peut-être mettre en surbrillance le bouton Enregistrer dans votre gestionnaire onbeforeunload afin que l'utilisateur voit ce qu'il doit faire avant de s'éloigner.

2
Juan Mendes

Je ne pensais pas que c'était possible, mais j'ai juste essayé cette idée et cela fonctionne (bien qu'il s'agisse d'un hack et ne fonctionne pas de la même manière dans tous les navigateurs):

window.onbeforeunload = function () {   
  $('body').mousemove(checkunload);
  return "Sure thing"; 
};

function checkunload() {   
  $('body').unbind("mousemove");
  //ADD CODE TO RUN IF CANCEL WAS CLICKED
}
2
Barlow Tucker