如何檢測瀏覽器最小化和最大化狀態在JavaScript

Question

我想要找到瀏覽器最小化和最大化狀態，因爲我想打AJAX請求相應的瀏覽器狀態。

有誰知道如何使用JavaScript檢測瀏覽器狀態。

Answer 1

您可以嘗試頁面可見性API，它具有布爾屬性document.hidden（document.webkitHidden），它也檢測當前頁面是最小化還是最大化。它還取決於用戶是否專注當前的瀏覽器選項卡或不：

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

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

Answer 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); 

請記住，這不適用於跨瀏覽器，並且僅在某些瀏覽器版本中可用。

Answer 3

我使用此代碼

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

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

Answer 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 - 總是表明，標籤/窗口是當前活動（。現在（）總是對我返回true）