How To Know If A Page Is Currently Being Read By The User With Javascript?

I'm making a webpage with dynamic content that enters the view with AJAX polling. The page JS occasionally downloads updated information and renders it on the page while the user

Solution 1:

Your best solution would be something like this:

var inactiveTimer;
 var active = true;
 functionsetTimer(){
  inactiveTimer = setTimeOut("stopAjaxUpdateFunction()", 120000); //120 seconds
 }
 setTimer();
 document.onmouseover = function() { clearTimeout ( inactiveTimer ); 
                                     setTimer(); 
                                     resumeAjaxUpdate();
  }; //clear the timer and reset it.functionstopAjaxUpdateFunction(){
  //Turn off AJAX update
  active = false;   
 }
 functionresumeAjaxUpdate(){
  if(active == false){
   //Turn on AJAX update
   active = true;
  }else{
   //do nothing since we are still active and the AJAX update is still on.
  }    
 }

The stopAjaxUpdateFunction should stop the AJAX update progress.

Solution 2:

How about setting an "inactivity timeout" which gets reset every time a mouse or keyboard event is received in the DOM? I believe this is how most IM programs decide that you're "away" (though they do it by hooking the input messages at the system-wide level)

Solution 3:

I've looked at that problem before for a research project. At the time (2-3 years ago) I did not find a way to get information from the browser about whether or not you are minimized :(

Solution 4:

First check when the window loses and gains focus.

window.onblur = function () { /* stop */ };
window.onfocus =  function () { /* start */ };

Also, for various reasons, the user may stop reading the page without causing it to lose focus (e.g. he gets up and walks away from the computer). In that case, you have to assume after a period of inactivity (no mouse or keyboard events) that the users' attention has left the page. The code to do that is described in another answer.

Solution 5:

I know you've already accepted an answer but I'd personally use a combination of several of the answers mentioned here for various reasons, including:

• Using mouse events only alienates users proficient at keyboard based browsing.
• Using blur/focus events don't allow for users who go make a cup of tea ;-)

I'd most likely use something like the following as a guideline:

var idleTimer, userIsIdle, pollingTimer;
document.onkeydown = document.onmousemove = resetTimer;

window.onload = function () {
    pollingTimer = window.setTimeout(runPollingFunction, 30000);
    resetTimer();

    /* IE's onblur/onfocus is buggy */if (window.navigator.appName == "Microsoft Internet Explorer")
        document.onfocusin  = resetTimer,
        document.onfocusout = setIdle;
    elsewindow.onfocus = resetTimer,
        window.onblur = setIdle;
}
functionresetTimer() {
    if (userIsIdle)
        setBack();

    window.clearTimeout(idleTimer);
    idleTimer = window.setTimeout(setIdle, 120000); // 2 minutes of no activity    
}
functionsetIdle() {
    userIsIdle = true;
    window.clearTimeout(pollingTimer); // Clear the timer that initiates pollingwindow.clearTimeout(setIdle);
}
functionsetBack() {
    userIsIdle = false;
    runPollingFunction(); // call the polling function to instantly update page
    pollingTimer = window.setTimeout(runPollingFunction, 300000);
}