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

参考link

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

此处每次离开页面时都会提醒用户，直到他点击按钮为止。

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

Answer 3

信用应该到这里： how to detect if a link was clicked when window.onbeforeunload is triggered?

基本上，该解决方案添加了一个侦听器来检测链接或窗口是否导致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?');
}

Answer 4

如此处https://stackoverflow.com/a/1632004/330867所示，您可以通过“过滤”源自此页面退出的内容来实现它。

正如评论中提到的，这是另一个问题中代码的新版本，其中还包括您在问题中提出的ajax请求：

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

重要：您不应该定义全局变量（此处为canExit），这是更简单的版本。

请注意，您无法完全覆盖确认消息（至少在chrome中）。您返回的邮件将仅添加到Chrome提供的邮件中。原因如下：How can I override the OnBeforeUnload dialog and replace it with my own?

Answer 5

尝试此操作，通过ajax加载数据并通过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>

Answer 6

jQuery解决方案：

附加'beforeunload'事件，当您关闭页面，点击后退按钮或重新加载页面时，会出现一个确认框，提示您是否确实要去，选择确定退出页面：取消停止退出页面并停留在同一页面上。

此外，您可以在确认框中添加自己的消息：

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

P.S：自jQuery 1.4起支持'beforeunload'事件。

<强>使用Javascript：

对于IE和FF＆lt; 4，将window.event.returnValue设置为您希望显示的字符串，然后将其返回给Safari（使用null代替以允许正常行为）：

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

Answer 7

您可以尝试“onbeforeunload”活动。

另外看看这个 -

Dialog box runs for 1 sec and disappears?

关闭（不离开）页面时jquery beforeunload？

7 个答案: