jquery beforeunload beim Schließen (nicht Verlassen) der Seite?

Wie kann ich anzeigen "Möchten Sie die Seite wirklich verlassen?" Wenn der Benutzer tatsächlich versucht, die Seite zu schließen (klicken Sie auf die X-Schaltfläche im Browserfenster oder auf der Registerkarte), nicht, wenn er versucht, von der Seite weg zu navigieren (klicken Sie auf einen anderen Link).

Mein Kunde möchte, dass eine Meldung angezeigt wird, wenn der Benutzer versucht, die Seite zu schließen. "Möchten Sie die Seite wirklich verlassen? Sie haben noch Artikel in Ihrem Warenkorb."

Wird leider $(window).bind('beforeunload')nicht nur ausgelöst, wenn der Benutzer die Seite schließt.

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

Sie können dies mit JQuery tun .

Zum Beispiel ,

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

Dein JQueryWille ist,

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

Und um die Nachricht "Nachricht hinterlassen " zu erhalten,

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

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

         logout();

});

Diese Lösung funktioniert in allen Browsern und ich habe sie getestet.

Versuchen Sie es mit Javascript in Ihrem Ajax

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

Referenz - Link

Beispiel 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.';
    }
};

Hier wird der Benutzer jedes Mal benachrichtigt, wenn er die Seite verlässt, bis er auf die Schaltfläche klickt.

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

Gutschrift sollte hier gehen: Wie erkennt man, ob ein Link angeklickt wurde, als window.onbeforeunload ausgelöst wurde?

Grundsätzlich fügt die Lösung einen Listener hinzu, um zu erkennen, ob ein Link oder ein Fenster das Entladeereignis ausgelöst hat.

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

Wie hier angegeben, https://stackoverflow.com/a/1632004/330867 , können Sie es implementieren, indem Sie "filtern", was den Ausgang dieser Seite verursacht.

Wie in den Kommentaren erwähnt, ist hier eine neue Version des Codes in der anderen Frage, die auch die Ajax-Anfrage enthält, die Sie in Ihrer Frage stellen:

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

Wichtig : Sie sollten keine globale Variable definieren (hier canExit), dies ist hier für eine einfachere Version.

Beachten Sie, dass Sie die Bestätigungsmeldung nicht vollständig überschreiben können (zumindest in Chrome). Die von Ihnen zurückgegebene Nachricht wird nur der von Chrome angegebenen Nachricht vorangestellt. Hier ist der Grund: Wie kann ich den OnBeforeUnload-Dialog überschreiben und durch meinen eigenen ersetzen?

Versuchen Sie dies, ajaxindem Sie Daten über die return-Anweisung laden und über diese anzeigen.

<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>

Sie können versuchen, ' onbeforeunload' Ereignis.

Schauen Sie sich auch diese an

Das Dialogfeld läuft 1 Sekunde lang und verschwindet?