295

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.

Improve this question
4
  • 1
    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 Wizard
    Commented Feb 15, 2011 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
    Commented Feb 15, 2011 at 14:42
  • I want to make such as facebook link will be #!/anythinge I want to remove #! when page reload only
    – Ahmed
    Commented Feb 15, 2011 at 14:45
  • 1
    @Ahmed I am trying to do the same thing. Did any of the solutions below work for you?
    – Paul Fitzgerald
    Commented Jan 18, 2017 at 11:51

15 Answers 15

Reset to default
276

⚠️⚠️⚠️ 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

Improve this answer
13
  • 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
    Commented Aug 8, 2016 at 8: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
    Commented Feb 19, 2017 at 9:28
  • 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
    Commented Dec 5, 2017 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
    Commented Feb 16, 2018 at 11:17
  • 1
    Shouldn't the 2nd if and the else be inside the first one?
    – Matthias
    Commented Aug 27, 2019 at 17:35
123

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

Table of support

Support on 2023-07-19

Table of support 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);
  }
}
Improve this answer
8
  • 23
    +1 for pointing out the deprecated API, but -100 to Apple for their lack of support in iOS still into 2020
    – kinakuta
    Commented Feb 3, 2020 at 20:24
  • 4
    Thanks for pointing that out. So here's the full compatible solution: jsfiddle.net/j9o1khcw/2
    – garzj
    Commented Nov 19, 2020 at 15:25
  • 1
    @0nline I tried your solution and it did not work for me FYI.
    – kennysong
    Commented Nov 19, 2020 at 16:43
  • @kennysong Try it outside jsfiddle or in your devtools
    – garzj
    Commented Nov 20, 2020 at 18:42
  • 2
    @Илья 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
    Commented Sep 25, 2022 at 4:52
45

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.

Improve this answer
6
  • 40
    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
    Commented May 19, 2015 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
    Commented Apr 7, 2021 at 9: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
    Commented Aug 12, 2021 at 10:32
  • this does not cover page turn vs. page reload
    – btx
    Commented Dec 28, 2022 at 13:37
  • @kuzroman, seems to be working fine, even when reopened after closing
    – 27px
    Commented Jul 13, 2023 at 8:43
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()">
Improve this answer
8
  • 15
    What about returning users?
    – Red Taz
    Commented Dec 21, 2012 at 13:30
  • 7
    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
    Commented Aug 19, 2013 at 17:07
  • 1
    @Brannon - The cookie is a created without any expires value and will be destroyed when the browser is closed.
    – techfoobar
    Commented Aug 19, 2013 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
    Commented Aug 19, 2013 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
    Commented Aug 19, 2013 at 17:54
15

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.

Improve this answer
1
  • this is not working in safari. the returned array is empty.
    – char m
    Commented Feb 25, 2021 at 12:06
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.

Improve this answer
3
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>

Improve this answer
7
  • We can also check by checking Referer property and modify server response on the basis of this property
    – Adeel
    Commented Feb 15, 2011 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 <script> element to the bottom would work - but it's still not a guaranteed solution (and neither is the cookie method).
    – Andy E
    Commented Feb 15, 2011 at 14:48
  • 1
    @Adeel: checking Referer isn't reliable either; many proxies and browser extensions strip it from requests.
    – Andy E
    Commented Feb 15, 2011 at 14:49
  • @VoronoiPotato Please try to summarize the information instead of only posting a link.
    – Dallin
    Commented May 6, 2015 at 16:23
  • 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
    Commented Feb 5, 2016 at 14:26
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.

Improve this answer
1
  • 1
    Does not work when re-opening a tab using ctrl/cmd+T
    – Nebulosar
    Commented May 4, 2022 at 12:46
2

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

  1. 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);
}

  2. 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');
        }
    }
}

  3. 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.

Improve this answer
2

This implementation helped me:

From MDN reference 2022: Navigation Timing Level 2 specification

/** @var PerformanceNavigationTiming */
const navigationEntry = window.performance.getEntriesByType('navigation')[0];
const navigationType = navigationEntry.type;

const isPageReload = navigationType === 'reload';
const isNavigation = navigationType === 'navigate';
const isBackForwarad = navigationType === 'back_forward';
const isPrerender = navigationType === 'prerender';
Improve this answer
6
  • This is TypeScript, the OP wants the answer in JavaScript.
    – Silvio Guedes
    Commented Sep 27, 2023 at 21:13
  • 1
    @SilvioGuedes my apologies, code updated
    – btx
    Commented Sep 27, 2023 at 22:43
  • Code deprecated since 2018.
    – Olivier C
    Commented Nov 23, 2023 at 3:08
  • @OlivierC There is no deprecation notice on them MDN page, and the article seems to be very much up to date. Please provide a source for your info, thx!
    – btx
    Commented Nov 24, 2023 at 15:45
  • @btx: Indeed, mea culpa, I confused it with Performance.navigation. If you edit your message I will modify my note.
    – Olivier C
    Commented Nov 26, 2023 at 3:26
1

In JavaScript (2023):

if (window.performance.getEntriesByType) {
    if (window.performance.getEntriesByType("navigation")[0].type === "reload") {
        alert("reloaded");
    }
}
Improve this answer
0 
if(sessionStorage.reload) { 
   sessionStorage.reload = true;
   // optionnal
   setTimeout( () => { sessionStorage.setItem('reload', false) }, 2000);
} else {
   sessionStorage.setItem('reload', false);
}
Improve this answer
1
  • 1
    this does not cover page turn vs. page reload
    – btx
    Commented Dec 28, 2022 at 13:39
0

Append the below script in the console:

window.addEventListener("beforeunload", function(event) {
     console.log("The page is redirecting")
     debugger;
});
Improve this answer
2
  • 1
    even adding load will do a quick check if page is reloaded or not
    – Wardhan
    Commented Dec 11, 2020 at 14:09
  • the problem is that it's triggering even on closing the tab. summary on 2 events (closing the tab and refreshing the page).
    – Adi Dasler
    Commented May 6 at 7:41
-1 
<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>
Improve this answer
-5 
 document.addEventListener("keydown", (e)=>{
   if (e.keyCode === 116) {
     e.preventDefault();

      // your code here
      // var r = confirm("Reload!");
      // if (r == true)
      //  window.location.reload();
   }
 })
  1. Here we used event listener 'keydown' because F1 - F12 keys are not available on browsers for 'keypress'.
  2. 116 is the keycode for 'F5'. Check here
  3. 'preventDefault()' will stop the default function of the key pressed. Here it stops direct refresh when F5 is pressed.
  4. Then add your code.
  5. When the alert is confirmed, 'location.reload()' will reload the page
Improve this answer

Not the answer you're looking for? Browse other questions tagged or ask your own question.