Check if page gets reloaded or refreshed in JavaScript

Question

I want to check when someone tries to refresh a page.

For example, when I open a page nothing happens but when I refresh the page it should display an alert.

Not really possible without server side code. What do you need it for? Maybe if you give the bigger picture we can suggest better alternative. — Shadow The GPT Wizard, Feb 15 '11 at 14:41
Maybe you could do such as thing with a cookie... like storing the time and on reload compare the time difference. — Felix Kling, Feb 15 '11 at 14:42
I want to make such as facebook link will be #!/anythinge I want to remove #! when page reload only — Ahmed, Feb 15 '11 at 14:45
@Ahmed I am trying to do the same thing. Did any of the solutions below work for you? — Paul Fitzgerald, Jan 18 '17 at 11:51
⚠️⚠️⚠️ `window.performance.navigation.type` is deprecated, pls see [my answer](https://stackoverflow.com/a/53307588/5286034). — Илья Зеленько, Nov 14 '18 at 19:37

score 273 · Answer 1 · edited Feb 03 '23 at 22:25

273

⚠️⚠️⚠️ window.performance.navigation.type is deprecated. Please see Илья Зеленько's answer.

A better way to know that the page is actually reloaded is to use the navigator object that is supported by most modern browsers.

It uses the Navigation Timing API.

//check for Navigation Timing API support
if (window.performance) {
  console.info("window.performance works fine on this browser");
}
console.info(performance.navigation.type);
if (performance.navigation.type == performance.navigation.TYPE_RELOAD) {
  console.info( "This page is reloaded" );
} else {
  console.info( "This page is not reloaded");
}

Source: Navigation Timing API

edited Feb 03 '23 at 22:25

Peter Mortensen

30,738
21
105
131

answered Apr 06 '16 at 07:20

Rahul Jain

3,065
1
13
17

1

thanks buddy this is accurate solution to detect either the page is reloaded from right click/refresh from the browser or reloaded by the url. – Roque Mejos Aug 08 '16 at 08:01
4

Be aware.Chrome had recently change this behavior. When user click current address bar and hit enter, the value of performance.navigation.type will be 1 which should be 0. I tested in Version 56. Not sure why. – Jackwin tung Feb 19 '17 at 09:28
It still works in Firefox 52 but not in Chrome 57. Reloading by clicking on reload button or by putting cursor in address bar and hitting enter both return `performance.navigation.type` value of `1`. – codneto Apr 04 '17 at 01:01
Recently tested in chrome 57 but it worked fine as always. I was not able to reproduce the issue you were having. – Rahul Jain Apr 04 '17 at 09:28
In react with redux performance.navigation.type === 1 occur multiple times- unwanted behavior. so window.onload resolve the problem – Eran Or May 05 '17 at 07:49
This does work for refresh, but also triggers during any AJAX requests, so it was not what we wanted. – Andrew Crouse Jun 05 '17 at 18:04
Does not work with the "Run code snippet" feature (because the snippet runs in an iframe), but works in Chrome with the following reload methods: browser reload button, enter key in the URL bar, right mouse click/reload. – Julien Kronegg Jul 06 '17 at 07:54
1

They way it works is as expected, any interaction with the page which force a new navigation state to the same page is considered a refresh. So depending in your code this is extremely useful, either to register every time the page has been refreshed, reloaded or any ajax interaction. I can give this a lot of uses for functionalities and analytics. – raphie Dec 05 '17 at 17:19
30

`performance.navigation.type == performance.navigation.TYPE_RELOAD` is easier to read instead of `== 1`. Also, if you check `performance.navigation` you will find that there are 4 diffrent navigation types like `TYPE_BACK_FORWARD`,`TYPE_NAVIGATE` – Vitalij Kornijenko Feb 16 '18 at 11:17
11

⚠️⚠️⚠️ `window.performance.navigation.type` is deprecated, pls see [my answer](https://stackoverflow.com/a/53307588/5286034). – Илья Зеленько Nov 14 '18 at 19:39
1

Shouldn't the 2nd if and the else be inside the first one? – Matthias Aug 27 '19 at 17:35
navigation is now deprecated, is there a modern way to do this? – Joe Lloyd Mar 19 '20 at 10:04
Even while closing a browser's tab, performance.navigation.type gives you 1 (performance.navigation.TYPE_RELOAD)! Can we actually detect the browser is about to refresh? – Aniruddha Shevle Jun 25 '20 at 08:32
Above code is not working while reloading page using 'F5' key. – Mohd Aman Nov 09 '20 at 09:53

score 107 · Answer 2 · edited Jul 19 '23 at 11:31

New standard 2018-now (PerformanceNavigationTiming)

window.performance.navigation property is deprecated in the Navigation Timing Level 2 specification. Please use the PerformanceNavigationTiming interface instead.

PerformanceNavigationTiming.type

This is an experimental technology.

Check the Browser compatibility table carefully before using this in production.

Check if page gets reloaded or refreshed in JavaScript

const pageAccessedByReload = (
  (window.performance.navigation && window.performance.navigation.type === 1) ||
    window.performance
      .getEntriesByType('navigation')
      .map((nav) => nav.type)
      .includes('reload')
);

alert(pageAccessedByReload);

Support on 2021-11-09

Support on 2023-07-19

The type read-only property returns a string representing the type of navigation. The value must be one of the following:

navigate — Navigation started by clicking a link, entering the URL in the browser's address bar, form submission, or initializing through a script operation other than reload and back_forward as listed below.
reload — Navigation is through the browser's reload operation or location.reload().
back_forward — Navigation is through the browser's history traversal operation.
prerender — Navigation is initiated by a prerender hint.

This property is Read only.

The following example illustrates this property's usage.

function print_nav_timing_data() {
  // Use getEntriesByType() to just get the "navigation" events
  var perfEntries = performance.getEntriesByType("navigation");

  for (var i=0; i < perfEntries.length; i++) {
    console.log("= Navigation entry[" + i + "]");
    var p = perfEntries[i];
    // dom Properties
    console.log("DOM content loaded = " + (p.domContentLoadedEventEnd - p.domContentLoadedEventStart));
    console.log("DOM complete = " + p.domComplete);
    console.log("DOM interactive = " + p.interactive);
 
    // document load and unload time
    console.log("document load = " + (p.loadEventEnd - p.loadEventStart));
    console.log("document unload = " + (p.unloadEventEnd - p.unloadEventStart));
    
    // other properties
    console.log("type = " + p.type);
    console.log("redirectCount = " + p.redirectCount);
  }
}

+1 for pointing out the deprecated API, but -100 to Apple for their lack of support in iOS still into 2020 — kinakuta, Feb 03 '20 at 20:24
Thanks for pointing _that_ out. So here's the full compatible solution: https://jsfiddle.net/j9o1khcw/2/ — garzj, Nov 19 '20 at 15:25
@0nline I tried your solution and it did not work for me FYI. — kennysong, Nov 19 '20 at 16:43
So does this work on Safari in 2022? I don't have a Safari browser. — Anshuman Kumar, Feb 18 '22 at 12:05
In first snippet: It would call `window.performance.getEntriesByType()` every time `window.performance.navigation.type === 1` is false. Not sure if this is intended or not. — user3342816, Jun 05 '22 at 07:49
@Илья Thanks for pointing it out. It is a big help for me. I've a question. I tested various ways but always got just one entry returned by `getEntriesByType('navigation')`. What is your reason to use `.map` instead of directly using the first entry. Is it possible to get multiple entries in some scenarios? I'm interested to know more about it. Please explain. — Ashutosh Biswas, Sep 25 '22 at 04:52

score 40 · Answer 3 · edited Mar 14 '23 at 21:44

40

The first step is to check sessionStorage for some pre-defined value and if it exists, alert the user:

if (sessionStorage.getItem("is_reloaded")) alert('Reloaded!');

The second step is to set sessionStorage to some value (for example true):

sessionStorage.setItem("is_reloaded", true);

Session values kept until the page is closed, so it will work only if the page reloaded in a new tab with the site. You can also keep a reload count the same way.

edited Mar 14 '23 at 21:44

Peter Mortensen

30,738
21
105
131

answered Jul 25 '13 at 10:22

DitherSky

1,050
10
9

39

Two things to be aware of: 1). You can only store string values in session and local storage. Therefore `true` is converted to `"true"`. 2). Session storage persists until the user closes the browser window, so you can't tell the difference between page reload and navigating away from and back to you site within the same browser session. – Hector May 19 '15 at 14:17
SessionStorage can be modified from within browser? Correct me if I'm wrong. Someone can add/delete the key and your logic/code can be circumvented. – f0rfun Apr 07 '21 at 09:24
Note that sessionStorage restore if you close tab and restore it from ctrl+shift+T That may be potentially hole in secure in public place when need clean session token – kuzroman Aug 12 '21 at 10:32
this does not cover page turn vs. page reload – btx Dec 28 '22 at 13:37
@kuzroman, seems to be working fine, even when reopened after closing – 27px Jul 13 '23 at 08:43

