jquery beforeunload podczas zamykania (nie opuszczania) strony?

Jak wyświetlić komunikat „Czy na pewno chcesz opuścić tę stronę?” gdy użytkownik faktycznie próbuje zamknąć stronę (kliknij przycisk X w oknie lub karcie przeglądarki), a nie gdy próbuje opuścić stronę (kliknij inny link).

Mój klient chce, aby pojawił się komunikat, gdy użytkownik spróbuje zamknąć stronę „Czy na pewno chcesz opuścić tę stronę? W koszyku nadal znajdują się produkty”.

Niestety $(window).bind('beforeunload')nie uruchamia się tylko wtedy, gdy użytkownik zamyka stronę.

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

Możesz to zrobić za pomocą JQuery .

Na przykład ,

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

Twoja JQuerywola,

$(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');
}

Aby otrzymać powiadomienie o opuszczeniu ,

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

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

         logout();

});

To rozwiązanie działa we wszystkich przeglądarkach i przetestowałem je.

Wypróbuj JavaScript w swoim Ajax

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

Link referencyjny

Przykład 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.';
    }
};

Tutaj będzie ostrzegać użytkownika za każdym razem, gdy opuszcza stronę, dopóki nie kliknie przycisku.

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

Kredyt powinien znaleźć się tutaj: jak wykryć, czy link został kliknięty po uruchomieniu window.onbeforeunload?

Zasadniczo rozwiązanie dodaje detektor, który wykrywa, czy łącze lub okno spowodowało uruchomienie zdarzenia unload.

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

Jak wskazano tutaj https://stackoverflow.com/a/1632004/330867 , możesz to zaimplementować poprzez „filtrowanie” tego, co powoduje wyjście z tej strony.

Jak wspomniano w komentarzach, oto nowa wersja kodu w drugim pytaniu, która obejmuje również żądanie AJAX, które złożyłeś w swoim pytaniu:

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

Ważne : Nie powinieneś mieć zdefiniowanej zmiennej globalnej (tutaj canExit), to jest tutaj dla prostszej wersji.

Zauważ, że nie możesz całkowicie zastąpić wiadomości potwierdzającej (przynajmniej w Chrome). Wiadomość, którą zwrócisz, zostanie dołączona tylko do wiadomości podanej przez Chrome. Oto powód: Jak mogę zastąpić okno dialogowe OnBeforeUnload i zastąpić je własnym?

Spróbuj tego, ładując dane za pomocą ajaxi wyświetlając za pomocą instrukcji return.

<script type="text/javascript">
function closeWindow(){

    var Data = $.ajax({
        type : "POST",
        url : "file.txt",  //loading a simple text file for sample.
        cache : false,
        global : false,
        async : false,
        success : function(data) {
            return data;
        }

    }).responseText;


    return "Are you sure you want to leave the page? You still have "+Data+" items in your shopping cart";
}

window.onbeforeunload = closeWindow;
</script>

Możesz spróbować onbeforeunloadwydarzenia „ ”.

Spójrz również na to-

Okno dialogowe działa przez 1 sekundę i znika?