触发父 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);
    }
};

这很好用.现在我的问题是我已经给 iframe 提供了滚动事件，id 为i1"，这样当 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 上触发 click 事件并且两个 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屋！