score 17 · Answer 4 · edited Feb 03 '23 at 22:22

17

Store a cookie the first time someone visits the page. On refresh check if your cookie exists and if it does, alert.

function checkFirstVisit() {
  if(document.cookie.indexOf('mycookie')==-1) {
    // The cookie doesn't exist. Create it now
    document.cookie = 'mycookie=1';
  }
  else {
    // Not the first visit, so alert
    alert('You refreshed!');
  }
}

And in your body tag:

<body onload="checkFirstVisit()">

edited Feb 03 '23 at 22:22

Peter Mortensen

30,738
21
105
131

answered Dec 20 '11 at 07:25

techfoobar

65,616
14
114
135

14

What about returning users? – Red Taz Dec 21 '12 at 13:30
6

Like @Rob2211 says this only checks if the page has been visited and can give a false positive as long as the page is revisited when the cookie is still alive. Do not use this to check refresh. – Brannon Aug 19 '13 at 17:07
1

@Brannon - The cookie is a created without any expires value and will be destroyed when the browser is closed. – techfoobar Aug 19 '13 at 17:41
2

@techfoobar nice catch. Wouldn't this still pose a problem if the user revisits the site before that cookie is destroyed? – Brannon Aug 19 '13 at 17:49
4

@Brannon - Yes, if the browser is left open and the user re-visits after some time, it will not be considered as a new visit. – techfoobar Aug 19 '13 at 17:54
This suffers the same drawbacks as the session storage solution. – oligofren Aug 27 '18 at 14:12
I have rolled back the [edit that says `document.cookies` is obsolete](https://stackoverflow.com/revisions/8572030/2). It’s _not_ obsolete; this [suggested edit](https://stackoverflow.com/review/suggested-edits/23692910) has been approved with one reject vote that says _“It says that `document.cookie` is obsoleted, **but provides no documentation or link**.”_ – Sebastian Simon Aug 14 '19 at 12:40
this does not cover page turn vs. page reload – btx Dec 28 '22 at 13:37

score 14 · Answer 5 · edited Mar 14 '23 at 21:48

I have written this function to check both methods using the old window.performance.navigation and the new performance.getEntriesByType("navigation") at the same time:

function navigationType(){

    var result;
    var p;

    if (window.performance.navigation) {
        result=window.performance.navigation;
        if (result==255){result=4} // 4 is my invention!
    }

    if (window.performance.getEntriesByType("navigation")){
       p=window.performance.getEntriesByType("navigation")[0].type;

       if (p=='navigate'){result=0}
       if (p=='reload'){result=1}
       if (p=='back_forward'){result=2}
       if (p=='prerender'){result=3} //3 is my invention!
    }
    return result;
}

Result description:

0: clicking a link, Entering the URL in the browser's address bar, form submission, Clicking bookmark, initializing through a script operation.

1: Clicking the Reload button or using Location.reload()

2: Working with browser history (Back and Forward).

3: prerendering activity like <link rel="prerender" href="//example.com/next-page.html">

4: any other method.

this is not working in safari. the returned array is empty. – char m Feb 25 '21 at 12:06 — char m, Feb 25 '21 at 12:06

score 9 · Answer 6 · edited Mar 14 '23 at 21:45

9

If

event.currentTarget.performance.navigation.type

returns

0 => the user just typed in an URL
1 => the page reloaded
2 => the back button is clicked.

edited Mar 14 '23 at 21:45

Peter Mortensen

30,738
21
105
131

answered Feb 02 '17 at 21:56

nPcomp

8,637
2
54
49

I got this error, can you explain it more? Uncaught TypeError: Cannot read property 'currentTarget' of undefined – Janatbek Orozaly Mar 24 '17 at 20:25
2 => TYPE_BACK_FORWARD The page was accessed by navigating into the history. https://developer.mozilla.org/en-US/docs/Web/API/PerformanceNavigation – Tiago Freitas Leal Apr 16 '18 at 23:35
`performance.navigation.type` is deprecated, pls see [my answer](https://stackoverflow.com/a/53307588/5286034). – Илья Зеленько Nov 14 '18 at 19:40

score 8 · Answer 7 · edited Feb 03 '23 at 22:20

8

I found some information in JavaScript Detecting Page Refresh. His first recommendation is using hidden fields, which tend to be stored through page refreshes.

function checkRefresh() {
    if (document.refreshForm.visited.value == "") {
        // This is a fresh page load
        document.refreshForm.visited.value = "1";
        // You may want to add code here special for
        // fresh page loads
    } else {
        // This is a page refresh
        // Insert code here representing what to do on
        // a refresh
    }
}

<html>

<body onLoad="JavaScript:checkRefresh();">
    <form name="refreshForm">
        <input type="hidden" name="visited" value="" />
    </form>

</body>

</html>

edited Feb 03 '23 at 22:20

Peter Mortensen

30,738
21
105
131

answered Feb 15 '11 at 14:43

VoronoiPotato

3,113
20
30

We can also check by checking `Referer` property and modify server response on the basis of this property – Adeel Feb 15 '11 at 14:48
Side note: the first method listed on that page will fail because the code is executing before the DOM has been parsed. Moving the ` – Andy E Feb 15 '11 at 14:48
1

@Adeel: checking `Referer` isn't reliable either; many proxies and browser extensions strip it from requests. – Andy E Feb 15 '11 at 14:49
@VoronoiPotato Please try to summarize the information instead of only posting a link. – Dallin May 06 '15 at 16:23
@AndyE he has the javascript fire on the body load, I highly doubt that will execute before the dom has loaded.... – VoronoiPotato Oct 14 '15 at 18:34
1

For me, it always executes "if" condition and never executes "else" part, doesn't matter that whether I did page load or page refresh. – Parth Vora Feb 05 '16 at 14:26
On Chrome I get `Uncaught TypeError: Cannot read property 'visited' of undefined`. – vallentin Apr 02 '16 at 01:51

score 3 · Answer 8 · answered Aug 18 '20 at 23:14

3

Here is a method that is supported by nearly all browsers:

if (sessionStorage.getItem('reloaded') != null) {
    console.log('page was reloaded');
} else {
    console.log('page was not reloaded');
}

sessionStorage.setItem('reloaded', 'yes'); // could be anything

It uses SessionStorage to check if the page is opened the first time or if it is refreshed.

answered Aug 18 '20 at 23:14

Mointy

555
6
20

1

Does not work when re-opening a tab using ctrl/cmd+T – Nebulosar May 04 '22 at 12:46

score 3 · Answer 9 · answered Oct 27 '22 at 10:50

This implementation helped me:

From MDN reference 2022: Navigation Timing Level 2 specification

const navigationType = 
    (window.performance.getEntriesByType('navigation')
        [0] as PerformanceNavigationTiming).type;

const isPageReload = navigationType === 'reload';
const isNavigation = navigationType === 'navigate';
const isBackForwarad = navigationType === 'back_forward';
const isPrerender = navigationType === 'prerender';

score 1 · Answer 10 · edited Mar 14 '23 at 21:51

One easy solution has not been mentioned (not relying on the deprecated window.performance.navigation):

Use window.onbeforeunload to store the time and the URL of your current page (in localstorage) when the user leaves the page (potentially refreshes the page).
```
window.onbeforeunload = function(e)
{
    localStorage.setItem('reload-url', window.location.href);
}
```

Then use window.onload to get those values from localstorage.

window.onload = function(e)
{
    if (localStorage.getItem('reload-url') != null))
    {
        if (window.location.href == localStorage.getItem('reload-url'))
        {
            console.log('Reload');
        }
    }
}

If the recent URL matches the stored URL and if the stored time matches the current time (maybe with a tiny offset) then it is a page reload by the user.

score 0 · Answer 11 · answered Jan 02 '20 at 10:53

0

if(sessionStorage.reload) { 
   sessionStorage.reload = true;
   // optionnal
   setTimeout( () => { sessionStorage.setItem('reload', false) }, 2000);
} else {
   sessionStorage.setItem('reload', false);
}

answered Jan 02 '20 at 10:53

Alexis Gatuingt

490
6
20

1

this does not cover page turn vs. page reload – btx Dec 28 '22 at 13:39

score 0 · Answer 12 · edited Mar 14 '23 at 21:51

0

Append the below script in the console:

window.addEventListener("beforeunload", function(event) {
     console.log("The page is redirecting")
     debugger;
});

edited Mar 14 '23 at 21:51

Peter Mortensen

30,738
21
105
131

answered Nov 18 '20 at 06:35

sam ruben

365
2
6

1

even adding `load` will do a quick check if page is reloaded or not – Wardhan Dec 11 '20 at 14:09

score -1 · Answer 13 · answered Oct 12 '20 at 15:15

<script>
    
    var currpage    = window.location.href;
    var lasturl     = sessionStorage.getItem("last_url");

    if(lasturl == null || lasturl.length === 0 || currpage !== lasturl ){
        sessionStorage.setItem("last_url", currpage);
        alert("New page loaded");
    }else{
        alert("Refreshed Page");  
    }

</script>

score -3 · Answer 14 · answered Jul 24 '21 at 06:09

 document.addEventListener("keydown", (e)=>{
   if (e.keyCode === 116) {
     e.preventDefault();

      // your code here
      // var r = confirm("Reload!");
      // if (r == true)
      //  window.location.reload();
   }
 })

Here we used event listener 'keydown' because F1 - F12 keys are not available on browsers for 'keypress'.
116 is the keycode for 'F5'. Check here
'preventDefault()' will stop the default function of the key pressed. Here it stops direct refresh when F5 is pressed.
Then add your code.
When the alert is confirmed, 'location.reload()' will reload the page

Check if page gets reloaded or refreshed in JavaScript

14 Answers14

New standard 2018-now (PerformanceNavigationTiming)

PerformanceNavigationTiming.type

Check if page gets reloaded or refreshed in JavaScript

Support on 2021-11-09

Support on 2023-07-19

The following example illustrates this property's usage.

Linked

Related