iframe 和绝对定位元素答案

【问题标题】：Iframe and absolute positioned elementsiframe 和绝对定位元素
【发布时间】：2012-04-17 07:35:38
【问题描述】：

我对 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”来停止/开始动画会有所帮助？

感谢您的建议！

【问题讨论】：

我想你会需要那个onBlur()。检查这个答案：stackoverflow.com/questions/6112671/…
好的，所以我已经尝试了其他问题的修复，以及一些模糊和焦点的修复，但没有任何帮助。我猜 onblur 和 focus 对 iframe 没有太大影响。还有其他想法吗？
它没有焦点和模糊。尝试创建一个 div 作为 iframe 的背景。
您的意思是onblur() 不能与IFRAME 一起使用吗？您需要为包含 iframe 的页面中的 IFRAME 元素本身设置它，而不是为 iframe 文档中的代码设置它。

标签： javascript iframe position absolute

【解决方案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; 
}

【讨论】：