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

Question

我从这个 SO帖子中得到了下面的代码片段,当用户尝试重新加载页面或关闭浏览器等时它可以正常工作但是如果用户点击链接然后它让他们naivagate离开,然后错误地开始显示消息错误的页面.我正在使用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>

仅在触发另一个事件时处理此事件是不安全的.在onchange您的textarea这里的事件可能是你点击一个链接,因此窗口将不会处理之前不火onbeforeunload的.该链接将按预期工作:您将被重定向.

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

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

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

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

否则,它将加载带有saved标志的下一页.