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.

37 Comments

Add a Comment

Your email address will not be published. Required fields are marked *