Auto Refresh in Javascript

There are times when we will need a page to be automatically refreshed. This is mainly seen in pages where the data varies with time and needs to be constantly updated over the timeframe. Eg: Live Score Cards, Live Election results etc. There are two ways by which we can perform a HTML Page refresh.

   i) Using the HTML META tag in the header of the page
   ii) Using Javascript - Location.reload


Using Meta Header Tag

        This way is useful when the user has disabled javascript on his browser. You need to place the below code inside your webpage’s Head tag.
<head>
<meta http-equiv="refresh" content="60" />
</head>
        The value of the content attribute determines the time interval (in seconds) for the page refresh. The above code will automatically refresh the page in 1 minute (60 seconds).

Using Javascript

        The Location.reload method forces a reload of the window's current document, i.e. the one contained in the Location.href property. The below javscript function will automatically reload the page after the given time period. In the below function the refresh interval (in milliseconds) is passed as the method argument.
function autoRefresh(refreshPeriod) {
    setTimeout("window.location.reload();",refreshPeriod);
}
The function then needs to be called from the HTML Body tag’s onLoad event.
<body onload="autoRefresh(60000);">
        This will cause the page to be refreshed every 1 minute (60000 milliseconds = 60 seconds) after it have been loaded.

        The location.reload method behaves in exactly the same way as the browser's reload button which, by default reloads from the cache. If, however, the user wants to reload the document from the server (for fetching an updated version), he can do so by supplying 'true' as the parameter to the reload method. Thus location.reload(true) will force the page to be loaded from server rather than from the cache.

        Having an automatic page refresh might be quite annoying sometimes, as reloading a content rich page might consume considerable bandwidth for the user, thus resulting in a bad interaction experience with the website. This can be avoided by having a User interactive refresh rather than an auto refresh. This can be done by calling the location.reload method on a Link.
<a href=" window.location.reload();"> Refresh this page </a>
Or you can do this using a button click.
<input type="button" value="Reload Page" onClick="window.location.reload();">
        This will cause the page to be reloaded instantly. The link will cause the page to be reloaded from the cache, while click on the button will cause the page to be reloaded from server.

There is also another way in javascript to refresh a page using window.location
<input type="button" value="Reload Page" onClick=" window.location = document.URL;">
        The minus with this approach is that, this will not reload the page if there is a hash (#) in the URL.

Meta Refresh vs. Javascript Refresh

        Meta refresh usage is discouraged by the W3C over other methods. Therefore you should use JavaScript as your primary means for automatic page refreshes and a META tag as your fallback.
Below are the drawbacks of using Meta tag for refresh:
  • If a page redirects too quickly (less than 2-3 seconds), using the "Back" button on the next page may cause some browsers to move back to the redirecting page, whereupon the redirect will occur again. This is bad for usability, as this may cause a reader to be "stuck" on the last website.
  • A reader may or may not want to be redirected to a different page, which can lead to user dissatisfaction or raise concerns about security

You can find the entire code along with html from below.

<html>
<head>
<noscript>
    <meta http-equiv="refresh" content="60" />
</noscript>
<script type="text/javascript" language="javascript">
  /** Function to refresh the page at specified interval. **/
  function autoRefresh(refreshPeriod) {
      setTimeout("window.location.reload();",refreshPeriod);
  }
</script>
</head>
<body onload="autoRefresh(10000);">
  <h2> Auto Refresh </h2>
  This page autorefreshes in 10 seconds. <br/>
  You can also perform a manual refresh by clicking any of the link/button below.
  <br/><br/>
  <a href="javascript:window.location.reload();"> Refresh this page - Cached </a>
  <br/><br/>
  <input type="button" value="Reload Page - Server" onClick="window.location.reload(true);">
  <br/><br/>
  <input type="button" value="Reload Page" onClick=" window.location = document.URL;">
  <br/><br/>
</body>
</html>

3 comments:

  1. can this code code works in iframe?

    ReplyDelete
    Replies
    1. yes,this code will work in iframe .....

      Delete
  2. Teu ngarti urang kumaha dia weh lah

    ReplyDelete

Related Posts Plugin for WordPress, Blogger...
 

Copyright © 2012 | ScriptSplash | Powered by Blogger Templates