Auto Refresh Code in HTML using JavaScript, meta tags and JQuery
There are several ways to refresh the CURRENT WEB page or FRAME or Specific HTML element (any specific Div or Span or any HTML element) after a given time interval, that we can refresh any specific part/element of HTML page without reloading the complete page.
--> Using JavaScript.
--> Using meta tags.
--> Using JQuery.
JavaScript:
You can refresh a web page using JavaScript location.reloadmethod. This code can be called automatically upon an event or simply when the user clicks on a link.
By Simply click the Refresh link.
<a href = "javascript:location.reload(true)">Refresh Page</a>
Refresh the page automatically after a given time period
Try it.
<html>
<head>
<script type="text/JavaScript">
function AutoRefresh() {
setTimeout("location.reload(true);", 1000); // this will reload page after every 1 sec
}
</script>
</head>
<body onload="AutoRefresh();">
<p>This page will refresh every 5 seconds.</p>
</body>
</html>
Note: 1000 = 1 sec, if you want to 5 sec 1000*5 = 5000 ie., 5 sec
meta tags :
Meta refresh is a method of instructing a web browser to automatically refresh the current web page or frame after a given time interval, using an HTML meta element with the http-equiv parameter set to "refresh" and a content parameter giving the time interval in seconds. It is also possible to instruct the browser to fetch a different URL when the page is refreshed, by including the alternative URL in the content parameter. By setting the refresh time interval to zero (or a very low value), this allows meta refresh to be used as a method of URL redirection.
Examples
Place inside <head> to refresh page after 5 seconds:
<meta http-equiv="refresh" content="5">
Redirect your web Page(Eg: http://example.com/) after 5 seconds:
<meta http-equiv="refresh" content="5; url=http://example.com/">
Redirect to http://example.com/ immediately:
<meta http-equiv="refresh" content="0; url=http://example.com/">
Jquery:
Refresh HTML element (Div/Span) on HTML page after specific time:
In this part we will use JQuery to perform the task, as its provides few of the best options that can help us.
Suppose you have a span with ID as result similar to following:
<span id = “result”></span>
Then the JQuery code will be as follows:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
function autoRefresh_div()
{
$("#result").load("example.html");// a function which will load data from other file after x seconds
}
setInterval('autoRefresh_div()', 5000); // refresh div after 5 secs
</script>
Example :
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
function autoRefresh_div()
{
$("#result").load("example.html");// a function which will load data from other file after x seconds
}
setInterval('autoRefresh_div()', 5000); // refresh div after 5 secs
</script>
</head>
<body>
<span id = "result"></span>
</body>
</html>
Display the current time (the setInterval() method will execute the function once every 1 second, just like a digital watch).
<html>
<body>
<p>A script on this page starts this clock:</p>
<p id="demo"></p>
<script>
var myVar = setInterval(function(){ myTimer() }, 1000);
function myTimer() {
var d = new Date();
var t = d.toLocaleTimeString();
document.getElementById("demo").innerHTML = t;
}
</script>
</body>
</html>
Sample Output :
EmoticonEmoticon