3

I would like to execute a JavaScript function after a web-page was refreshed (any way: F5 key, browser's refresh key, user re-enter same URL or any other method). This method should be execute only after refresh, not after 1st page-load.

Something like:

window.onrefresh = function() { ... }; // of curse, onrefresh isn't real event

I find some solutions in the web, but none meet my needs:

Dirty Flag

This method is simple, on load check flag - if flag not exist this is first load, else set the flag:

  • Save flag in local-storage/cookie. The flag can be current Date/Time. If on-load flag not exist create it - this is first load. Else if flag exist compare it to current Date/Time - after refresh.
  • Save the flag in the site URL. The flag will be '#' sign ('#' - will not change the site Navigation). Same as before on-load test if '#' exist at the end of the URL this is "refresh" load, else this is a first load - we need to add a '#' at the end of the URL.

performance.navigation

The window object has this property: window.performance.navigation.type which can have 3 values:
0 - Page loaded due to link
1 - Page Reloaded
2 - Page loaded due to Back button
However this not working as expected. This value is always "1", on both first load and after refresh.

markus s
  • 1,024
  • 1
  • 11
  • 20
Gil Epshtain
  • 8,670
  • 7
  • 63
  • 89
  • 2
    Possible duplicate of [Check if page gets reloaded or refreshed in Javascript](https://stackoverflow.com/questions/5004978/check-if-page-gets-reloaded-or-refreshed-in-javascript) – Daniel Beck Jul 03 '18 at 13:47
  • So `performance.navigation.type == performance.navigation.TYPE_RELOAD` is not working for you? – epascarello Jul 03 '18 at 13:50
  • @epascarello, no it isn't and according to the specs you can test if back button was clicked, not the refresh button. – Gil Epshtain Jul 03 '18 at 13:51
  • 1
    @GilEpshtain maybe you should post browser, OS and their versions in order to reproduce the issue with `performance.navigation.type == performance.navigation.TYPE_RELOAD` since for other devs it seems to work. – lealceldeiro Jul 03 '18 at 13:57
  • 1
    You could set a cookie on first load or a parameter at the window storage – L4B0MB4 Jul 03 '18 at 13:58
  • have you tried Navigation Timing API. – Iswar Jul 04 '18 at 09:02
  • @IswarKChettri - No can you please elaborate – Gil Epshtain Jul 04 '18 at 09:03
  • might be useful in your case https://developer.mozilla.org/en-US/docs/Web/API/Navigation_timing_API. Here you can find `performance.navigation.type` which has value 1 when refresh.... – Iswar Jul 04 '18 at 09:07

1 Answers1

1

You can use the Navigation Timing API to gather performance data on the client side which you can then transmit to a server using XMLHttpRequest or other techniques. A Performance object offers access to the performance and timing-related information from the browser.

We can do so by using Navigation Timing API. The main interface of Navigation Timing API for your requirement is performance.navigation.type which checks the URL loaded in browser for the first time or it is loaded. Here is the sample.

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
 <head>
    <meta charset="utf-8" />
    <title></title>

    <script>
        if (window.performance) {
            alert("Browser Supports");
        }
        if (performance.navigation.type == 1) {
            alert("Reloaded"); 
        } else {
            alert("Not Reloaded"); 
        }
    </script>
 </head>
 <body>
    <h2>testing</h2>
 </body>
</html>

Hope it helps you

Iswar
  • 2,211
  • 11
  • 40
  • 65