javascript - React 应用程序检测用户是否刷新窗口或导航离开

Question

我需要能够检测用户是否刷新了窗口或导航离开(比如 google.com)然后返回页面，以便我可以触发事件。

我尝试了不同的 onbeforeunload 但它没有检测到它。

我试过了，但它没有工作或触发 console.log。

componentDidUpdate()
{
      window.addEventListener("onbeforeunload",function (){
        console.log('Page Refreshed')
     })
      
}

但是，这甚至不会触发 console.log 消息。我也试过 beforeunload 和相同的结果

有什么想法吗？

Answer 1

检测页面重新加载的最佳方法是使用 window.performance.navigation它返回包含两个键值对的页面的对象 { redirectCount: 0 , type: 0 }如下所示:

console.log(window.performance.navigation)

当键type等于一个非零值，例如 - type: 1它描述了页面重新加载。

注意:代码段很可能不会按预期工作。在这种情况下，您可以切换到浏览器控制台并自行检查，不要忘记 check Preserve log network tab 下的复选框浏览器控制台。

检查页面是否离开。尝试 unload事件而不是 onbeforeunload .

window.addEventListener("unload", function (e) {
  console.log('going away', e)
})

最后，在页面加载的情况下，您可以使用生命周期 Hook 。您可以在页面加载后立即运行一些代码 useEffect() react 中的 react 钩子(Hook)或componentDidMount()如果您使用的是基于类的语法。

1. useEffect()

    useEffect(() => {
     // Run as soon as page loads
     console.log('page loaded');
    });
   

2. componentDidMount()

    componentDidMount() {
     // Run as soon as page loads
     console.log('page loaded'); 
    }