The Page Visibility API provides developers an event to listen in on, telling developers when the user focuses on a page's tab, and also when the user moves to another tab or window:
code:
// Adapted slightly from Sam Dutton // Set name of hidden property and visibility change event // since some browsers only offer vendor-prefixed support var hidden, state, visibilityChange; if (typeof document.hidden !== "undefined") { hidden = "hidden"; visibilityChange = "visibilitychange"; state = "visibilityState"; } else if (typeof document.mozHidden !== "undefined") { hidden = "mozHidden"; visibilityChange = "mozvisibilitychange"; state = "mozVisibilityState"; } else if (typeof document.msHidden !== "undefined") { hidden = "msHidden"; visibilityChange = "msvisibilitychange"; state = "msVisibilityState"; } else if (typeof document.webkitHidden !== "undefined") { hidden = "webkitHidden"; visibilityChange = "webkitvisibilitychange"; state = "webkitVisibilityState"; }
// Add a listener that constantly changes the title document.addEventListener(visibilityChange, function(e) { // Start or stop processing depending on state
}, false);
When used properly, a developer can avoid expensive tasks (like AJAX polling or animating) when the tab isn't in focus.
0 comments, (619 reads) All Articles by, GabbyGirl