如何在触发父iframe内的单击事件时使IFRAME监听滚动事件作为父项

Question

我在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滚动事件发送到id为"i1"的iframe,这样当iframe滚动时,另一个iframe也会自动滚动.这在加载页面时运行良好,但是当触发click事件并且两个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中点击事件和双方的iframe的src改变滚动事件应该也非常久远喜欢它工作时,页面加载开始.

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