Detect tab/window activation in JavaScript

Question

It seems that Google+ checks for notification updates when I activate the tab in Firefox

It'd show "0" every time I activate it, but change to a number of new notifications in a couple of seconds after that.

What's the mechanism allowing to tap into that event? Is there a specific DOM event for that? Or are they using something like onmouseover handler and just consider any kind of activity to be a sufficient indicator of tab activation?

Answer 1

There is Page visibility document, which describes document.onvisibilitychange event handler.

The usage

document.onvisibilitychange = function() { 
  console.log("Visibility of page has changed!");
};

Answer 2

Just a guess because I haven't all relevant browsers available for testing.

What about using the focus event on the window. Whenever a user clicks somewhere this is invoked but also on switching of tabs. To distinguish between a user's actions on the page and a user switching to the page you could check if the event's explicitOriginalTarget points to the window.

window.onfocus=function(event){
    if(event.explicitOriginalTarget===window){
        console.log('switched from tab');
    }
}