在多帧中检查焦点失败

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 事件，但不会为父框架的 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