如何使用 React js 检测浏览器标签关闭事件？

Posted 2023-03-14

【中文标题】如何使用 React js 检测浏览器标签关闭事件？

【英文标题】：How to detect browser tab close event with react js?

【发布时间】：2020-12-22 10:27:09

【问题描述】：

我正在尝试使用 react js 检测浏览器选项卡/浏览器关闭事件以检测用户注销操作（调用 api）。我尝试使用beforeunload 事件作为

  useEffect(() => 
    window.addEventListener("beforeunload", function(e) 

      let confirmationMessage = "o/";

      (e || window.event).returnValue = confirmationMessage; //Gecko + IE

      console.log("logout !");
      return confirmationMessage; //Webkit, Safari, Chrome
    
    );
  );

如果用户关闭选项卡，它工作正常，但问题是当用户reload 我不想退出操作的页面时它也会触发，我尝试搜索并尝试了这些解决方案，但没有工作我。是否有任何解决方案可以仅在浏览器/浏览器选项卡关闭而不重新加载时进行检测？

Detect browser close event

https://***.com/a/5593734/11866037

Warn user before leaving web page with unsaved changes

【参考方案1】：

您错过了在运行清理的useEffect 中添加返回函数，即componentWillUnmount。

您的代码将如下所示：

useEffect(() => 
    return () => 

       window.addEventListener("beforeunload", function(e) 

      let confirmationMessage = "o/";

      (e || window.event).returnValue = confirmationMessage; //Gecko + IE

      console.log("logout !");
      return confirmationMessage; //Webkit, Safari, Chrome
    
    );
   
   
  );