如何在触发父iframe内的单击事件时使IFRAME监听滚动事件作为父项 [英] How to make IFRAME listen to scroll events as parent when click event within parent iframe is triggered

问题描述

我在html页面中有两个iframe

I have two iframes in an html page

<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都具有相同的页面视图。

I am giving click event to "a" tag to change the href so that when any link within that iframe is clicked and src of iframe with id "i1" changes the src of second iframe also change subsequently and both iframe have the same page view.

$('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的页面视图都改变时滚动事件不起作用时，这种方法很有效。

This works fine. Now my question is i have given scroll event to iframe with id "i1" so that when iframe is scrolled the other iframe also gets scrolled automatically. This is working well when the page is loaded but when click event is triggered and the page view of both iframe changes the scroll event is not working.

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更改滚动事件也应该像最初加载页面时一样工作。

I am not getting what i need to change so that when click event is trigged on one iframe and the src of both iframe changes the scroll event should also work alongwith like it worked when page loaded initially.

推荐答案

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

After the pages load the new url, you have to re-bind your scroll event handler. Listen to the iframe's onload event, and when that fires, re-bind the scroll handlers.

它看起来像你正在使用jQuery。以下是如何操作：

It looks like you're using jQuery. Here's how to do it:

$("#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监听滚动事件作为父项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！