javascript - 检查多帧焦点失败

Question

我在我的 main.html 页面上的框架集中使用了两个框架。第一个框架的源是内部的，其中第二个框架包含跨域源。在第一帧中，我显示了一个计时器和在第二个跨域的内容中。计时器仅在窗口处于焦点时运行，否则(如果您切换选项卡或启动新软件)它会显示一条警告消息，表明窗口失去焦点。我面临的问题是焦点完全可行。例如，当我单击第二帧的任何内容时，我的代码会将其检测为失去焦点并显示警告消息，尽管我在当前窗口上处于事件状态(我既没有切换选项卡也没有启动任何新的选项卡)应用程序软件)。如何解决这个问题？

这是我的代码

Main.html

<script>
window.onload = function(){
document.getElementById('q1').focus();

}

</script>

<frameset rows="130,*" style="border: 1px #CC3333"  noresize="noresize" ">
<frame id="q1" name="showcountframe" src="count.html" scrolling=no marginheight="2" marginwidth="2"  noresize="noresize">
<frame name="showcontframe" src="gmail.com" marginheight="0" marginwidth="0" noresize="noresize">
</frameset><noframes></noframes>

计数.html

  <script>
    var w_focus = true;

    window.onblur = function() {
      w_focus = false;
    }


    if(w_focus = true)

    {
    //code for running timer

    }
    else 
    {
      $('#warn').show();
    }
    <script>

    <div id="warn">Focus lost!</div>

Answer 1

据我了解，焦点事件没有得到很好的支持(这是一个仅适用于 IE 的应用程序吗？)。根据您的目标浏览器解释焦点的方式，点击跨站点框架可能会为您的计时器框架引发一个 blur 事件，但不会为父框架引发一个 blur 事件。 window 对象，在完全不同的窗口中单击时会引发这两个事件。如果测试表明情况确实如此，那么您可以使用它来推断计时器何时被隐藏。 (除非您的窗口被弹出窗口/屏幕保护程序/等隐藏，否则在任何情况下这都可能不起作用)

无论如何，更好的解决方案可能是使用window.requestAnimationFrame。这会安排代码在浏览器准备好时运行，但有意的副作用是在窗口隐藏时不会调用计划的代码。因此，您可以使用 window.setInterval (始终运行)来设置看门狗计时器，以检查 window.requestAnimationFrame 回调是否已运行；如果没有，您就知道该窗口不可见。

更新:示例

var timestamp = Date.now();

function ar () {
    timestamp = Date.now();
    window.requestAnimationFrame(ar);
}

function watchdog() {
  // show warning if ar() has not run for more than 2 seconds:
  if (Date.now() - timestamp > 2000)
      showHiddenWindowWarning();
  else dontShowHiddenWindowWarning();
}

ar(); // start requesting animation frames
window.setInterval (watchdog, 500); // check back twice a second