修改内容未保存浏览器关闭确认

2023-12-08 11:28:10

介绍

当用户在浏览器中编辑内容时，如果关闭浏览器而不保存，浏览器将弹出提示对话框，询问用户是否要保存更改。

onbeforeunload 事件

onbeforeunload 事件在窗口即将被卸载（关闭）时触发。此时页面文档依然可见，且该事件的默认动作可以被取消。另外页面刷新和切换也会触发 onbeforeunload 事件。

window.addEventListener('beforeunload', function(e) {
  // 如果用户修改了内容，则显示提示对话框
  if (document.body.classList.contains('has-unsaved-changes')) {
    e.preventDefault();
    e.returnValue = '';
    var dialog = document.createElement('dialog');
    dialog.innerHTML = `
      <form>
        <p>您对以下内容进行了修改：</p>
        <ul>
          <li>...</li>
          <li>...</li>
          <li>...</li>
        </ul>
        <p>您是否要保存更改？</p>
        <button type="submit">保存</button>
        <button type="button" onclick="dialog.close()">取消</button>
      </form>
    `;
    document.body.appendChild(dialog);
    dialog.showModal();

    dialog.querySelector('form').addEventListener('submit', function(e) {
      e.preventDefault();
      // 保存更改
      ...

      // 关闭对话框
      dialog.close();
    });
  }
});