檢查用戶是否正在主動查看網頁

Question

我有一個網頁，每隔5秒左右通過從服務器獲取數據在AJAX中進行自我更新。但是，我希望只在用戶正在查看頁面時才執行更新。

當用戶在另一個選項卡上，在瀏覽器以外的其他程序中，或任何其他時間該頁面不是用戶PC上的主活動頁面時，不應該進行更新。

什麼是最準確的，跨瀏覽器的方式來測試呢？

Answer 1

jQuery idleTimer插件應該按照你的需要來做。

文檔是在這裏： http://paulirish.com/2009/jquery-idletimer-plugin/

演示是在這裏： http://ajaxdump.com/?8ADKBT6O

Answer 2

如果你喜歡純JS的方式，這裏有一個解決方案：

(function(){ 
var itl=null; 
window.onfocus=function(){itl=window.setInterval(/*heartbeat function*/,5000);}; 
window.onblur=function(){if(itl){window.clearInterval(itl);}};//stop heartbeat 
})(); 

不幀的工作，雖然，您必須在獨立選項卡上進行測試。

Answer 3

最好使用網頁瀏覽權限API： https://developer.mozilla.org/en-US/docs/Web/API/Page_Visibility_API