Suppose we have given an HTML document and the task is to automatically refresh the webpage after a certain period of time in the web browser. We will predefine a time period and the browser automatically refreshes the webpage.
This can be done in two ways:
Example: You are creating an auto-refreshing website that needs to be refreshed after a certain smaller period of time. So, in this case, you can use the meta http-equiv tag to refresh the webpage. Another illustration of this http-equiv tag is that it can be used to reload a weather website that needs to be updated after every small interval of time to show the minute weather changes.
Approach 1: One can auto-refresh the webpage using the meta tag within the head element of your HTML using the http-equiv property. It is an inbuilt property with HTML 5. One can further add the time period of the refresh using the content attribute within the Meta tag.
The HTTP equiv attribute can be used to simulate an HTTP response header. The attribute is supported by all major web browsers such as Google Chrome, Mozilla Firefox, Microsoft Edge, Safari, Opera Mini, etc.
Syntax:
<meta http-equiv="refresh" content="10">
Example: This example shows the above-explained approach.
html
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta http-equiv="refresh" content="10">
</head>
<body>
<h2>Welcome To GFG</h2>
<p>The code will reload after 10s.</p>
</body>
</html>
|
Output:
Approach 2: Using setInterval() method.
Another method to access the auto-refresh property of the webpage is by using the following JavaScript code until ClearInterval() is called, setInterval() will continue to call itself continuously.
Syntax:
<script>
function autoRefresh() {
window.location = window.location.href;
}
setInterval('autoRefresh()', 5000);
</script>Example: This example shows the above-explained approach.
html
<!DOCTYPE html>
<html>
<head>
<title>
Reloading page after 5 seconds
</title>
<script>
function autoRefresh() {
window.location = window.location.href;
}
setInterval('autoRefresh()', 2000);
</script>
</head>
<body>
<h1>Welcome to GeeksforGeeks code</h1>
</body>
</html>
|
Output:
