4

我从这个SO 帖子中得到了下面的片段，当用户尝试重新加载页面或关闭浏览器等时它可以工作。但是如果用户点击一个链接，那么它会让他们导航离开，然后错误地开始显示消息错误的页面。我正在使用 pjax 作为链接。

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

2 回答 2

8

你应该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>

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

为了处理这个saved标志，你可以听听你的文本区域发生了什么，例如，当用户实际输入一些东西时：

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

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

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

saved否则，它将加载打开标志的下一页。

于 2013-08-06T10:39:55.477 回答
3

像下面这样的东西呢？侦听所有<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;
    }
});

更新（根据 Roasted 的建议）这应该在每次单击链接时触发卸载事件并执行您现有的逻辑：

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

jsFiddle在这里-http: //jsfiddle.net/k2fYM/

于 2013-08-06T10:06:45.767 回答