jquery beforeunload khi đóng (không rời) trang?

Làm cách nào để hiển thị "Bạn có chắc chắn muốn rời khỏi trang không?" khi người dùng thực sự cố gắng đóng trang (nhấp vào nút X trên cửa sổ hoặc tab trình duyệt) chứ không phải khi anh ta cố gắng điều hướng khỏi trang (nhấp vào liên kết khác).

Khách hàng của tôi muốn một thông báo xuất hiện khi người dùng cố gắng đóng trang "Bạn có chắc chắn muốn rời khỏi trang không? Bạn vẫn còn hàng trong giỏ hàng".

Thật không may $(window).bind('beforeunload'), không chỉ kích hoạt khi người dùng đóng trang.

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

Bạn có thể làm điều này bằng cách sử dụng JQuery .

Ví dụ ,

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

Ý chí của bạn JQuerylà,

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

Và để nhận được thông báo Để lại tin nhắn sẽ là,

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

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

         logout();

});

Giải pháp này hoạt động trên tất cả các trình duyệt và tôi đã thử nghiệm nó.

Thử javascript vào Ajax của bạn

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

Liên kết tham khảo

Ví dụ 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.';
    }
};

Tại đây, nó sẽ cảnh báo người dùng mỗi khi anh ta rời khỏi trang, cho đến khi anh ta nhấp vào nút.

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

Ghi có ở đây: làm thế nào để phát hiện xem một liên kết đã được nhấp vào khi window.onbeforeunload được kích hoạt?

Về cơ bản, giải pháp thêm một trình lắng nghe để phát hiện xem liệu một liên kết hoặc cửa sổ có gây ra sự kiện tải lên hay không.

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

Như được chỉ ra ở đây https://stackoverflow.com/a/1632004/330867 , bạn có thể triển khai nó bằng cách "lọc" những gì bắt nguồn từ lối thoát của trang này.

Như đã đề cập trong phần nhận xét, đây là phiên bản mới của mã trong câu hỏi khác, cũng bao gồm yêu cầu ajax mà bạn đưa ra trong câu hỏi của mình:

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

Quan trọng : Bạn không nên xác định biến toàn cục (tại đây canExit), đây là phiên bản đơn giản hơn.

Lưu ý rằng bạn không thể ghi đè hoàn toàn thông báo xác nhận (ít nhất là trong chrome). Tin nhắn bạn trả lại sẽ chỉ được thêm vào trước tin nhắn do Chrome đưa ra. Đây là lý do: Làm cách nào để ghi đè hộp thoại OnBeforeUnload và thay thế nó bằng hộp thoại của tôi?

Hãy thử điều này, tải dữ liệu qua ajaxvà hiển thị thông qua câu lệnh trả về.

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

Bạn có thể thử ' onbeforeunload' sự kiện.

Cũng hãy xem điều này-

Hộp thoại chạy trong 1 giây và biến mất?