如何在 JavaScript 中检测浏览器或标签页关闭？

在 Web 应用程序中，我们需要确保用户正确地退出才能保护数据和状态。但是，有时我们无法控制用户的行为，例如关闭浏览器或标签页。因此，我们需要能够检测这些事件并执行适当的操作。

方法一：使用 beforeunload 事件

beforeunload 事件在用户即将离开当前页面时触发，例如单击关闭按钮或输入 URL。我们可以使用此事件来警告用户退出将导致数据丢失并提示用户保存数据。

window.addEventListener('beforeunload', function(event) {
  // This will show a confirmation message to the user
  event.preventDefault();
  event.returnValue = '';
});

请注意，我们需要调用 preventDefault() 方法来显示浏览器默认的离开提示消息。如果我们想显示自定义的消息，可以将 returnValue 属性设置为提示消息文本。

方法二：使用 unload 事件

unload 事件在用户关闭标签页或浏览器时触发。请注意，由于浏览器的限制，我们无法阻止该事件的默认行为。

window.addEventListener('unload', function(event) {
  // Do something when the page is about to unload
});

方法三：使用 pagehide 事件

pagehide 事件是 unload 事件的替代品，可以在用户关闭标签页或浏览器时触发。与 unload 不同，我们可以阻止 pagehide 的默认行为。

window.addEventListener('pagehide', function(event) {
  // This will prevent the page from being unloaded
  event.preventDefault();
});

总结

我们可以使用 beforeunload、unload 或 pagehide 事件来检测用户关闭浏览器或标签页的事件。这些事件可以帮助我们保护用户数据和状态，但我们不能完全控制用户的行为。因此，我们应该在 Web 应用程序中使用这些事件来完成适当的操作或提示。