javascript - 如何仅在选项卡/窗口获得焦点时每 5 秒刷新一次页面？

Question

我有一个 iframe，我想每 5 秒刷新一次，但前提是窗口或选项卡处于事件状态。

我正在使用 META Refresh 执行此操作，但我无法找到一种方法来使其以页面处于事件状态为条件，因此我尝试了 javascript，但没有成功。这是我尝试过的，但它不起作用:

<SCRIPT>
  $(window).focus(function(){
      setTimeout(function(){
       window.location.reload(1);
        }, 5000);
    });
 <SCRIPT>

我的方向正确吗，还是有更干净的方法来做到这一点？

Answer 1

您可以使用 page visibility API并每 5 秒检查一次页面的可见性状态:如果它不是隐藏，则刷新页面

$(function() {
   window.setInterval(function() {
      if (!document.hidden) {
         window.location.reload(1);
      }
   }, 5000)
});

此处的隐藏表示

the page content is not visible to the user. In practice this means that the document is either a background tab or part of a minimized window, or the OS screen lock is active.