如何检测用户是否正在关闭浏览器或在其他网站上导航[重复]答案

【问题标题】：How to detect if the user is closing the browser OR navigate on other website [duplicate]如何检测用户是否正在关闭浏览器或在其他网站上导航[重复]
【发布时间】：2021-12-03 21:07:31
【问题描述】：

我想实现会话处理，如果用户关闭浏览器或选项卡，所有会话都将过期/销毁。但是如果用户正在导航到另一个网站，我想保留所有会话。如何在 Nextjs 中做到这一点？

【问题讨论】：

标签： javascript reactjs next.js dom-events

【解决方案1】：

您可以为unload 事件使用事件侦听器：https://developer.mozilla.org/en-US/docs/Web/API/Window/unload_event

但鉴于您处于 React/Next.js 领域，您可能希望将该侦听器连接到 useEffect 挂钩中，如果您打算这样做...

...您可以完全跳过事件侦听器，并使用useEffect 的return 值作为您的“卸载”处理程序。

正如此处 (https://reactjs.org/docs/hooks-effect.html) 所解释的，当您从 useEffect 内部 return 一个函数时，该函数会在组件从页面中移除时被调用。

如果您将要触发“onUnload”的代码添加到从“App”组件上的useEffect 返回的函数中，这将具有与使用卸载事件侦听器相同的效果。

// App.js
import { useEffect}, React from 'react'

App = () => {
   useEffect(() => {
       return () => {
         // add code to trigger when the user leaves here
       }
   })
}

【讨论】：

但是我如何确定标签是关闭还是导航到另一个网站？据我所知，window.onload 将同时运行（导航/关闭）
如stackoverflow.com/questions/14711262/getting-url-of-next-page 中所述，您的页面不可能知道用户离开时的去向。
实际上，我收回了；如果您使用 Google Analytics (orbitmedia.com/blog/…)，您似乎可以区分。不幸的是，我不确定 GA 是如何做到这一点的。