离开时的 js - Javascript

在 Web 开发中，有时需要在用户离开页面时执行一些操作，例如保存数据、清理资源、发送统计信息等。在这种情况下，可以使用 beforeunload 事件来捕获页面将要关闭或重新加载的事件。

使用 beforeunload 事件

beforeunload 事件会在用户离开页面之前触发。我们可以在事件处理程序中执行一些操作，例如保存数据、提示用户、清理资源等。

window.addEventListener('beforeunload', function (event) {
  // 执行一些操作
  // ...

  // 使用 returnValue 属性触发浏览器提示
  event.preventDefault();
  event.returnValue = '您确定要离开此页面吗？';
});

上面的代码中，我们使用 window.addEventListener 注册了一个 beforeunload 事件处理程序。在事件处理程序中，我们可以执行一些操作，例如保存数据、清理资源等。此外，我们还可以使用 event.preventDefault() 方法来阻止浏览器默认的提示框，并使用 event.returnValue 属性设置提示信息。

注意：出于安全性考虑，一些浏览器可能不允许在 beforeunload 事件处理程序中使用 event.returnValue 属性。此时，我们可以使用返回非空字符串的方式来触发浏览器提示框。

离开页面的注意事项

在用户离开页面时，我们应该注意以下几点：

• 不要阻塞或拖延用户离开页面的时间。因为用户想要离开页面，而我们不应该让他们感到厌烦或卡住。
• 尽可能地实现快速的操作，并使用进度条等方式向用户显示进度。
• 不要误使用 beforeunload 事件，例如在事件处理程序中进行广告推广等。

参考链接

• MDN beforeunload