React 应用如何检测用户刷新页面或离开页面

Question

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

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

我尝试了这个，但它没有起作用或触发console.log。

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

然而，这甚至没有触发console.log消息。我也尝试了beforeunload，结果相同。

有什么想法吗？

- user14289833

---

onbeforeunload ---> beforeunload - Yousaf

@Yousaf 我试过了，但它没有触发。 - user14289833

在这种情况下，请提供一个最小可复现示例，以便其他人可以测试问题。 - Yousaf

Answer 1

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

console.log(window.performance.navigation)

当键 type 的值为非零值时，例如 type: 1，它表示页面重新加载。

注意：大部分情况下，片段可能不会按预期工作。这种情况下，您可以切换到浏览器控制台自行检查，并且不要忘记在浏览器控制台的 network tab 下选中 Preserve log 复选框进行检查。

为了检查页面是否正在导航到其他页面，请尝试使用 unload 事件，而不是 onbeforeunload。

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

最后，对于页面加载，您可以使用生命周期钩子。如果您正在使用基于类的语法，则可以在 componentDidMount() 中运行一些代码；如果您使用的是React中的react-hooks，则可以在useEffect()中执行。

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'); 
    }
   

- Mohammad Basit

Answer 2

试试这个

window.onbeforeunload = function(event) {
  console.log('Page Refreshed');
};

如果您没有看到控制台，您需要在控制台中保留日志。

- Anup

---

页面加载后如何触发操作？ - user14289833

那是另一件事。现在，如果你想在页面加载时执行某些操作，可以使用componentDidMount()。如果你想在刷新之前存储一些值并在刷新后使用这些值，则必须使用浏览器存储sessionStorage或cookie。 - Anup

Answer 3

事件名称未被识别，在addEventListener中应该使用事件名称"beforeunload"。
"onbeforeonload"是window属性，可以像这样使用它："window.onbeforeunload = funcName"。

如果您的控制台日志没有显示出来，可能被浏览器清除了，请尝试持久化日志，然后查看是否会显示console.log。

- Nikko Khresna