如何检测刷新操作（通过单击浏览器中的刷新图标）？答案

【问题标题】：How to detect refresh action(by clicking refresh icon in browser)?如何检测刷新操作（通过单击浏览器中的刷新图标）？
【发布时间】：2022-02-04 16:36:06
【问题描述】：

我只想通过单击浏览器左上角的刷新图标来限制页面刷新。

我尝试了更多可用的选项，例如，

'beforeunload' 事件，可以在每次卸载（刷新、导航、关闭）浏览器时触发。在活动中，我尝试了'window.performance.navigation.type' 和window. performance.getEntrieaByType('navigation').map(nav=>nav.type) 选项。但两者都没有给出正确的结果。在“刷新”、“导航”和“关闭”等每个操作上都得到相同的结果。有时也会得到不同的结果。所以我不相信这些选项。

那么任何人都可以帮助我获得正确的选项来检测浏览器刷新图标完成的刷新操作吗？

我正在使用反应应用程序。

【问题讨论】：

标签： javascript html reactjs browser dom-events

【解决方案1】：

window.onbeforeunload = ()=>{
    localStorage.setItem("unload",Date.now());
}
useEffect(){
    let last_unload = localStorage.getItem('unload');
    let decided_time = 1000;
    if(last_unload){
        // means the user have closed the page 
        if(Date.now() - parseInt(last_unload,10) <= 1000)
        {
            // this is a refresh
            console.log('refresh handling code')
        }else{
            // It's a new session, means user came to page, closed the browser, now came back after a long time
        }
    }
}

一般来自here的答案

应该可以，但是因为您说 window.performance 在您的情况下是模棱两可的，请尝试这样的事情。让我知道这是否有帮助！

【讨论】：

嗨 Aashish，感谢您的回复。您提供的解决方案无效。因为，我需要在流程到达生命周期挂钩之前限制刷新。所以我将事件“onbeforeunload”放在 index.js 文件中。这里的事件调用所有操作，如刷新、导航、关闭等......我只需要检测由刷新图标单击触发的刷新操作。跨度>
为什么在单击“刷新按钮”时不存储时间戳，然后在 index.js 中检查时间戳是否存在，如果存在则表示有人单击了刷新按钮，现在一旦你执行了刷新操作，从那里删除时间戳。
Aashish，存储时间戳无济于事。因为，事件“onbeforeunload”将在刷新和关闭操作中触发。因此，存储的时间戳将为这两个操作显示相同的结果。我想限制刷新。而且，当我们返回任何字符串或空字符串时，它只能通过事件'onbeforeunload'来实现。当我们重新加载、导航和关闭操作时，它将显示一个确认弹出窗口。但我希望这个弹出窗口只在刷新时。
您是否希望仅在用户按下刷新按钮或任何刷新时才会弹出此弹出窗口？
仅在按下浏览器的刷新图标时。