Codewolfy - Learn Programming For free
Reload a Webpage using JavaScript

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

Auto refresh functionality are generally used to provide fresh content to user without user need to perform any type of action. Webpages like live score, result board or news feed changes 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 webpage using JavaScript. JavaScript has location() method which has many functionality related to webpage actions like reload page, change locations or 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 syntax for reload webpage using 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 for manually reload page using button click first:


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

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

Here, we can also set 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 reload web page. So whenever function is called web page reloads.

Reload page with Meta tag

This method doesn't require JavaScript code to added. 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 page using JavaScript and HTML tags. Those both methods can be used to reload web page automatically so you can use it as per your requirements

Share your thoughts

Ask anything about this examples