Question

我从this SO帖子中获得了下面的代码段，当用户尝试重新加载页面或关闭浏览器等时，它会起作用，但如果用户点击某个链接，那么它就会让他们一气呵成，然后错误地开始在错误的页面上显示消息。我正在使用pjax作为链接。

   $(document).ready(function () {
       $('textarea').change(function () {
          window.onbeforeunload = function () { return "Your changes to the survey have not been saved?" };
      });
    });

Answer 1

你应该像这样使用onbeforeunload，无条件：

<script type="text/javascript">
saved=true; // initially, it is saved (no action has been done)

window.onbeforeunload = confirmExit;
function confirmExit() {
    if (!saved) {
        return "You did not save, do you want to do it now?";
    }
}
</script>

仅在触发另一个事件时处理此事件是不安全的。在您点击链接之前，您的textarea的onchange事件可能不会触发，因此该窗口根本不会处理onbeforeunload。该链接将按预期工作：您将被重定向。

要处理saved标记，您可以听取textarea中发生的事情，例如，当用户实际输入内容时：

$('textarea').keyup(function(){
    saved=false;
});

然后，如果您将数据保存在ajax中，则保存按钮可以将其设置为true：

$('#btnSave').click(function(){
    // ajax save
    saved=true;
});

否则，它将加载带有saved标志的下一页。

Answer 2

如下所示？听取所有<a>链接，然后根据变量needToSave是否设置为true，显示消息或让它继续。

var needToSave = false; // Set this to true on some change
// listen on all <a ...> clicks
$(document).click("a", function(event){        
    if (needToSave == true) {
        alert("You need to save first");
        event.preventDefault();
        return;
    }
});

UPDATE （根据Roasted的建议），每次点击链接并执行现有逻辑时，都会触发卸载事件：

// listen on all <a ...> clicks
$(document).click("a", function(event){        
   $(window).trigger("unload");
});

jsFiddle here - http://jsfiddle.net/k2fYM/

防止用户意外导航离开未保存的页面

2 个答案: