JavaScript 离开页面警告 - Javascript

在开发 Web 应用程序时，经常需要警告用户在离开页面之前保存未保存的更改。一种常见的做法是在用户离开页面时出现提示框，让用户选择是否继续离开页面。在 JavaScript 中，我们可以使用 beforeunload 事件来实现这个功能。

代码实现

window.addEventListener("beforeunload", function (event) {
  event.preventDefault();
  event.returnValue = "";
});

解释说明

当用户试图关闭或离开页面时，浏览器会触发 beforeunload 事件。我们可以在这个事件上添加一个监听器函数，来实现在用户离开页面时出现提示框的功能。上面的代码中，我们使用 addEventListener 方法来添加一个监听器。该监听器接受一个回调函数作为参数。

在回调函数中，我们使用 preventDefault 方法来阻止默认操作，即浏览器默认的离开页面行为。然后，我们将 returnValue 属性设置为空字符串，以便浏览器显示一个带有提示信息的对话框让用户确认是否离开页面。用户可以选择“留在页面”或者“离开页面”。如果用户选择“留在页面”，那么页面将继续保持现状。如果用户选择“离开页面”，那么浏览器将执行默认操作，即关闭或跳转页面。

总结

以上就是 JavaScript 实现页面离开提示的示例代码。通过在 beforeunload 事件上添加监听器，我们可以很方便地在用户离开页面时弹出提示框，提醒用户保存未保存的更改。我们也可以在提示框中加入一些有用的信息，比如表单中未填写完整的字段，以便用户更加清楚地知道哪些内容还需要补充完善。