javascript - 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

此代码应该停止动画。至少它会在您的 IFRAME 上触发 onblur。您将轻松弄清楚如何再次开始动画。

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

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