Question

<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”的iframe应该自动滚动。我怎么能用javascript做到这一点？

Answer 1

您的问题已在这篇文章中得到解答：How to get IFRAME to listen to same events as parent (and fire the same handlers)

只是听一下滚动事件而不是mousemove。

Answer 2

要解决您的问题，请在下面找到代码

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/

直接测试它

希望这有帮助

如何让IFRAME监听与父级相同的事件并触发事件

2 个答案: