How Can I Detect Inactive Browser Windows Using JavaScript?

Detecting Inactive Browser Windows

When working with JavaScript, it can be beneficial to determine if the browser window is currently inactive. This allows you to optimize performance by halting unnecessary tasks when the user is not viewing the page.

Utilizing the Page Visibility API

A reliable way to detect browser inactivity is through the Page Visibility API. This API provides a "hidden" property that indicates whether the page is visible to the user or not.

document.addEventListener("visibilitychange", onchange);

If the "hidden" property is true, the page is currently not active. You can use this information to pause or minimize JavaScript operations accordingly.

Browser Compatibility

The Page Visibility API is supported by the latest versions of major browsers, including Chrome, Internet Explorer, Firefox, and Opera.

Fallback for Incompatible Browsers

For browsers that do not support the Page Visibility API, you can fall back to the blur/focus methods. These events are less reliable, but they can provide a basic level of detection.

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

  // ... (code for fallbacks to blur/focus)
})();

Implementation Example

The code below demonstrates how to use the Page Visibility API and the fallback methods to detect inactive browser windows:

var hidden = "hidden";

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);
else if ("onfocusin" in document)
  document.onfocusin = document.onfocusout = onchange;
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
if (document[hidden] !== undefined)
  onchange({ type: document[hidden] ? "blur" : "focus" });

The above is the detailed content of How Can I Detect Inactive Browser Windows Using JavaScript?. For more information, please follow other related articles on the PHP Chinese website!