How to Refresh/Reload Page or Part of the Page Automatically
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″.
Source: j.mp
1 Notes/ Hide
-
kuswandanu likes this
-
kloningspoon posted this
Darto KLoning - We Share Because We Care
