Reputation: 4170
I have created two webpages, one contains the other in an iframe. I would like to scroll the embedded page from the parent page via javascript.
What I have tried so far:
$('#go').scrollTop(200);
$('.footer').scrollTop(200);
var frame = document.getElementById('go');
frame.contentWindow.scrollTo(0, 200);
none of these have worked
the parent webpage html:
<html>
<body>
.
.
.
<div class="footer">
<iframe id="go" src="go.html"></iframe>
</div>
</body>
</html>
Both of these webpages are local files on the computer and I am using Google chrome with "--allow-file-access-from-files" flag.
How do I scroll the iframe to a certain position?
Upvotes: 12
Views: 19148
Reputation: 76003
You can use window.postMessage
to send a message from your parent frame to the iframe, telling it to scroll. This takes you setting-up a postMessage
script in the parent frame and a receiveMessage
script in the iframe. It's the receiveMessage
code that would actually scroll the iframe.
I've used this polyfill quite successfully: http://benalman.com/projects/jquery-postmessage-plugin/
Upvotes: 3
Reputation: 39807
This works:
document.getElementById("go").contentWindow.setTimeout("this.scrollTo(0, 200);",1);
Update. Doh. Works in IE only, but I think there's something there.
Update 2 This works universally:
document.getElementById("go").onload = function () { this.contentWindow.scrollTo(0, 200) };
You have to wait for iframe content to finish loading for scrollTo to work.
Upvotes: 9