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

Je veux capturer l'événement de fermeture de fenêtre / 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 également sur la soumission de formulaires, 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.

L' beforeunloadévénement se déclenche chaque fois que l'utilisateur quitte votre page pour une raison quelconque.

Par exemple, il sera déclenché si l'utilisateur soumet un formulaire, clique sur un lien, ferme la fenêtre (ou l'onglet) ou accède à une nouvelle page à l'aide de la barre d'adresse, de la zone de recherche ou d'un signet.

Vous pouvez exclure les soumissions de formulaire et les liens hypertexte (à l'exception 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; 
})

La liveméthode ne fonctionne pas avec l' submitévénement, donc si vous ajoutez un nouveau formulaire, vous devrez également lier le gestionnaire à celui-ci.

Notez que si un autre gestionnaire d'événements annule la soumission ou la navigation, vous perdrez l'invite de confirmation si la fenêtre est effectivement fermée plus tard. Vous pouvez résoudre ce problème en enregistrant le temps dans les submitet clickévénements, et vérifier si le beforeunloadproduit plus que quelques secondes plus tard.

Peut-être simplement dissocier le beforeunloadgestionnaire d'événements dans le gestionnaire d'événements du formulaire submit:

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

Pour une solution multi-navigateurs (testée dans Chrome 21, IE9, FF15), pensez à 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 "Voulez-vous vraiment fermer?" n'est pas affiché. FF affiche juste un message générique. Voir la note dans https://developer.mozilla.org/en-US/docs/DOM/window.onbeforeunload

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

Pour une solution qui fonctionne bien avec des contrôles tiers comme Telerik (ex: RadComboBox) et DevExpress qui utilisent les balises Anchor pour diverses raisons, envisagez d'utiliser le code suivant, qui est une version légèrement modifiée du code de desm avec un meilleur sélecteur pour soi ciblage des balises d'ancrage:

var inFormOrLink;
$('a[href]:not([target]), a[href][target=_self]').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;
});

Ma réponse vise à fournir des repères simples.

COMMENT

Voir la réponse @SLaks .

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

Combien de temps faut-il au navigateur pour finalement fermer votre page?

Chaque fois qu'un utilisateur ferme la page ( xbouton ou CTRL+ W), le navigateur exécute le beforeunloadcode donné , mais pas indéfiniment. La seule exception est la boîte de confirmation ( return 'Do you really want to close?) qui attendra la réponse de l'utilisateur.

Chrome : 2 secondes.
Firefox : ∞ (ou double-cliquez, ou forcez la fermeture)
Edge : ∞ (ou double-cliquez)
Explorer 11 : 0 secondes.
Safari : TODO

Ce que nous avons utilisé pour tester ceci:

• Un serveur Node.js Express avec journal des requêtes
• Le court fichier HTML suivant

Ce qu'il fait, c'est envoyer autant de demandes que possible avant que le navigateur ne ferme sa page (de manière synchrone).

<html>
<body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script>
    function request() {
        return $.ajax({
            type: "GET",
            url: "http://localhost:3030/" + Date.now(),
            async: true
        }).responseText;
    }
    window.onbeforeunload = () => {
        while (true) {
            request();
        }
        return null;
    }
    </script>
</body>
</html>

Sortie Chrome:

GET /1480451321041 404 0.389 ms - 32  
GET /1480451321052 404 0.219 ms - 32  
...  
GET /hello/1480451322998 404 0.328 ms - 32

1957ms ≈ 2 seconds // we assume it's 2 seconds since requests can take few milliseconds to be sent.

J'ai utilisé la réponse de Slaks mais cela ne fonctionnait pas tel quel, car le returnValue onbeforeunload est analysé sous forme de chaîne puis affiché dans la boîte de confirmation du navigateur. Ainsi, la valeur true était affichée, comme "true".

Le simple fait d'utiliser le retour 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;
})

Vous pourriez peut-être gérer OnSubmit et définir un indicateur que vous archiverez plus tard dans votre gestionnaire OnBeforeUnload.

jQuery(window).bind(
                    "beforeunload",
                      function (e) {
                          var activeElementTagName = e.target.activeElement.tagName;
                          if (activeElementTagName != "A" && activeElementTagName != "INPUT") {
                              return "Do you really want to close?";
                          }
                      })

Malheureusement, qu'il s'agisse d'un rechargement, d'une nouvelle redirection de page ou de la fermeture du navigateur, l'événement sera déclenché. Une alternative est d'attraper l'id déclenchant l'événement et s'il s'agit d'un formulaire, ne déclenchez aucune fonction et si ce n'est pas l'id du formulaire, faites ce que vous voulez faire lorsque la page se ferme. Je ne sais pas si cela est également possible directement et fastidieux.

