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.reload
method. 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 :
No comments:
Post a Comment