How to keep refreshing the page periodically while the user is away from the page? and not to refresh if on the page

Question

Is it possible to refresh a webpage, say, every minute when the user is NOT on the page? For example, if I am visiting a PageX and stay on the page it doesn't refresh but as soon as I navigate away from the page (that is, switch to another tab/window or a program, then the PageX refreshes every x minutes or seconds? How do I go about this? Thx.

Update:

"on the page" means the page is the current window i.e. it has focus. So if the PageX has a link to a pop window, say 100 x 100, clicking that opens the popup, while the page is still kind of visible behind that tiny popup window, it doesn't have a focus, hence needs refresh as stated above.

Any thing not clear please ask.

Update 2

As suggested by Mattk below .. Following seems to be working in Firefox (haven't checked in the latest), and Chrome. In the IE 8, if I switch to another tab or a program, it doesnt' refresh the page, but if I am on the page and click in the address bar, it starts refreshing the page. Any ideas how to get it working in IE?

var pageFocused = false;

function onPageFocus(){
   pageFocused = true;
   //document.body.className = 'focused';
}

function onPageBlur() {
    pageFocused = false;
    //document.body.className = 'blurred';
};

function checkActivity() {        
    if(pageFocused == false){
        location.reload(true);
    }
}
setInterval("checkActivity()", 1 * 1000);
if (!+"\v1") { // check for Internet Explorer            
    document.onfocusin = onPageFocus;
    document.onfocusout = onPageBlur;
} else if (/*@cc_on!@*/false) {
    document.onfocusin = onPageFocus;
    document.onfocusout = onPageBlur;
} else {
    window.onfocus = onPageFocus;
    window.onblur = onPageBlur;
}

Answer 1

The window object has blur and focus events on a large number of browsers.

You could attach an event handler to the blur event to commence periodic refreshing and another to focus to stop it. This would be as simple as executing setInterval in the blur, saving the intervalID and then using clearInterval in the focus event handler to stop the polling.

Answer 2

I suppose you could start a timer on mousestop which is a handler function within the document.onmousemove event handler: so something like.

document.onmousemove = (function() {var onmousestop = function() {
/* do stuff */}});

then after a minute or whatever, refresh the page.

Answer 3

Track the user's activity on the page by detecting mouseovers, and key presses (for those who don't use a mouse), and page focus on the page as I don't think the blur event will work for what you are doing at a document/page level. The reason being is that the blur event appears to only be called when you return to a tab, but not when you actually leave the page.

Whenever those events (mouseover, key press, or page focus) occur, reset the pageFocused to true.

var pageFocused = false;

function onPageFocus(){
   pageFocused = true;
}

Then every 30 seconds, you can run a function to see if anything has changed. This will run a function called checkActivity every thirty seconds (30000 milliseconds).

setInterval("checkActivity()", 30 * 1000);

In that function, if there has been no activity in the thirty seconds, reload the page.

function checkActivity() {

if(pageFocused == false){
   location.reload(true);
}

The page will then reload and set the pageFocused back to false, and start the whole thing over for you.