触发父 iframe 中的单击事件时，如何使 IFRAME 作为父级侦听滚动事件答案

【问题标题】：How to make IFRAME listen to scroll events as parent when click event within parent iframe is triggered触发父 iframe 中的单击事件时，如何使 IFRAME 作为父级侦听滚动事件
【发布时间】：2011-09-02 05:14:41
【问题描述】：

我在一个 html 页面中有两个 iframe

<table border="1" width="100%" height="100%">
  <tr>
    <th><iframe id="i1" width="100%" height="100%" src="/wordpress"></iframe></th>
    <th><iframe id="i2" width="100%" height="100%" src="/wordpress"></iframe></th>
  </tr>
</table>

我将点击事件赋予“a”标签以更改 href，以便当点击该 iframe 中的任何链接并且 id 为“i1”的 iframe 的 src 更改时，第二个 iframe 的 src 也会随之更改，并且两个 iframe 都有相同的页面浏览量。

$('a').click(function(e){
  var id = $(this).attr('id');
  var href = $(this).attr('href');
     var ahash={
        'id':id,
        'href':href
     };
   if (getFrameElement().id=="i1")
    window.parent.document.Aaddevent(e, ahash);
});

href被这个改变了

document.sendevent=function(e, ahash){
    if (ahash.id!=undefined) {
       $('#i2', window.parent.document).contents().find('#'+ahash.id).trigger(e);
    } else {
       $('#i2', window.parent.document).attr('src', ahash.href);
    }
};

这很好用。现在我的问题是我已经给 id 为“i1”的 iframe 提供了滚动事件，这样当 iframe 滚动时，另一个 iframe 也会自动滚动。这在页面加载时运行良好，但当点击事件被触发并且两个 iframe 的页面视图发生更改时，滚动事件不起作用。

function getFrameTargetElement(oI)
   {
     var lF = oI.contentWindow;
     if(window.pageYOffset==undefined)
     {   
       lF= (lF.document.documentElement) ? lF.document.documentElement : lF=document.body; 
     }
     //- return computed value
     return lF;
   }
   //- get frame target elements 
   var oE1 = getFrameTargetElement( document.getElementById("i1") );
   var oE2 = getFrameTargetElement( document.getElementById("i2") );
   //- on source scroll
   oE1.onscroll = function (e) {
    var scrollTopValue;
    var scrollLeftValue;
    //- evaluate scroll values
    if(window.pageYOffset!=undefined)
    {
      scrollTopValue = oE1.pageYOffset;
      scrollLeftValue = oE1.pageXOffset;
    }
    else
    {
      scrollTopValue = oE1.scrollTop;
      scrollLeftValue = oE1.scrollLeft;
    }   

    //- mimic scroll
    oE2.scrollTo( scrollLeftValue, scrollTopValue); 
   }

我没有得到我需要更改的内容，因此当在一个 iframe 上触发 click 事件并且两个 iframe 的 src 更改时，滚动事件也应该像最初加载页面时一样工作。

【问题讨论】：

标签： javascript iframe scroll

【解决方案1】：

页面加载新的 url 后，您必须重新绑定滚动事件处理程序。监听 iframe 的 onload 事件，当它触发时，重新绑定滚动处理程序。

看起来您正在使用 jQuery。操作方法如下：

$("#i1").load(function ()
{
   var oE1 = getFrameTargetElement( document.getElementById("i1") );
   var oE2 = getFrameTargetElement( document.getElementById("i2") );
   //- on source scroll
   oE1.onscroll = function (e) {
    var scrollTopValue;
    var scrollLeftValue;
    //- evaluate scroll values
    if(window.pageYOffset!=undefined)
    {
      scrollTopValue = oE1.pageYOffset;
      scrollLeftValue = oE1.pageXOffset;
    }
    else
    {
      scrollTopValue = oE1.scrollTop;
      scrollLeftValue = oE1.scrollLeft;
    }   

    //- mimic scroll
    oE2.scrollTo( scrollLeftValue, scrollTopValue); 
   }
}

【讨论】：