如何检测浏览器对移动设备的关注？

Question

我正在开发的应用程序是围绕jQuery Mobile和一些Ajax构建的,用于刷新页面的一部分.就像使用自动刷新的网站一样,我希望在某些条件(时间/可见性等)之后停止刷新,这样我的服务器就不会被不需要的请求轰炸.应用程序有一个状态屏幕,通常由用户检查,理想情况下,我的脚本会知道浏览器窗口已经成为焦点,现在是刷新的好时机.我以前在桌面webapps中做过这个,但我注意到不同平台和浏览器之间在移动端有很多变化,例如:

• 当浏览器获得焦点时,window.onfocus()会触发
• window.onfocus()在浏览器中切换选项卡时会触发/不触发
• 选项卡开关和/或远离浏览器的开关之间的Javascript是暂停的

到目前为止我能做的最好的是一组启发式查看可用事件+当检测到用户与页面的交互时,但它很笨拙并导致用户跳回到页面并且必须手动刷新.不是很好.

任何解决这个问题的聪明技巧？

Answer 1

如果您只想知道浏览器窗口是否已经失去焦点，请使用 requestAnimationFrame 函数。

window.requestAnimFrame = window.requestAnimationFrame ||
                          window.mozRequestAnimationFrame || 
                          <add browsers here>

然后在你的代码中

var lastupdate = new Date()
(function loop() {
      var now = new Date();

      if ( now - lastupdate > <some treshold like 1 second> ) {
          // browser was suspended and did come back to focus
      }
      lastupdate = now;

      window.requestAnimFrame(loop);
})();

技巧是，如果选项卡或窗口失焦，浏览器不会给出动画帧。正常的 setInterval 和 setTimeouts 仍然有效。当窗口处于焦点时，此循环将连续运行，但开销很小，在移动设备中每秒可能调用 3-5 次。