在前端开发中，经常需要监控用户的行为，其中之一就是用户关闭浏览器。然而，在大多数情况下，浏览器关闭事件不会立即触发，而是在某些特定条件下才会被触发。因此，检测浏览器关闭事件需要一些技巧和深度理解。
监听 window.unload 事件
最常见的方法是监听 window 对象的 unload 事件。当页面卸载时，该事件将被触发。但是，这个事件不仅在浏览器关闭时触发，还可能在用户跳转到其它页面或重新加载当前页面时触发。因此，我们需要进一步验证是否是真正的浏览器关闭事件。
--------------------------------- --------------- -
-- ---------------- -- ------------------- -- ---------------------------------- --- --- -
-- ----------------------
-------
-
-- ---------
---以上代码判断了两种情况：
- 如果
event.persisted为true，表示页面已经被缓存，用户通过后退按钮回到该页面，不属于浏览器关闭事件。 - 如果
window.performance.navigation.type !== 1，表示用户跳转到其他页面或重新加载当前页面，也不属于浏览器关闭事件。
监听 window.beforeunload 事件
另一种常见的方法是监听 window 对象的 beforeunload 事件。该事件在页面即将卸载时触发，可以用来提示用户保存未保存的数据或确认是否离开当前页面。当浏览器关闭时，也会触发该事件，并且可以通过返回一个字符串来提示用户是否关闭浏览器。
--------------------------------------- --------------- - -- --------- ----------------------- ------ ------------- ---
以上代码中，我们可以通过 event.preventDefault() 阻止默认行为，弹出提示框来询问用户是否关闭浏览器。如果返回一个非空字符串，则会显示一个带有提示文本的对话框。用户可以选择留在当前页面或关闭浏览器。
需要注意的是，在某些浏览器中，例如 Chrome 和 Opera，无法自定义提示框的文本内容，只能使用默认的提示文本。
通过 WebSocket 监听连接状态
除了以上两种方法，还可以通过 WebSocket 监听连接状态来检测浏览器关闭事件。WebSocket 是一种 HTML5 新增的协议，可以实现浏览器与服务器之间的双向通信。当浏览器关闭时，WebSocket 连接也会断开，从而触发 onclose 事件。
--- -- - --- --------------------------------- ---------- - ---------- - -- --------- --
以上代码创建了一个 WebSocket 连接，并监听了其 onclose 事件，当连接关闭时会触发该事件。
需要注意的是，WebSocket 可能不支持某些浏览器或被防火墙拦截。此外，在使用 WebSocket 监听连接状态时，需要考虑跨域问题和安全性问题。
总结
以上是三种常见的检测浏览器关闭事件的方法。无论选择哪种方法，都需要深入了解其原理和限制，以便能够准确地监控用户行为。在实际开发中，可以根据具体情况选择最适合的方法来检测浏览器关闭事件。
示例代码：https://codepen.io/chatgpt/
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/24568