Question

好的，我的网站上有一个页面，客户端必须查看广告（网站）20秒。我显示他必须在iframe标签中查看的这个网站。我上面有一个20秒的倒数计时器。

我还确保当窗口失去焦点时，计时器停止。确保客户实际查看网站。

但我有一个问题。当客户点击Iframe中的网站上的内容时，计数器实际上会停止（意味着它失去焦点）。但我不希望这种情况发生，我希望计时器停止倒计时，只有当他去另一个水龙头或另一个窗口时。但是如果他点击Iframe网站中的链接，我希望它继续计算。

这是我使用的代码：

<html>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>

<script type="text/javascript">
var myInterval;
var seconds=20;

$(document).ready(function () {
    $(window).focus(function () {
        clearInterval(myInterval); // Clearing interval if for some reason it has not been cleared yet
           if (!flag)
           { myInterval = setInterval(tick, 1000);}
    }).blur(function () {
        clearInterval(myInterval); // Clearing interval on window blur
    });
myInterval = setInterval(tick, 1000);
});
function tick()
{
      display();

        if (seconds>0)
        {
         seconds--;
        }
        else
        {
          document.getElementById('TrafficHeader').innerHTML +="<?php include_once('Code.php'); 
          ?>";
          clearInterval(myInterval);
        }
}
function display()
{
   $("#TrafficHeader").html(seconds);
}
</script>
<div id="TrafficHeader" style="height:100px; background-color:grey; padding:20px;"></div>
<iframe src="http://www.website.com" height="100%" width="100%" frameborder="0">
</iframe>
</html>

任何帮助都将非常感激提前谢谢

Answer 1

尝试使用focusin和focusout，而不仅仅是焦点和模糊。并相应地调整你的逻辑以适应多个focusin火灾..像

这样的东西

$(window).focusout(function() {
  window.isStillActive = false;
  ...
}
$(window).focusin(function() {
  if (!window.isStillActive) {
    ...
    clearTimeout();
    ...
    window.isStillActive = true;
  }
}

为什么计时器会停止？以及如何防止它（Javascript） - Iframe

1 个答案: