如何使用 JavaScript 在离开带有未保存更改的网页之前显示警告？

当用户在编辑表单或修改页面内容时，经常需要提醒用户在离开页面前保存或者放弃更改,以避免丢失数据。

以下是 JavaScript 实现在离开页面前显示警告的简单步骤：

步骤

1. 使用 window 对象的 beforeunload 事件来监听浏览器离开事件。

window.addEventListener("beforeunload", function (event) {
  // TODO: 弹出提示信息
});

2. 在 beforeunload 事件处理程序中使用 event.preventDefault() 方法来阻止用户离开页面。

window.addEventListener("beforeunload", function (event) {
  event.preventDefault();
  // TODO: 弹出提示信息
});

3. 在 beforeunload 事件处理程序中编写提示信息，使用 return 语句来弹出提示框。

window.addEventListener("beforeunload", function (event) {
  event.preventDefault();
  event.returnValue = ""; //兼容旧版浏览器
  
  return "您的数据还没保存，确认离开？";
});

完整代码

window.addEventListener("beforeunload", function (event) {
  event.preventDefault();
  event.returnValue = "";
  
  return "您的数据还没保存，确认离开？";
});

其他注意事项

1. beforeunload 事件不是标准事件，可能不被所有浏览器所支持。
2. 一些浏览器在用户点击页面链接时不会触发 beforeunload 事件。
3. 在某些情况下，弹出提示框可能会被浏览器禁用或者更改。