javascript - 防止用户意外离开未保存的页面

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>

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

要处理 saved 标志，您可以监听文本区域中发生的情况，例如，当用户实际输入内容时:

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

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

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

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