Home > Article > Web Front-end > How to automatically refresh web pages at regular intervals?
How to automatically refresh web pages at regular intervals?
- 王林forward
- 2023-09-04 11:21:063167browse
We can automatically refresh the web page by using the "meta" tag with the "http-equiv" attribute, or using the setInterval() browser API. There are certain use cases for automatically refreshing a website, for example, when creating a weather lookup web application, we may want to refresh our website after a set interval in order to show the user nearly accurate weather data for a certain location.
Let’s take a look at the two methods below to learn how to set up an auto-refresh website.
Method 1
In this method we will use the "http-equiv" attribute of the "meta" tag to refresh our web after a specific interval passed in the "content" attribute app. The HTML5 specification provides us with meta tags by default.
Syntax
<meta http-equiv="refresh" content="n">
The "n" here is a positive integer, indicating the number of seconds to refresh the page.
Example
In this example, we will use the "http-equiv" attribute of the "meta" tag to refresh our web application 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"> </head> <body> <h3>How to Automatic Refresh a web page in fixed time?</h3> </body> </html>
Method 2
In this method, we will use the "setInterval()" API provided to us by the browser, which allows us to run a piece of code after a certain period of time, Both of these are passed as parameters to the browser API.
Syntax
setInterval(callback_fn, time_in_ms)
"setInterval()" has 2 parameters, the first is the callback function that is triggered 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 every 2 seconds.
<!DOCTYPE html>
<html lang="en">
<head>
<title>How to Automatic Refresh a web page in fixed time?</title>
</head>
<body>
<h3>How to Automatic Refresh a web page in fixed time?</h3>
<script>
window.onload = () => {
console.clear()
console.log('page loaded!');
setInterval(() => {
window.location = window.location.href;
}, 2000)
}
</script>
</body>
</html>Conclusion
In this article, we learned how to automatically refresh our web application after a fixed time using two different methods, HTML5 and JavaScript. In the first method, we use the "http-equiv" attribute of the "meta" tag, and in the second method, we use the "setInterval" browser API.
The above is the detailed content of How to automatically refresh web pages at regular intervals?. For more information, please follow other related articles on the PHP Chinese website!