October 3, 2021

How to Auto Refresh Web Page Every 5 Seconds using Javascript and HTML

By Krishnaa JavaScript Questions 0 Comments

In this tutorial, you will learn how to auto refresh web page every 5 seconds using javascript and HTML. Auto refresh also known as auto reload. Generally, we auto refresh any web page either by using the F5 key on our keyboard or by clicking on reload option in the context menu.

Auto refreshing a web page programmatically could be tricky for most newbie developers and today, I am going to share my approach on this. There are 2 possible solutions to auto refresh a web page.

The first solution involves only HTML and the second solution involves only javascript. Depending upon your requirement, you can choose one out of these two.

For the HTML auto refresh solution, we will make use of meta element with http-equiv and content attributes. We simply need to set refresh as the value of http-equiv attribute. Also, we want to auto refresh the web page every 5 seconds and for that reason, we will set 5 as the value of the content attribute.

For the javascript auto refresh solution, we will make use of reload() method which is part of the location object. To simulate a delay of 5 seconds before each auto refresh, we will make use of the setInterval() method.

In the following example, we will cover both the solution mentioned above. We will simply display a counter of 5 seconds on the screen and as soon as it completes, the auto refresh will be triggered. Please have a look over the code example and the steps given below.

HTML & CSS

We have an h1 element in the HTML file. It contains style attribute to center align the text content.
The innerText for the h1 element is “Counter” and we will update it dynamically using javascript to display the number of seconds before redirection.
We have also included our javascript file script.js with a script tag at the bottom.

HTML Auto Refresh

We have added a meta element with http-equiv and content attributes in the head element.
The value of http-equiv is set to refresh. It will help us in refreshing the page.
The value of the content attribute is set to 5 and this means that wait for 5 seconds before refreshing the page.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">    
    <!-- <meta http-equiv="refresh" content="5">     -->
    <title>Document</title>
</head>
<body>
    
    <h1 style="text-align: center">Counter</h1>
    <script src="script.js"></script>
</body>
</html>

Javascript Auto Refresh

We have one global variable count and that holds a value of 1.
We are using the setInterval() method with a delay of 1 second. It will take an anonymous method as its first parameter which will be executed after each interval of 1 second.
In the anonymous method, we have selected the h1 element using the document.querySelector() method. We are setting the current value of the count variable as innerText of h1 element and incrementing the value of count by 1.
We are using the if statement to verify whether the count has reached number 5 or not. If yes, we are going to make use of reload() method of location object to trigger an auto refresh.

let counter = 1;
setInterval(() => {
    document.querySelector('h1').innerText = counter;
    counter++;
    if(counter > 5) location.reload();
}, 1000);

You May Also Like: