如何使用 JavaScript 检测浏览器窗口不活动？

使用 JavaScript 检测浏览器窗口不活动

许多网站执行的周期性活动可能会占用大量资源。为了优化性能和用户体验，当用户没有主动查看页面时暂停这些活动是有益的。

窗口不活动检测的问题

确定是否用户主动查看浏览器窗口或选项卡是 Web 开发中的一个基本挑战。 window.onfocus 和 window.onblur 事件提供基本功能，但它们可能不可靠，因为用户可以在不离开窗口的情况下将焦点移动到其他选项卡或应用程序。

解决方案：页面可见性 API

页面可见性 API 是解决此问题的现代且可靠的解决方案。大多数主要浏览器都支持此 API，它提供了一种检测页面或选项卡何时从用户视图中隐藏的方法。

document.addEventListener("visibilitychange", function() {
  if (document.visibilityState === "hidden") {
    // Pause periodic activities
  } else {
    // Resume periodic activities
  }
});

不幸的是，IE 10 及更早版本不支持此 API。对于这些较旧的浏览器，可以使用涉及 onblur/onfocus 和 onpageshow/onpagehide 事件的不太可靠的回退。

var hidden = "hidden";

// Compatibility checks
if (hidden in document) {
  // Supported: Page Visibility API
} else if ((hidden = "mozHidden") in document) {
  // Mozilla-specific
} else if ((hidden = "webkitHidden") in document) {
  // WebKit-based
} else if ((hidden = "msHidden") in document) {
  // Microsoft-specific
} else {
  // Legacy events
}

function onchange(evt) {
  if (evt.type in evtMap) {
    document.body.className = evtMap[evt.type];
  } else {
    document.body.className = this[hidden] ? "hidden" : "visible";
  }
}

通过利用页面可见性 API 及其回退，您可以有效地检测窗口不活动状态并优化您的浏览器。相应的代码性能。

以上是如何使用 JavaScript 检测浏览器窗口不活动？的详细内容。更多信息请关注PHP中文网其他相关文章！