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; 
}