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

admin管理员组

文章数量:1402024

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;
}

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;
}

• javascript
• jquery

Share Improve this question Follow edited May 13, 2011 at 10:46 TigerTiger asked May 12, 2011 at 16:39 TigerTigerTigerTiger 10.8k1616 gold badges5959 silver badges7272 bronze badges 10

• Your question doesn't really make a lot of sense. If no one is on the page, what need is there to be constantly refreshing it. In fact, to what screen would it be refreshing when there is nobody viewing it. – steverie Commented May 12, 2011 at 16:43
• @steverie: He is saying that the page should refresh periodically, when it does not have the focus. Either because another tab is selected, or another application/window entirely. – Orbling Commented May 12, 2011 at 16:45
• Dear SteveComrie, Thanks for your ment. It may not make any sense to you, but it does it make a great deal of sense in the application I am working on. Thank you. – TigerTiger Commented May 12, 2011 at 16:45
• Why would you want to refresh a page when the user has navigated away from it? The page isn't shown (since the user navigated away) so a refresh seems rather pointless. – Arjan Commented May 12, 2011 at 16:46
• 2 thefutureoftheweb./blog/detect-browser-window-focus – Orbling Commented May 12, 2011 at 16:47

 |  Show 5 more ments

3 Answers 3

Sorted by: Reset to default 2

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 mence 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.

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.

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.

本文标签：