iframe和绝对定位的元素

Question

我在iframe中使用绝对定位元素存在一个小问题。

所以我有一个页面，在这个页面上我有一个带有小型游戏的iframe。 在游戏中是一个男生，这个男生绝对定位了学生。 学生们正在用JavaScript移动。 一切正常，但是如果我打开该页面，然后继续浏览不同标签中的其他页面，我回来之后，学生们的位置就比以前大了（完全是双眼）。

在iframe中绝对有更多元素定位，我猜没有一个问题是因为Javascript动画。 有人遇到类似的问题吗？ 抱歉，由于多种原因，我无法在此处发布页面。

我可以为学生动画发布脚本：

function eyes_sides(){
    $('.eyes').animate({
            left:parseInt($('.eyes').css('left'))-9
        },{duration:1500});
    $('.eyes').animate({
            left:parseInt($('.eyes').css('left'))
        },{duration:1000});
}

function eyes_roll(){
    $('.eyes').animate({
        left:parseInt($('.eyes').css('left'))-7,
        top:parseInt($('.eyes').css('top'))-18
      },{duration:1800});
    $('.eyes').animate({
        left:parseInt($('.eyes').css('left')),
        top:parseInt($('.eyes').css('top'))
      },{duration:1300});
    }

function animate_eyes(){
      var animation = random_number(1,2);
      //alert(animation);
      switch(animation){
        case 1:
          eyes_roll();
          break;
        case 2: 
          eyes_sides();
          break;  
      }
      var delay = random_number(4000,12000);          
      window.animateEyes = setTimeout(function(){animate_eyes()},delay);
    }

该脚本并不完美，但是可以满足要求。

我在想是什么原因引起的，可能是在选项卡不活动时以某种方式连接到了动画的运行？ 也许添加“ onBlur”和“ onFocus”来停止/启动动画会有所帮助吗？

谢谢你的建议！

Answer 1

该代码应停止动画。 至少它triggres onblur你的IFRAME 。 您将轻松地弄清楚如何重新启动动画。

我对jQuery不熟悉，但是您可以“翻译”代码。

window.onload=function (){
    var ifr=document.getElementById('your_iframe');
    (function (x){x.onblur=function (){clearTimeout(x.contentWindow.animatedEyes);return;}}(ifr));
    return; 
}