Is there a way to detect if a browser window is not currently active?

by

Since originally writing this answer, a new specification has reached recommendation status thanks to the W3C. The Page Visibility API (on MDN) now allows us to more accurately detect when a page is hidden to the user.

document.addEventListener("visibilitychange", onchange);

Current browser support:

  • Chrome 13+
  • Internet Explorer 10+
  • Firefox 10+
  • Opera 12.10+ [read notes]

The following code falls back to the less reliable blur/focus method in incompatible browsers:

(function() {
  var hidden = "hidden";

  // Standards:
  if (hidden in document)
    document.addEventListener("visibilitychange", onchange);
  else if ((hidden = "mozHidden") in document)
    document.addEventListener("mozvisibilitychange", onchange);
  else if ((hidden = "webkitHidden") in document)
    document.addEventListener("webkitvisibilitychange", onchange);
  else if ((hidden = "msHidden") in document)
    document.addEventListener("msvisibilitychange", onchange);
  // IE 9 and lower:
  else if ("onfocusin" in document)
    document.onfocusin = document.onfocusout = onchange;
  // All others:
  else
    window.onpageshow = window.onpagehide
    = window.onfocus = window.onblur = onchange;

  function onchange (evt) {
    var v = "visible", h = "hidden",
        evtMap = {
          focus:v, focusin:v, pageshow:v, blur:h, focusout:h, pagehide:h
        };

    evt = evt || window.event;
    if (evt.type in evtMap)
      document.body.className = evtMap[evt.type];
    else
      document.body.className = this[hidden] ? "hidden" : "visible";
  }

  // set the initial state (but only if browser supports the Page Visibility API)
  if( document[hidden] !== undefined )
    onchange({type: document[hidden] ? "blur" : "focus"});
})();

onfocusin and onfocusout are required for IE 9 and lower, while all others make use of onfocus and onblur, except for iOS, which uses onpageshow and onpagehide.

More Related Contents:

  1. JavaScript, browsers, window close – send an AJAX request or run a script on window closing
  2. How to prevent closing browser window?
  3. window.opener.focus() doesn’t work
  4. Could a website force the browser to go into fullscreen mode?
  5. How to focus an input field on Android browser through javascript or jquery
  6. Have a pop up window when clicking on an image
  7. How to capture the browser window close event?
  8. Trying to detect browser close event
  9. How do I hide javascript code in a webpage?
  10. Why is array.push sometimes faster than array[n] = value?
  11. Why doesn’t JavaScript support multithreading?
  12. How do browsers pause/change Javascript when tab or window is not active?
  13. Why the function called by setTimeout has no callstack limit?
  14. Onclick javascript to make browser go back to previous page?
  15. React | How to detect Page Refresh (F5)
  16. window.open() on a multi-monitor/dual-monitor system – where does window pop up?
  17. How can I retain the scroll position of a scrollable area when pressing back button?
  18. Mechanize and Javascript
  19. wget + JavaScript?
  20. Browser back button handling
  21. How to know browser idle time?
  22. Why does JavaScript navigator.appName return Netscape for Safari, Firefox and Chrome?
  23. Why web browsers don’t have jQuery built in? [duplicate]
  24. How to run function of parent window when child window closes?
  25. Force page zoom at 100% with JS
  26. Disabling enter key for form
  27. Clear localStorage on tab/browser close but not on refresh
  28. How to make browser full screen using F11 key event through JavaScript [duplicate]
  29. HTML5 Video autoplay with sound unmuted
  30. How do I dynamically adjust css stylesheet based on browser width?

Leave a Comment