Javascript 如何在javascript中检测浏览器最小化和最大化状态

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/10328665/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-24 00:53:42  来源:igfitidea点击:

How to detect browser minimize and maximize state in javascript

javascript

提问by Ashish

I am trying to find the browser minimize and maximize states, as I want to hit the AJAX request accordingly the browser state.

我试图找到浏览器最小化和最大化状态,因为我想根据浏览器状态点击 AJAX 请求。

Does anyone know how do I detect the browser state using JavaScript.

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

回答by Tobias Krogh

I think the only reliable way to detect these states is to check the visibility APIoffered by HTML5 (this is still an experimental feature) which offers certain properties and events

我认为检测这些状态的唯一可靠方法是检查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    

You can also react on changes of the visibility

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

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

Keep in mind this is not working cross browser and only available in certain browser versions.

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

回答by user1089766

Here's Piotrek De's answer on another question:

这是Piotrek De对另一个问题回答

There is a neat library available on GitHub:

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

Example:

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

I've tested version 1.0.1 on all browsers I have and can confirm that it works with:

  • IE9, IE10
  • FF 26.0
  • Chrome 34.0

and probably all newer versions.

Doesn't fully work with:

  • IE8 - always indicate that tab/window is currently active (.now() always returns true for me)

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)

回答by Justan

I use this code

我用这个代码

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

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

回答by Samuli Hakoniemi

You can try with Page Visibility API, it has the boolean property document.hidden (document.webkitHidden), which also detects whether current page is minimized or maximized. It is also dependant whether user has focused current browser tab or not:

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

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

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

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

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