Menu
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?
518
To scroll an iframe with JavaScript, we can use the scrollTo method. const myIframe = document. getElementById("iframe"); myIframe. onload = () => { myIframe.
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.
54
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/
41
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
