Determining when a webpage first loads vs. being refreshed in JavaScript

Question

Determining when a webpage first loads vs. being refreshed in JavaScript

I require the execution of a JavaScript function to occur after a web page has been refreshed, regardless of the method used (such as pressing F5, clicking the browser's refresh button, or re-entering the same URL). This action should only take place upon a page refresh, not during the initial page load.

Something along these lines:

window.onrefresh = function() { ... }; // of course, 'onrefresh' is not a real event

While I have come across some solutions on the web, none of them entirely meet my requirements:

Dirty Flag

This approach is quite straightforward - upon loading, check for a flag. If the flag does not exist, it signifies the first load, otherwise set the flag:

Store the flag in either local storage or a cookie. The flag could be based on the current Date/Time. If the flag is not present on load, create it - indicating the first load. Otherwise, compare it with the current Date/Time after the refresh.
Include the flag in the site's URL by using the '#' symbol ('#' will not alter site navigation). Similar to before, test for the presence of '#' at the end of the URL on load; if found, it indicates a "refresh" load, if not, this is the first load - thus add a '#' to the end of the URL.

performance.navigation

The window object features the property:

window.performance.navigation.type

, which can have 3 possible values:
0 - Page loaded due to a link
1 - Page reloaded
2 - Page loaded due to the Back button
Nevertheless, this solution does not function as expected. The value returned is always "1", irrespective of whether it is the initial load or a refresh.

javascript page-refresh

Answer 1

Answer №1

Utilize the Navigation Timing API to collect performance data on the client side, which can then be sent to a server using XMLHttpRequest or other methods. The Performance object provides access to browser performance and timing information.

We achieve this by leveraging the Navigation Timing API. The primary interface of the Navigation Timing API for your needs is performance.navigation.type, which determines whether the URL is being loaded in the browser for the first time or if it's a reload. Below is an example:

<!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>

I hope this solution proves helpful for you.

Answer 2

Utilize the Navigation Timing API to collect performance data on the client side, which can then be sent to a server using XMLHttpRequest or other methods. The Performance object provides access to browser performance and timing information.

We achieve this by leveraging the Navigation Timing API. The primary interface of the Navigation Timing API for your needs is performance.navigation.type, which determines whether the URL is being loaded in the browser for the first time or if it's a reload. Below is an example:

<!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>

I hope this solution proves helpful for you.

Determining when a webpage first loads vs. being refreshed in JavaScript

Dirty Flag

This approach is quite straightforward - upon loading, check for a flag. If the flag does not exist, it signifies the first load, otherwise set the flag:

performance.navigation

Answer №1

Similar questions

What is the reason for AngularJS not utilizing the most recently assigned value?

What could be causing React to throw an invalid hook error when using useRoutes?

Utilizing HTML5 data attributes to store intricate JSON objects and manipulate them using JavaScript

bcrypt is failing to return a match when the password includes numeric characters

Creating a stunning image carousel in Vue by integrating a photo API: step-by-step guide

Invoking a function in a Node.js backend from an Angular frontend application

Top tips for resolving Swiper Js initial loading issues in a Carousel!

How can I retrieve data using the angular method instead of the traditional $.ajax approach? Is $http a suitable replacement for $.ajax in Angular?

The issue persists with UIkit modal element remaining in the DOM even after the parent component in Vue.js is destroyed

Restrict the input to only allow for parentheses, disallowing any letters or numerical characters

Is there a way for me to limit my usage of the async keyword in my code

Tips for disabling the default behavior by using preventDefault in JavaScript

Loading Java Script files in real-time

What is the best way to retrieve user data for showcasing in a post feed using firebase's storage capabilities?

What measures do websites such as yelp and urbandictionary implement to avoid multiple votes from unregistered users?

What could be causing the removeChild() method to fail when trying to delete a list item in JavaScript DOM manipulation?

Include criteria in my ajax call (conditional statements)

Having trouble with Express router behaving unexpectedly in a subdirectory

Encountering Errors with Angular JS Following Update from Version 1.1.0 to 1.1.1

Fill in a Checkbox