如何在 JavaScript 中检测浏览器“最小化”和“最大化”状态？ [复制]答案

【问题标题】：How to detect browser "minimized" and "maximized" state in JavaScript? [duplicate]如何在 JavaScript 中检测浏览器“最小化”和“最大化”状态？ [复制]
【发布时间】：2012-05-06 21:43:19
【问题描述】：

我正在尝试查找浏览器 minimized 和 maximized 状态，因为我想根据浏览器状态点击 AJAX 请求。

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

【问题讨论】：

如果介于两者之间呢？我很少最大化运行窗口。

标签： javascript

【解决方案1】：

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

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

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

【讨论】：

在我的情况下，当我最小化浏览器或按 alt 选项卡时，页面可见性 API 不会更改状态。这是预期的行为吗，因为如果我将浏览器最小化，它基本上处于隐藏状态，对吗？

【解决方案2】：

我认为检测这些状态的唯一可靠方法是检查 HTML5 提供的 visibility 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.resize 在 OSX 上无法注意到“减少到停靠”（图标化/最小化）和“从停靠中恢复”（恢复）操作，但您在此处展示的这种技术似乎有效。干得好！
这似乎没有检测到点击窗口并以另一种方式聚焦，但也许这是预期的行为
@DavidCallanan 那是一个不同的属性，叫做焦点。检查document.hasFocus() 和window 的focus 事件。

【解决方案3】：

我用这个代码

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

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

【讨论】：

这太棒了。非常感谢

【解决方案4】：

这是Piotrek De的answer on another question：

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

Chrome 34.0

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

不完全适用于：

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

【讨论】：