12

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:

  1. $('#go').scrollTop(200);

  2. $('.footer').scrollTop(200);

  3. 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?

aksu
  • 5,221
  • 5
  • 24
  • 39
stackErr
  • 4,130
  • 3
  • 24
  • 48
  • Do you know the content of "go.html"? can u simple focus on a required element within it? – Yuriy Galanter May 29 '13 at 19:53
  • @YuriyGalanter I do know the contents of go.html but it contains another iframe on another domain so I cant access it. I did the iframe in an iframe to get around the same origin policy. – stackErr May 29 '13 at 19:55

2 Answers2

9

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.

Yuriy Galanter
  • 38,833
  • 15
  • 69
  • 136
3

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/

Jasper
  • 75,717
  • 14
  • 151
  • 146
  • The solution Yuriy provided is much easier to implement than this. Thanks for the plugin, will come in handy down the road! – stackErr May 29 '13 at 20:43