javascript - React app detect if user refresh window or navigated away - Stack Overflow

admin管理员组

文章数量:1313347

I need to be able to detect if the user refreshed the window or navigated away (say google) and then return to the page so I can trigger an event.

I tried different onbeforeunload but it wasnt detecting it.

I tried, this and it wasnt working or triggering the console.log.

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

However, that doesnt even trigger the console.log message. I have also tried beforeunload and same results

any ideas why?

I need to be able to detect if the user refreshed the window or navigated away (say google.) and then return to the page so I can trigger an event.

I tried different onbeforeunload but it wasnt detecting it.

I tried, this and it wasnt working or triggering the console.log.

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

However, that doesnt even trigger the console.log message. I have also tried beforeunload and same results

any ideas why?

• javascript
• reactjs
• redux
• react-redux

Share Improve this question Follow edited Sep 20, 2020 at 10:18 asked Sep 20, 2020 at 10:05 user14289833user14289833 3

• onbeforeunload ---> beforeunload – Yousaf Commented Sep 20, 2020 at 10:08
• @Yousaf I tried that and it didnt trigger it. – user14289833 Commented Sep 20, 2020 at 10:11
• In that case, please provide a Minimal, Reproducible Example so others can test the problem. – Yousaf Commented Sep 20, 2020 at 10:13

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

The best way to detect a page reload is to use window.performance.navigation which returns an object for the page containing two key-value pairs { redirectCount: 0 , type: 0 } shown below:

console.log(window.performance.navigation)

When the key type is equal to a value which is non-zero for example - type: 1 it depicts a page reload.

Note: Most probably the snippet won't work as expected. In that case you can switch to browser console and check it out yourself and don't forget to check the Preserve log checkbox under network tab of browser console.

To check if page is navigating away. Try unload event instead of onbeforeunload.

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

Lastly, in case of page load you can use lifecycle hooks. You can run some code as soon as the page loads in useEffect() of react-hooks in react or ponentDidMount() if you're using class based syntax.

1. useEffect()

    useEffect(() => {
     // Run as soon as page loads
     console.log('page loaded');
    });
   

2. ponentDidMount()

    ponentDidMount() {
     // Run as soon as page loads
     console.log('page loaded'); 
    }
   

Try this

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

If you don't see the console you have to preserve the logs in the console.

The event name is not recognized, in addEventListener the event name should be "beforeunload".
"onbeforeonload" is window property, use it like "window.onbeforeunload = funcName".

If your console log didnt show, it might be cleared by browser, try persist the log, then see it console.log shows up

本文标签： javascriptReact app detect if user refresh window or navigated awayStack Overflow