Vous pouvez faire quelques petites choses avant que le client ne ferme l'onglet. javascript détecte le navigateur fermer l'onglet / fermer le navigateur mais si votre liste d'actions est grande et que l'onglet se ferme avant qu'il ne soit terminé, vous êtes impuissant. Vous pouvez l'essayer, mais avec mon expérience, n'en dépendez pas.

window.addEventListener("beforeunload", function (e) {
  var confirmationMessage = "\o/";
  /* Do you small action code here */
  (e || window.event).returnValue = confirmationMessage; //Gecko + IE
  return confirmationMessage;                            //Webkit, Safari, Chrome
});

https://developer.mozilla.org/en-US/docs/Web/Reference/Events/beforeunload?redirectlocale=en-US&redirectslug=DOM/Mozilla_event_reference/beforeunload

Si votre soumission de formulaire les amène à une autre page (comme je suppose que c'est le cas, d'où le déclenchement de beforeunload), vous pouvez essayer de changer la soumission de votre formulaire en un appel ajax. De cette façon, ils ne quitteront pas votre page lorsqu'ils soumettront le formulaire et vous pourrez utiliser votre beforeunloadcode de liaison comme vous le souhaitez.

Mon problème: l'événement «onbeforeunload» ne serait déclenché que s'il y avait un nombre impair de soumissions (clics). J'avais une combinaison de solutions issues de threads similaires dans SO pour que ma solution fonctionne. bien mon code parlera.

<!--The definition of event and initializing the trigger flag--->


$(document).ready(function() {
updatefgallowPrompt(true);
window.onbeforeunload = WarnUser;   
}

function WarnUser() {
var allowPrompt = getfgallowPrompt();
    if(allowPrompt) {
    saveIndexedDataAlert();
    return null;
    } else {
        updatefgallowPrompt(true);
        event.stopPropagation
    }
}

<!--The method responsible for deciding weather the unload event is triggered from submit or not--->
function saveIndexedDataAlert() {
    var allowPrompt = getfgallowPrompt();
    var lenIndexedDocs = parseInt($('#sortable3 > li').size()) + parseInt($('#sortable3 > ul').size());

    if(allowPrompt && $.trim(lenIndexedDocs) > 0) {
        event.returnValue = "Your message";
    } else {
        event.returnValue = "   ";
        updatefgallowPrompt(true);
    }
}

<!---Function responsible to reset the trigger flag---->
$(document).click(function(event) {  
$('a').live('click', function() { updatefgallowPrompt(false); });
 });

<!--getter and setter for the flag---->
function updatefgallowPrompt (allowPrompt){ //exit msg dfds
    $('body').data('allowPrompt', allowPrompt); 
}   

function getfgallowPrompt(){        
    return $('body').data('allowPrompt');   
}

Depuis jQuery 1.7, la méthode .live () est obsolète. Utilisez .on () pour attacher des gestionnaires d'événements. Les utilisateurs d'anciennes versions de jQuery devraient utiliser .delegate () de préférence à .live ()

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

sur complet ou lien

$(window).unbind();

Essayez ceci aussi

window.onbeforeunload = function ()
{       
    if (pasteEditorChange) {
        var btn = confirm('Do You Want to Save the Changess?');
           if(btn === true ){
               SavetoEdit();//your function call
           }
           else{
                windowClose();//your function call
           }
    }  else { 
        windowClose();//your function call
    }
};

Vérifiez simplement ...

function wopen_close(){
  var w = window.open($url, '_blank', 'width=600, height=400, scrollbars=no, status=no, resizable=no, screenx=0, screeny=0');
  w.onunload = function(){
    if (window.closed) {
       alert("window closed");
    }else{ 
       alert("just refreshed");
    }
  }
}

var validNavigation = false;
            jQuery(document).ready(function () {

                wireUpEvents();
            });

            function endSession() {
                // Browser or broswer tab is closed
                // Do sth here ...
                alert("bye");
            }

            function wireUpEvents() {
                /*
                * For a list of events that triggers onbeforeunload on IE
                * check http://msdn.microsoft.com/en-us/library/ms536907(VS.85).aspx
                */
                window.onbeforeunload = function () {
                    debugger
                    if (!validNavigation) {
                        endSession();
                    }
                }

                // Attach the event keypress to exclude the F5 refresh
                $(document).bind('keypress', function (e) {
                    debugger
                    if (e.keyCode == 116) {
                        validNavigation = true;
                    }
                });

                // Attach the event click for all links in the page
                $("a").bind("click", function () {
                    debugger
                    validNavigation = true;
                });

                // Attach the event submit for all forms in the page
                $("form").bind("submit", function () {
                    debugger
                    validNavigation = true;
                });

                // Attach the event click for all inputs in the page
                $("input[type=submit]").bind("click", function () {
                    debugger
                    validNavigation = true;
                });

            }`enter code here`

La suite a fonctionné pour moi;

 $(window).unload(function(event) {
    if(event.clientY < 0) {
        //do whatever you want when closing the window..
    }
 });