React：在网站退出时执行功能，不发出警报警告

Question

我有一个挂钩，可以在有人离开当前页面或离开网站时执行传递给它的函数

const useOnPageLeave = (handler) => {
    useEffect(() => {

        window.onbeforeunload = undefined;
        window.addEventListener('beforeunload', (event) => {             //When they leave the site
            event.preventDefault();                                     // Cancel the event as stated by the standard.
            handler();
        });

        return () => {
            handler();                                                 //When they visit another local link
            document.removeEventListener('beforeunload', handler);
        };
    }, []);
};

当使用 Firefox 或 Safari 时，此警告消息出现（仅当他们离开网站时，而不是当他们访问本地 link）时，我不不想显示此警报消息

如果我删除行event.preventDefault()，那么handler函数不会执行，我需要执行处理程序事件

Here is an MRE of the problem

Answer 1

const useOnPageLeave = (handler) => {
  useEffect(() => {
    window.onbeforeunload = () => handler();

    window.addEventListener('beforeunload', (event) => {
      handler();
    });

    return () => {
      handler();
      document.removeEventListener('beforeunload', handler);
    };
  });
};

Answer 2

在 useEffect 中使用监听器可能有问题。

const useOnPageLeave = (handler) => {   

    useEffect(() => {
        
    }, []); // useEffect will only get called once on component did mount 
};

所以您可能要考虑尝试将您的逻辑放在 useEffect 之外

或

添加一个 useState 钩子作为监听器可能是可行的方法

const useOnPageLeave = (handler) => {

    const [userLeaving, setUserLeaving] = useState(false);        

    useEffect(() => {

       if (userLeaving) handler();
    
    }, [userLeaving]); // useEffect will only get called once on component did mount AND each time userLeaving state updates
};

Answer 3

看起来 firefox 和 safari 浏览器默认显示此消息。你无能为力。但有个好消息。他们似乎只针对 beforeunload 事件而不是 unload。所以你可以尝试使用它。

这里有更多相关信息：https://support.mozilla.org/en-US/questions/1304313

Answer 4

您可以简单地处理 window 上的 unload 事件。例如，以下代码在页面关闭时执行 HTTP 请求：

window.addEventListener('unload', function (event) {
  (async () => {
    const response = await fetch('/my-endpoint')
    console.log(response)
  })()
})

但是请注意，不鼓励使用 unload 事件。有关详细信息，请参阅 MDN docs（TL；DR：它不可靠，尤其是在移动设备上）。

React：在网站退出时执行功能，不发出警报警告

React: Execute function on website exit, without giving an alert warning

onbeforeunload

addeventlistener

reactjs

react-hooks

use-effect