How to get IFRAME to listen to same events as parent and trigger the event
<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>
I h开发者_开发百科ave defined two iframes in the same domain. What is want to do is when i scroll iframe with id="i1", the iframe with id="i2" should get scrolled automatically. How can i do this using javascript?
To solve your problem, please find code below
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);
}
You can execute it, and test it directly using this link http://jsfiddle.net/CF5Lp/1/
Hope this helps
Your question was answered in this post: How to get IFRAME to listen to same events as parent (and fire the same handlers)
Just listen for the scroll event instead of mousemove.
加载中,请稍侯......
精彩评论