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也会自动滚动。当页面加载但触发点击事件并且两个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发生更改时，scroll事件也应该像最初加载页面时一样工作。

Answer 1

页面加载新网址后，您必须重新绑定滚动事件处理程序。收听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); 
   }
}

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

1 个答案: