jquery beforeunload lors de la fermeture (et non de la sortie) de la page ?

Question

Comment puis-je afficher "Are you sure you want to leave the page ?" lorsque l'utilisateur tente effectivement de fermer la page (en cliquant sur le bouton X de la fenêtre ou de l'onglet du navigateur) et non lorsqu'il tente de s'éloigner de la page (en cliquant sur un autre lien).

Mon client souhaite qu'un message apparaisse lorsque l'utilisateur tente de fermer la page : "Êtes-vous sûr de vouloir quitter la page ? Vous avez encore des articles dans votre panier".

Malheureusement $(window).bind('beforeunload') ne se déclenche pas uniquement lorsque l'utilisateur ferme la page.

jQuery :

function checkCart() { 
  $.ajax({
    url : 'index.php?route=module/cart/check',
    type : 'POST',
    dataType : 'json',
    success : function (result) {
       if (result) {
        $(window).bind('beforeunload', function(){
          return 'leave?';
        });
       }
    }
  })
}

Answer 1

Vous pouvez le faire en utilisant JQuery .

Pour exemple ,

<a href="your URL" id="navigate"> click here </a>

Votre JQuery le sera,

$(document).ready(function(){

    $('a').on('mousedown', stopNavigate);

    $('a').on('mouseleave', function () {
           $(window).on('beforeunload', function(){
                  return 'Are you sure you want to leave?';
           });
    });
});

function stopNavigate(){    
    $(window).off('beforeunload');
}

Et pour obtenir le Laisser un message d'alerte le sera,

$(window).on('beforeunload', function(){
      return 'Are you sure you want to leave?';
});

$(window).on('unload', function(){

         logout();

});

Cette solution fonctionne dans tous les navigateurs et je l'ai testée.

Answer 2

Essayez le javascript dans votre Ajax

window.onbeforeunload = function(){
  return 'Are you sure you want to leave?';
};

Référence lien

Exemple 2 :

document.getElementsByClassName('eStore_buy_now_button')[0].onclick = function(){
    window.btn_clicked = true;
};
window.onbeforeunload = function(){
    if(!window.btn_clicked){
        return 'You must click "Buy Now" to make payment and finish your order. If you leave now your order will be canceled.';
    }
};

Ici, l'utilisateur sera alerté chaque fois qu'il quittera la page, jusqu'à ce qu'il clique sur le bouton.

DEMO : http://jsfiddle.net/DerekL/GSWbB/show/

Answer 3

Le crédit doit aller ici : comment détecter si un lien a été cliqué lorsque window.onbeforeunload est déclenché ?

En gros, la solution consiste à ajouter un écouteur pour détecter si un lien ou une fenêtre a provoqué le déclenchement de l'événement de déchargement.

var link_was_clicked = false;
document.addEventListener("click", function(e) {
   if (e.target.nodeName.toLowerCase() === 'a') {
      link_was_clicked = true;
   }
}, true);

window.onbeforeunload = function(e) {
    if(link_was_clicked) {
        return;
    }
    return confirm('Are you sure?');
}

Answer 4

Comme indiqué ici https://stackoverflow.com/a/1632004/330867 vous pouvez le mettre en œuvre en "filtrant" ce qui est à l'origine de la sortie de cette page.

Comme mentionné dans les commentaires, voici une nouvelle version du code dans l'autre question, qui comprend également la demande ajax que vous faites dans votre question :

var canExit = true;

// For every function that will call an ajax query, you need to set the var "canExit" to false, then set it to false once the ajax is finished.

function checkCart() {
  canExit = false;
  $.ajax({
    url : 'index.php?route=module/cart/check',
    type : 'POST',
    dataType : 'json',
    success : function (result) {
       if (result) {
        canExit = true;
       }
    }
  })
}

$(document).on('click', 'a', function() {canExit = true;}); // can exit if it's a link
$(window).on('beforeunload', function() {
    if (canExit) return null; // null will allow exit without a question
    // Else, just return the message you want to display
    return "Do you really want to close?";
});

Important : Vous ne devriez pas avoir une variable globale définie (ici canExit ), il s'agit ici d'une version plus simple.

Notez que vous ne pouvez pas remplacer complètement le message de confirmation (du moins dans chrome). Le message que vous renvoyez sera seulement ajouté à celui donné par Chrome. Voici la raison : Comment puis-je remplacer la boîte de dialogue OnBeforeUnload par la mienne ?

Answer 5

Solution jQuery :

Avec 'beforeunload' événement joint, lorsque vous fermez la page, appuyez sur le bouton retour ou rechargez la page, une boîte de confirmation vous demandera si vous voulez vraiment partir, choisissez ok pour quitter la page : annuler pour empêcher la sortie de la page et rester sur la même page.

En outre, vous pouvez ajouter votre propre message dans la boîte de confirmation :

$(window).bind('beforeunload', function(){
    return '>>>>>Before You Go<<<<<<<< \n Your custom message go here';
});

P.S : Le site 'beforeunload' est pris en charge depuis jQuery 1.4.

Javascript :

Pour IE et FF < 4, définissez window.event.returnValue à la chaîne de caractères que vous souhaitez afficher, puis la renvoyer à Safari (utilisez l'option null à la place pour permettre un comportement normal) :

window.onbeforeunload = function (e) {
    var e = e || window.event;

    // For IE and Firefox prior to version 4
    if (e) {
        e.returnValue = 'Any string';
    }

    // For Safari
    return 'Any string';
};