Как заставить IFRAME прослушивать события прокрутки как родительские при срабатывании события click внутри родительского iframe

Question

У меня есть два фрейма в HTML-странице

<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>

Я передаю событие click тегу "a", чтобы изменить href, чтобы при щелчке по любой ссылке в этом iframe и изменении src iframe с идентификатором "i1" src второго iframe также изменялись впоследствии, и оба 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);
    }
};

Это отлично работает. Теперь мой вопрос: я передал событие прокрутки в iframe с идентификатором «i1», чтобы при прокрутке 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); 
   }

Я не получаю то, что мне нужно изменить, чтобы при срабатывании события click на одном iframe и при изменении src обоих iframe событие scroll также работало так же, как и при первоначальной загрузке страницы.

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