原生JS实现跳转或刷新页面时，浏览器提示当前页面未保存

2024-01-21 21:20:18

引言

在开发Web应用程序时，经常需要在页面跳转或刷新时提示用户当前页面未保存。这对于防止丢失重要数据至关重要。原生JavaScript提供了几种方法来实现此功能。

使用 window.onbeforeunload 事件

window.onbeforeunload 事件在用户离开页面时触发，例如：

单击链接
提交表单
刷新页面
关闭浏览器标签或窗口

以下代码演示如何使用 window.onbeforeunload 事件提示用户：

window.onbeforeunload = function(e) {
  // 检查页面是否已更改
  if (document.hasUnsavedChanges) {
    // 设置自定义事件处理程序
    e.preventDefault();
    e.returnValue = '';
    // 显示提示消息
    return "您有未保存的更改。离开页面将导致丢失这些更改。";
  }
};

使用 window.addEventListener 事件

也可以使用 window.addEventListener 事件监听器来监听 beforeunload 事件：

window.addEventListener("beforeunload", function(e) {
  // 检查页面是否已更改
  if (document.hasUnsavedChanges) {
    // 设置自定义事件处理程序
    e.preventDefault();
    e.returnValue = '';
    // 显示提示消息
    return "您有未保存的更改。离开页面将导致丢失这些更改。";
  }
});

使用 window.confirm 确认对话框

另一种方法是使用 window.confirm 确认对话框：

window.onbeforeunload = function(e) {
  // 检查页面是否已更改
  if (document.hasUnsavedChanges) {
    // 显示确认对话框
    if (confirm("您有未保存的更改。离开页面将导致丢失这些更改。")) {
      return true;
    } else {
      // 取消离开页面
      e.preventDefault();
      e.returnValue = '';
      return false;
    }
  }
};