检查用户是否正在主动查看网页

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

最好使用Page Visibility API： https://developer.mozilla.org/en-US/docs/Web/API/Page_Visibility_API