关闭(不离开)页面时jquery beforeunload？

Question

如何显示"您确定要离开页面吗？" 当用户实际尝试关闭页面时(单击浏览器窗口或选项卡上的X按钮),当他试图离开页面时(单击另一个链接).

当用户尝试关闭页面时,我的客户希望显示一条消息"您确定要离开页面吗？您的购物车中仍有商品."

不幸的是$(window).bind('beforeunload'),只有当用户关闭页面时才会触发.

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

您可以使用JQuery来完成此操作.

对于例如,

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

你的JQuery意志,

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

并获得离开消息警报,

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

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

         logout();

});

此解决方案适用于所有浏览器,我已对其进行了测试.

Answer 2

尝试使用javascript进入Ajax

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

参考链接

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

在这里,它会在每次离开页面时提醒用户,直到他点击按钮.

演示:http://jsfiddle.net/DerekL/GSWbB/show/

Answer 3

信用应该在这里: 如何在触发window.onbeforeunload时检测链接是否被点击？

基本上,该解决方案添加了一个侦听器来检测链接或窗口是否导致卸载事件被触发.

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