Как заставить IFRAME прослушивать те же события, что и родительский, и запускать событие - PullRequest
0 голосов
/ 31 августа 2011
<body>

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

</body>

Я определил два фрейма в одном домене.Что я хочу сделать, это когда прокручивать iframe с id = "i1", iframe с id = "i2" должен прокручиваться автоматическиКак я могу сделать это с помощью JavaScript?

Ответы [ 2 ]

0 голосов
/ 31 августа 2011

Чтобы решить вашу проблему, пожалуйста, найдите код ниже

function getFrameTargetElement(oI)
{  /* get target document element based on provided frame element */

    var lF = oI.contentWindow;
    if(window.pageYOffset==undefined)
    {
        //IE    
        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)
    { //opera, firefox,& gecko browsers
        scrollTopValue = oE1.pageYOffset;
        scrollLeftValue = oE1.pageXOffset;
    }
    else
    {
        scrollTopValue = oE1.scrollTop;
        scrollLeftValue = oE1.scrollLeft;
    }   

    //- mimic scroll
    oE2.scrollTo( scrollLeftValue, scrollTopValue); 
}

Вы можете выполнить его и протестировать напрямую по этой ссылке http://jsfiddle.net/CF5Lp/1/

Надеюсь, это поможет

0 голосов
/ 31 августа 2011

Ответ на ваш вопрос в этом сообщении: Как заставить IFRAME слушать те же события, что и у родителя (и запускать те же обработчики)

Просто слушайте событие прокрутки вместо mousemove.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...