How to Automatically Reload a Web Page At a Certain Time

Auto refresh page every 30 seconds

There are multiple solutions for this. If you want the page to be refreshed you actually don't need JavaScript, the browser can do it for you if you add this meta tag in your head tag.

<meta http-equiv="refresh" content="30">

The browser will then refresh the page every 30 seconds.

If you really want to do it with JavaScript, then you can refresh the page every 30 seconds with Location.reload() (docs) inside a setTimeout():

window.setTimeout( function() {
  window.location.reload();
}, 30000);

If you don't need to refresh the whole page but only a part of it, I guess an AJAX call would be the most efficient way.

How to automatically reload a page after a given period of inactivity

If you want to refresh the page if there is no activity then you need to figure out how to define activity. Let's say we refresh the page every minute unless someone presses a key or moves the mouse. This uses jQuery for event binding:

<script>
     var time = new Date().getTime();
     $(document.body).bind("mousemove keypress", function(e) {
         time = new Date().getTime();
     });

     function refresh() {
         if(new Date().getTime() - time >= 60000) 
             window.location.reload(true);
         else 
             setTimeout(refresh, 10000);
     }

     setTimeout(refresh, 10000);
</script>

refresh page at a specific time

I think you've asked the question as per this post.

But to help you quickly, I've copied the code.

function refreshAt(hours, minutes, seconds) {
    var now = new Date();
    var then = new Date();

    if(now.getHours() > hours ||
       (now.getHours() == hours && now.getMinutes() > minutes) ||
        now.getHours() == hours && now.getMinutes() == minutes && now.getSeconds() >= seconds) {
        then.setDate(now.getDate() + 1);
    }
    then.setHours(hours);
    then.setMinutes(minutes);
    then.setSeconds(seconds);

    var timeout = (then.getTime() - now.getTime());
    setTimeout(function() { window.location.reload(true); }, timeout);
}

Then you can add a script tag to call the refreshAt() function.

refreshAt(15,35,0); //Will refresh the page at 3:35pm

Credits to: https://stackoverflow.com/users/26210/andrew-moore

How to refresh page on specific day at specific time in specific time zone?

I figured it out. Here's the script:

function refreshAt(hours, minutes, seconds, day) {
    var now = new Date();
    var then = new Date();
    var dayUTC = new Date();

    if(dayUTC.getUTCDay() == day) {

        if(now.getUTCHours() > hours ||
       (now.getUTCHours() == hours && now.getUTCMinutes() > minutes) ||
        now.getUTCHours() == hours && now.getUTCMinutes() == minutes && now.getUTCSeconds() >= seconds) {
        then.setUTCDate(now.getUTCDate() + 1);
        }

    then.setUTCHours(hours);
    then.setUTCMinutes(minutes);
    then.setUTCSeconds(seconds);


    var timeout = (then.getTime() - now.getTime());
    setTimeout(function() { window.location.reload(true); }, timeout);
    }
}

And then I just call the refreshAt() function:

 refreshAt(20,00,0,1); //Will refresh the page at 8:00pm on Monday UTC or 3:00pm EST

---

Related Topics