Cara menggunakan refresh page html automatically

Table of Contents Show

How do I make HTML refresh automatically?
How do I refresh every 10 seconds?
How do I refresh a web page every 5 seconds?
Can you set a web page to automatically refresh?

Table of Contents

How do I make HTML refresh automatically?
How do I refresh every 10 seconds?
How do I refresh a web page every 5 seconds?
Can you set a web page to automatically refresh?

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 h2 element in the HTML file. It contains style attribute to center align the text content.
The innerText for the h2 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>
    
    <h2 style="text-align: center">Counter</h2>
    <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 h2 element using the document.querySelector() method. We are setting the current value of the count variable as innerText of h2 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('h2').innerText = counter;
    counter++;
    if(counter > 5) location.reload();
}, 1000);

View Discussion

Improve Article

Save Article

Read

Discuss

View Discussion

Improve Article

Save Article

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.

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:

<!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 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:

<!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>

<h2>Welcome to GeeksforGeeks code</h2>

</body>

</html>

Output:

How do I make HTML refresh automatically?

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.

How do I refresh every 10 seconds?

“javascript reload page after 10 seconds” Code Answer.

<script>.

window. setInterval('refresh()', 10000);.

// Call a function every 10000 milliseconds..

// (OR 10 seconds)..

// Refresh or reload page..

function refresh() {.

window . location. reload();.

How do I refresh a web page every 5 seconds?

Open the web page that you want to automatically refresh at certain seconds of the interval. Then, click on the extension icon in your Chrome bar and select the interval time.

Can you set a web page to automatically refresh?

It's as simple as going to your browser's app/extension store and finding one you like: Launch your browser. Go to app/extension store (Chrome Web Store, Firefox Add-Ons, Microsoft Edge Add-ons Store, etc.). Enter “auto-refresh” in the search bar.