Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to Automatic Refresh a web page in a fixed time?
We can auto-refresh a web page by either using a "meta" tag with the "http-equiv" property, or by using the setInterval() browser API. Automatic refreshing websites have certain use cases for example, while creating a weather-finding web application, we may want to refresh our website after a set interval of time to show the user the near-exact weather data for a location.
Let's look at the 2 approaches below to understand how to set up an auto-refreshing website.
Method 1: Using Meta Tag
In this approach, we will use the "http-equiv" property of a "meta" tag to refresh our web application after a particular interval of time which is passed in its "content" attribute. The meta tag is provided to us by default in the HTML5 specification.
Syntax
<meta http-equiv="refresh" content="n">
Here, "n" is a positive integer that refers to the number of seconds to refresh the page after.
Example
In this example, we will use the "http-equiv" property of a "meta" tag to refresh our web application after every 2 seconds
<!DOCTYPE html>
<html lang="en">
<head>
<title>How to Automatic Refresh a web page in fixed time?</title>
<meta http-equiv="refresh" content="2">
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
padding: 50px;
background-color: #f0f8ff;
}
.refresh-time {
color: #007acc;
font-weight: bold;
}
</style>
</head>
<body>
<h3>Auto-Refresh Demo (Meta Tag Method)</h3>
<p>This page refreshes every <span class="refresh-time">2 seconds</span></p>
<p>Current time: <span id="time"><script>document.write(new Date().toLocaleTimeString());</script></span></p>
</body>
</html>
A centered page with blue background displays "Auto-Refresh Demo" with the current time. The entire page refreshes every 2 seconds, showing the updated time.
Method 2: Using JavaScript setInterval()
In this approach, we will use the "setInterval()" API given to us by the browser, which allows us to run a certain piece of code after every certain amount of time.
Syntax
setInterval(callback_function, time_in_milliseconds)
"setInterval()" takes 2 parameters: first is a callback function that triggers after the delay, and the second is the delay provided in milliseconds.
Example
In this example, we will use the "setInterval()" browser API to refresh our web application after every 2 seconds
<!DOCTYPE html>
<html lang="en">
<head>
<title>How to Automatic Refresh a web page in fixed time?</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
padding: 50px;
background-color: #f5f5dc;
}
.refresh-time {
color: #d2691e;
font-weight: bold;
}
.countdown {
font-size: 1.2em;
color: #ff6347;
font-weight: bold;
}
</style>
</head>
<body>
<h3>Auto-Refresh Demo (JavaScript Method)</h3>
<p>This page refreshes every <span class="refresh-time">2 seconds</span></p>
<p>Refreshing in: <span class="countdown" id="countdown">2</span> seconds</p>
<script>
let countdownValue = 2;
const countdownElement = document.getElementById('countdown');
// Update countdown every second
const countdownInterval = setInterval(() => {
countdownValue--;
countdownElement.textContent = countdownValue;
if (countdownValue === 0) {
countdownElement.textContent = '2';
countdownValue = 2;
}
}, 1000);
// Refresh page every 2 seconds
setInterval(() => {
window.location.reload();
}, 2000);
</script>
</body>
</html>
A centered page with beige background displays "Auto-Refresh Demo" with a countdown timer showing "2, 1, 2, 1..." in red text. The page refreshes every 2 seconds using JavaScript.
Key Differences
| Method | Control | Browser Support | User Experience |
|---|---|---|---|
| Meta Tag | Fixed interval only | Universal | Hard refresh (full reload) |
| JavaScript | Conditional/dynamic refresh | Modern browsers | Can show countdown/progress |
Conclusion
Both methods effectively refresh web pages automatically. The meta tag approach is simpler and universally supported, while the JavaScript method offers more control and better user experience with countdown timers or conditional refreshing based on user activity.
9K+ Views
