js 关闭浏览器 unload

基础概念

unload 事件是在浏览器窗口或标签页即将关闭时触发的事件。它可以用于执行一些清理操作，例如保存用户数据、断开网络连接等。

相关优势

1. 数据保存：在用户离开页面之前，可以及时保存未提交的数据。
2. 资源释放：可以释放一些占用的资源，如关闭 WebSocket 连接、清除定时器等。
3. 用户体验优化：通过提示用户是否确认离开，可以减少误操作。

类型与应用场景

类型

• beforeunload：在窗口或标签页关闭之前触发，可以显示一个确认对话框询问用户是否真的要离开。
• unload：在窗口或标签页关闭时触发，用于执行一些清理操作。

应用场景

• 在线编辑器：在用户关闭页面前保存编辑内容。
• 实时聊天应用：断开 WebSocket 连接，避免资源浪费。
• 在线游戏：保存游戏进度或状态。

示例代码

使用 beforeunload 提示用户确认离开

window.addEventListener('beforeunload', function (e) {
  // 取消事件的默认行为
  e.preventDefault();
  // Chrome 需要设置 returnValue
  e.returnValue = '';
});

使用 unload 执行清理操作

window.addEventListener('unload', function () {
  // 断开 WebSocket 连接
  if (ws && ws.readyState === WebSocket.OPEN) {
    ws.close();
  }
  // 清除定时器
  clearInterval(timerId);
});

常见问题及解决方法

问题1：beforeunload 事件不触发

原因：

• 浏览器安全策略限制，某些情况下可能不会显示确认对话框。
• 页面是通过某些方式（如 window.open）打开的，且未设置 noopener 或 noreferrer。

解决方法：

• 确保代码正确无误，尝试在不同的浏览器中测试。
• 使用 noopener 和 noreferrer 打开新窗口。

const newWindow = window.open('https://example.com', '_blank', 'noopener,noreferrer');

事件处理函数中无法执行异步操作

原因：

• unload 和 beforeunload 事件的处理函数中不允许执行异步操作，如 fetch 请求。

解决方法：

• 尽量在事件触发前完成所有必要的同步操作。
• 如果必须执行异步操作，可以考虑使用 navigator.sendBeacon 发送数据。

window.addEventListener('unload', function () {
  const data = JSON.stringify({ key: 'value' });
  navigator.sendBeacon('/api/save', data);
});

总结

unload 事件及其相关事件在处理页面关闭时的清理工作和用户体验优化方面非常有用。了解其基础概念、优势、应用场景以及常见问题解决方法，可以帮助开发者更好地利用这些事件提升应用的稳定性和用户体验。