Automatically Refresh HTML page or div after some Interval

Posted 6 years ago By Ajay Gupta 174079

In this post, I will let you know how to refresh HTML page after some time interval automatically.

There are so many ways to refresh page after defined time interval.

You can use the JavaScript function location.reload() to refresh active page.

Example 1: Reload page using JavaScrip setTimeout Method

<!DOCTYPE html>
<html>
<head>
    <title>Reload page after 5 seconds</title>
    <script>
       setTimeout(function(){
           location.reload();
       },5000); // 5000 milliseconds means 5 seconds.
    </script>
</head>
<body>
<h1>Welcome to Expert PHP !</h1>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
	<title>Reload page after 5 seconds</title>
    <script>
       setTimeout(function(){
           location.reload();
       },5000); // 5000 milliseconds means 5 seconds.
    </script>
</head>
<body>
<h1>Welcome to Expert PHP !</h1>
</body>
</html>

Above script will refresh your HTML page after every 5 seconds.

setTimeout() method is used to set a timer which executes a method or specified piece of code after a specified number of milliseconds.

Hint:

1000 ms = 1 second.

Example 2 : Reload page using JavaScrip setInterval Method

<!DOCTYPE html>
<html>
<head>
    <title>Reload page after 5 seconds</title>
    <script>
    function autoRefresh()
    {
        window.location = window.location.href;
    }
     setInterval('autoRefresh()', 5000);
    </script>
</head>
<body>
<h1>Welcome to Expert PHP !</h1>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
	<title>Reload page after 5 seconds</title>
    <script>
	function autoRefresh()
	{
		window.location = window.location.href;
	}
	 setInterval('autoRefresh()', 5000);
	</script>
</head>
<body>
<h1>Welcome to Expert PHP !</h1>
</body>
</html>

setInterval() method is used to call the function continuously until clearInterval() is called.

Example 3 : Reload page using meta tag in head tag

<!DOCTYPE html>
<html>
<head>
    <title>Reload page after 5 seconds</title>
    <meta http-equiv="refresh" content="5" />
</head>
<body>
<h1>Welcome to Expert PHP !</h1>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
	<title>Reload page after 5 seconds</title>
    <meta http-equiv="refresh" content="5" />
</head>
<body>
<h1>Welcome to Expert PHP !</h1>
</body>
</html>

http-equiv="refresh" will refresh automatically and a content parameter giving the time interval in seconds.

Try this code and feel free to give you suggestion.

Automatically Refresh HTML page or div after some Interval

Automatically Refresh HTML page or div after some Interval

Tags :

Related Posts

What is HTML and why HTML is important

What are HTML tags

What is HTML Editor vs Text Editor

How to use local storage for JavaScript

How to Install Sublime Text Editor 3 in Ubuntu with License Keys ?