Event for browser tab hidden / shown?

Question

Is there any DOM event when the browser tab loses / gains focus? I know that there are blur and focus events on the window , but they also fire when the browser window as a whole loses focus. Then the browser may still be visible to the user. Of course, such an event would be browser specific, but this is normal.

The reason I want this is because I run an animation that can consume quite a lot of CPU time. When the browser tab is not displayed, there is no reason to continue the animation. Now I know that modern browsers reduce the resolution of the timer for background tabs, but I can actually pause the animation so that CPU time is not consumed.

If you're interested, here is what I write: http://panzi.github.com/Browser-Ponies/

Answer 1

At a minimum, Google Chrome supports the webkitvisibilitychange event and the document.webkitHidden property. See the visibility API . But it seems that it only works when the displayed tab changes, and not when the entire window is reconciled. There is also a visibilitychange event for Internet Explorer, but the documentation says nothing about it.

Answer 2

The closest thing that I think you will find is the main answer here:

Is there a way to track a tab using javascript?

Answer 3

Now they have exactly what they need: https://developer.mozilla.org/en-US/docs/Web/Guide/User_experience/Using_the_Page_Visibility_API