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:

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:

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:

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:

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.

In the above code, “right_frame” reloads every second.
setInterval() function is very closely related to setTimeout() – both have similar syntax:

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.

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.

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.

Comments

  1. Reply

  2. By sushant

    Reply

  3. By Manikandan

    Reply

  4. By hyunjungsoh

    Reply

  5. By Fil

    Reply

  6. By tommy

    Reply

  7. By Maspray

    Reply

    • By admin

      Reply

  8. By Brandon

    Reply

    • By admin

      Reply

      • By Ghousia Naaz

        Reply

  9. By jatinder

    Reply

  10. By tomislav

    Reply

  11. By bob s

    Reply

  12. By Bhavik

    Reply

  13. By rajesh paul

    Reply

  14. By Mahender Reddy

    Reply

  15. By sahar

    Reply

  16. By Travis

    Reply

  17. By Shina

    Reply

  18. By Shiv

    Reply

  19. By priya

    Reply

  20. By Reyhaneh

    Reply

  21. Reply

  22. By captain

    Reply

  23. By Doctor_E

    Reply

    • By chris Williams

      Reply

  24. By ericson yamaro

    Reply

  25. By Chrisw.iec

    Reply

  26. By vaibhav

    Reply

  27. Reply

  28. By Mark

    Reply

  29. Reply

Leave a Reply

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

Bitnami