问题描述
我有一个钩子,当有人离开当前页面或离开网站时,它会执行传递给它的函数
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 时,此警报消息出现(仅当他们离开网站时,而不是访问本地链接时),我不希望显示此警报消息 >
如果去掉event.preventDefault()
行,那么handler
函数不会被执行,我需要执行处理程序事件
解决方法
const useOnPageLeave = (handler) => {
useEffect(() => {
window.onbeforeunload = () => handler();
window.addEventListener('beforeunload',(event) => {
handler();
});
return () => {
handler();
document.removeEventListener('beforeunload',handler);
};
});
};
,
在 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
};
,
看起来 firefox
和 safari
浏览器显示这条消息是默认的。你对此无能为力。但有一个好消息。似乎他们只针对 beforeunload
事件而不是 unload
。所以你可以尝试使用它。
这里有更多信息:https://support.mozilla.org/en-US/questions/1304313
,您可以简单地处理 unload
上的 window
事件。例如,以下代码在页面关闭时执行 HTTP 请求:
window.addEventListener('unload',function (event) {
(async () => {
const response = await fetch('/my-endpoint')
console.log(response)
})()
})
但请注意,不鼓励使用 unload
事件。有关详细信息,请参阅 MDN docs(TL;DR:它不可靠,尤其是在移动设备上)。