Reload webpage using JavaScript

You have seen some websites which automatically refresh or reload the webpage after some specific time like 60 seconds. Also, you have noticed some website updates frequently.

Auto refresh functionality are generally used to provide fresh content to user without user needing to perform any type of action. Webpages like live score, result board, or news feed change data every time. In this tutorial, we will reload or refresh webpage using JavaScript or using meta tags.

Reload or Refresh Page Using JavaScript

Here, we will see how to reload a webpage using JavaScript. JavaScript has location() method which has much functionality related to webpage actions like reloading page, changing locations, and more.

The location object has information related to current variables like previous page, current URL, host name, or more. Here, we will use location.reload() method to refresh webpage with or without user interaction.

Below is a syntax for reload webpage using the location() function:

window.location.reload();
//OR
window.location.reload(true);

Here, reload method reloads page but it has optional parameter by boolean type. If you don't pass value then it will reload webpage from cache otherwise it will get fresh content from server.

Let's take example of manually reload page using button click first:

$("#btn").click(function() {
   location.reload(true);
});

In the above example, whenever user clicks on button it will reload webpage and display fresh content to user.

Here, we can also set a time for reloading webpage automatically with help of setTimeout() function like below example.

const myTimeout = setTimeout(reloadPage, 10000);

function reloadPage(){
   location.reload(true);
}

Here, we have defined timeout which will call our function every 10 seconds, and in function logic we have added code for reloading web page. So whenever a function is called web page reloads.

Reload page with Meta tag

This method doesn't require JavaScript code to add. But with meta tags, we can easily reload web page using HTML tags on specific time. Let's assume you have to reload webpage every minute then you can also use HTML meta tag for it.

We have meta tag inside the head tag of the HTML code, as in the case of every other meta tag. To set the time interval in seconds, we use the content attribute.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Reload Web page using JavaScript</title>
        <meta http-equiv="refresh" content="60">
    </head>
    <body>
        <h4>Reload Web page using JavaScript</h4>
    </body>
</html>

Conclusion

In this article, we have reloaded web pages using JavaScript and HTML tags. Both methods can be used to reload web page automatically so you can use it as per your requirements.