How to Refresh/Reload Page or Part of the Page Automatically
Here I am going to show different methods to refresh/reload the page or part of the page automatically in certain period of time.
Simplest way to refresh whole page is by using meta tag as below:
<meta http-equiv="refresh" content="30;url=index.html">Above code refreshes the page for every 30 seconds.
if you don’t want to use meta tag as some browsers won’t support, you can do this by using Javascript as below:
<script type="text/javascript">
window.onload = setupRefresh;
function setupRefresh() {
setTimeout("refreshPage();", 30000); // milliseconds
}
function refreshPage() {
window.location = location.href;
}
</script>Above code reloads the page for every 30 seconds.
setTimeout() allows you to specify that a piece of JavaScript code (called an expression) will be run a specified number of milliseconds from when the setTimeout() method was called. The general syntax of the method is:
setTimeout ( expression, timeout );where expression is the JavaScript code to run after timeout milliseconds have elapsed.
Refreshing part of a page periodically
Using Frames
Divide the page using frames and load different pages in each frame as below:
<html>
<head>
<title></title>
</head>
<frameset id="cntfrm" cols="250,*">
<frame src="index1.html" scrolling="auto" frameborder="1" />
<frame src="index2.html" scrolling="auto" />
</frameset>
</html>In the above two parts, if you want to reload particular part of the page, then use the above meta tag or Javascript approach in frame source html page.
Or
You can use the frame “reload” function periodically in frameset page itself.
<html>
<head>
<script type="text/javascript">
window.onload = setupRefresh;
function setupRefresh() {
setInterval("refreshFrame();", 1000);
}
function refreshFrame() {
parent.right_frame.location.reload();
}
</script>
</head>
<frameset id="cntfrm" cols="250,*">
<frame name="left_frame" src="test.html" scrolling="auto" frameborder="1" />
<frame name="right_frame" scrolling="auto" src="test2.html" />
</frameset>
</html>
In the above code, “right_frame” reloads every second.
setInterval() function is very closely related to setTimeout() – both have similar syntax:
setInterval ( expression, interval );The important difference is that, whereas setTimeout() triggers expression only once, setInterval() keeps triggering expression again and again (unless you tell it to stop). You can stop setInterval() by calling method clearInterval().
Without Frames
We can reload the particular block of the page using Javascript. Here, I am going to explain this with display time on a page which reloads every second.
<html>
<head>
<title></title>
<script type="text/javascript">
window.onload = startInterval;
function startInterval()
{
setInterval("startTime();",1000);
}
function startTime()
{
document.getElementById('time').innerHTML = Date();
}
</script>
</head>
<body>
<div id="time"></div>
</body>
</html>
Above code will display time with seconds on a page and refreshes div (id “time”) block every second to show the exact time.
If you are using a JQuery, then use the “load” function to load the page in div block.
<script type="text/javascript">
window.onload = setupRefresh;
function setupRefresh()
{
setInterval("refreshBlock();",30000);
}
function refreshBlock()
{
$('#block1').load("index.html");
}
</script>
<body>
<div id="block1"></div>
<div id="block2"></div>
</body>
In the above code, index.html page loads every 30 seconds in div with id “block1”.
Note: Due to browser security restrictions, most “Ajax” requests are subject to the same origin policy; the request can not successfully retrieve data from a different domain, subdomain, or protocol.
About Author
Good article! Keep it up!
nice one
Useful post.
Thanks
Thank you. 🙂
Helped me out, thanks good job!
thanks, I use this for my project.
Are those script works on Blogspot platform?
I’ve placed some COUNTDOWN TIMER script on my blog, So, i want to make my Page reload if the COundown Timer finished. This CountDown script allow me to set into an exact Date and time, like 4/12/2012 at 9.35 PM. How about those Script?
call the refreshPage only when your counter finished, like this :
function setupRefresh() {
if(count_down_timer) {
setTimeout(“refreshPage();”, 1000); // milliseconds
}
}
How do you refresh only once after 1 second?
you just need to add some hash on first load and don’t refresh if it has hash, like this:
window.onload = setupRefresh;
function setupRefresh() {
if(!window.location.hash) {
setTimeout(“refreshPage();”, 1000); // milliseconds
}
}
function refreshPage() {
window.location += ‘#loaded’;
window.reload();
}
If your url already has hashes then append and look for the added hash or use the query parameters.
Hi ,
Can you please tell me is it possible that I can set a BSP parameter dynamically whenever the page is refreshed i tried doing so but it sets the value the first time the page is loaded .
window.onload = setupRefresh;
function setupRefresh()
{
setTimeout(“refreshPage();”, 60000);
}
function refreshPage()
{
window.location = location.href;
}
The value 21 is being set the first the window is loaded . Is there any way i can set this value only after the first refresh ? Please let me know
Thanks for this tutorial.
Im looking for it from very long time.
Via jquery it stops working if i need to refresh two different divs, with different urls on same page….
Web site has been made: for example, 01/01/2012, 05/30/2012 redesigned.
It is accessed 02/02/2012. How to make a page reload after 05/30/2012. . If you visit site the first time after 30/05/2012, must not be automatically re-load. How to do it.
thank you
Will this work with a div ‘header’ where the header is php rotating image? I have php rotating image that works great easy to + or – images, but want to have it rotate. This looks like much simpler way if can refresh the div that is image rotation, rather than load every photo into an array and use js to make slide show.
Will try it as soon as ftp uploader working – issues with Godaddy.
Any one have any other ideas on how to do this.
if i want to use this same for advertisement, only advertisement will reload after several sec then what i have to do???
ur suggestion was very much helpful. but when the back button is used the one time refresh technique u specified is not working for a page. give me a soln.
Hi,
How to refresh a page only once per a visitor? I do not want to refresh it on time babsis. I want it by visitor basis? Is it possoble?.. Pelase suggest..
Apperciate if you can respond soon..
Thanks in advance
Reddy
its really nice code…thanks
Nice article! It actually was the perfect little snippet i needed for my app, Thank you
Nice article and thanks for sharing the codes. it helped me alot.
Can we realod multiple pages like for Eg: google, yahoo, gmail. by using buttom?
i have a a select,and i have to call window.reload on change of select.
how to change title of that page and retain the value selected during refresh.
Thanx a lot! useful article.
Thanks alot, very good article
please help me i cant figure this out, i would like to use the time vision by it should refresh my div myposts to show new content not the time
Excellent code, thanks! But I would like to ask regarding the “Without Frames” example, in case instead of Date() we would like to refresh the existing content …, which would be the code?
In my case, I use a div which includes some javascripts that get some info from a server and print this info on the webpage, so I would like to update the script execution every few seconds.
Thanks
Doc did you ever figure out how to do what you were asking about refresh a div instead of adding the date and time?
very good for beginners like me
window.onload = startInterval;
function startInterval()
{
setInterval(“startTime();”,1000);
}
function startTime()
{
document.getElementById(‘time’).innerHTML = Date();
}
This is so close to what
I want, but instead of refreshing the date every second how would I refresh a certain div id every second using on javascript no ajax?
i face this kind of error in Jquery and frame example
ReferenceError: setupRefresh is not defined
reply fast
hi
It’s a nice post.Thanks for sharing.
I really needed this code, and I do appreciate. I’ll try it now and see whether it works on my site
That was a great post. I really needed that code
The code makes alot of sense. You work is really helpful. Thanks for sharing
very good, I use it on my blog
ThatÂ’s more than sensblie! ThatÂ’s a great post!