如何在 JavaScript 中检测浏览器的“最小化”和“最大化”状态

How to detect browser "minimized" and "maximized" state in JavaScript?

本文关键字：最小化 最大化 状态 浏览器 JavaScript 检测      更新时间：2023-09-26

我正在尝试找到浏览器最小化和最大化的状态，因为我想相应地点击浏览器状态的 AJAX 请求。

有谁知道如何使用 JavaScript 检测浏览器状态？

我认为检测这些状态的唯一可靠方法是检查 HTML5 提供的可见性 API（这仍然是一个实验性功能），它提供了某些属性和事件

document.hidden // Returns true if the page is in a state considered to be hidden to the user, and false otherwise.
document.visibilityState // Returns a string denoting the visibility state of the document

您还可以对可见性的变化做出反应

document.addEventListener("visibilitychange", function() {
  console.log(document.hidden, document.visibilityState);
}, false);

请记住，这不适用于跨浏览器，仅在某些浏览器版本中可用。

我使用此代码

window.addEventListener('blur', function(){
   console.log('blur');
}, false);
window.addEventListener('focus', function(){
   console.log('focus');
}, false);

以下是Piotrek De对另一个问题的回答：

GitHub上有一个整洁的库：

https://github.com/serkanyersen/ifvisible.js

例：

// If page is visible right now
if( ifvisible.now() ){
  // Display pop-up
  openPopUp();
}

我已经在我拥有的所有浏览器上测试了 1.0.1 版，并且可以确认它适用于：

  • IE9、IE10
  • FF 26.0
  • 铬 34.0

可能还有所有较新的版本。

不完全适用于：

  • IE8 - 始终指示选项卡/窗口当前处于活动状态（.now（） 始终为我返回 true）

您可以尝试使用页面可见性API，它具有布尔属性document.hidden （document.webkitHidden），该属性还可以检测当前页面是最小化还是最大化。它还取决于用户是否关注当前浏览器选项卡：

https://developers.google.com/chrome/whitepapers/pagevisibility

https://developer.mozilla.org/en/DOM/Using_the_Page_Visibility_API

相关文章：