重新加载前的浏览器提示 - JavaScript

有时候我们的网页需要更新数据或者重新加载，为了避免用户误操作导致数据丢失，我们可以使用 JavaScript 实现在用户离开前弹出提示框提示用户是否确认离开。

实现步骤

1. 监听 beforeunload 事件，该事件会在用户正准备离开页面时触发。

   window.addEventListener('beforeunload', function(event) {
     // Your Code Here
   });
   

2. 在事件处理函数中，设置需要提示用户的文本信息。

   window.addEventListener('beforeunload', function(event) {
     event.preventDefault();
     return event.returnValue = '您确定要离开本页面吗？';
   });
   

   在此处，event.preventDefault() 阻止默认行为，event.returnValue 设置提示信息。

完整代码

window.addEventListener('beforeunload', function(event) {
  event.preventDefault();
  return event.returnValue = '您确定要离开本页面吗？';
});

注意事项

1. beforeunload 事件只能弹出带有文本信息的提示框，若要自定义样式需要使用自定义弹窗。
2. 如果需要取消提示框，可以使用 window.onunload 事件移除 beforeunload 事件监听。

参考链接

• MDN Web Docs - beforeunload
• CSDN - beforeunload 事件