Skip to main content

How to Refresh/Reload a Page frequently or periodically

We can automatically webpage refresh/ reload with two ways. one of them is using HTML Meta Tag and another is Javascript. in this tutorial you can learn both technique.

Using Meta Tag

<!DOCTYPE html>
<html class="k-ff k-ff43">
 <head> 
  <meta http-equiv="refresh" content="10" />   
 </head>
 <body>
  <div class="refressData" style="border: 2px dotted red; margin-top:40px;"  id="refressData">
 </div>
  
 <script>

     $(document).ready(function () {

         var dateTime = 'Date: ' + new Date().getDate() + '/' + new Date().getMonth() + '/' + new Date().getFullYear() + '/' + ' Time: ' + new Date().getHours() + ": " + new Date().getMinutes() + ':' + new Date().getSeconds();
         $("#refressData").append(dateTime);

     })
</script>
</html>

META Tag:

 <meta http-equiv="refresh" content="10" />  

Add tag in header section and content give value will be parse as second. Metadata is data (information) about data.The <meta> tag provides metadata about the HTML document. Metadata will not be displayed on the page, but will be machine parsable. Meta elements are typically used to specify page description, keywords, author of the document, last modified, and other metadata. Metadata is always passed as name/value pairs.

Script: This script allow to get datetime during page reload and append to div


 $(document).ready(function () {

               var dateTime = 'Date: ' + new Date().getDate() 
                    + '/' + new Date().getMonth() + '/' + new Date().getFullYear() 
                    + '/' + ' Time: ' + new Date().getHours() 
                    + ": " + new Date().getMinutes() + ':' + new Date().getSeconds();
               $("#refressData").append(dateTime);

           })

Using Only Javascript


<!DOCTYPE html>
<html class="k-ff k-ff43">
       <head>          
               <title>
                               Automatically webpage refresh/ reload
               </title>       
       </head>
       <body>
              <div class="refressData" style="border: 2px dotted red; margin-top:40px;"  id="refressData">
              </div>
       </body>
      
       <script>

           $(document).ready(function () {
               var dateTime = 'Date: ' + new Date().getDate() + '/'
                + new Date().getMonth() + '/' + new Date().getFullYear()
                + '/' + ' Time: ' + new Date().getHours() + ": "
                + new Date().getMinutes() + ':' + new Date().getSeconds();
               $("#refressData").append(dateTime);
           })

           setTimeout(function () {
               window.location.reload(true);
           }, 5000);
</script>
</html

Script: using setTimeout Javascript function call window reload method


window.location.reload(true);
Automatically Page reload


Labels:

Comments

Post a Comment