在window.unload上提交表单时出现问题

Question

如果表单信息已更新（album.updated = true），我在窗口卸载时提交表单时遇到问题：

window.onunload = function(evnt) {
  if (album.updated) {
    var save = confirm('Do you want to save changes?');
    if (save) {
      alert('submitting form...');
      document.edit_photos.submit();
    }
  }
}

它提醒“提交表单”但没有保存。但是，当我使用“保存”按钮进行常规提交时，它会保存信息。这可能有什么问题？

Answer 1

您无法通过unload事件与服务器进行可靠的交互。

发送一个AJAX请求可能更可靠，但也不应该依赖。

相反，您应该处理onbeforeunload事件和return "You have unsaved changes"; 这将指示浏览器显示允许用户取消导航的确认对话框。 （之后他可以手动保存）

Answer 2

你无法在unload做任何事情。有一段时间允许更多，但坏网站过去常常陷入困境并使用户感到困惑，所以这已被锁定。

您可以获得的唯一互动是onbeforeunload。并且您无法可靠地提示在此处保存...通常不允许您通过直接提交表单来规避导航。您可以尝试使用XMLHttpRequest发布保存请求，但无法保证在页面导航之前它会到达服务器。

所以你可以合理地做的就是提醒用户注意未保存的数据，提示他们取消导航并自行保存数据：

window.onbeforeunload= function() {
    if (album.updated)
        return (
            'You have unsaved changes to this album. Are you sure you wish '+
            'to leave without saving?'
        );
};