Scrolling iframes using JavaScript?

Question

Scrolling iframes using JavaScript?

I am dynamically loading an iframe using JavaScript. After loading, how can I make it scroll a certain number of pixels (i.e. after loading a page in an iframe, how can I make iframe scroll itself to a specified area of the page?)

+39

javascript scroll iframe

rawrrrrrrrr Jul 28 '09 at 6:30

source share

9 answers

CMS · Answer 1 · 2009-08-04 20:53

You can use the onload to determine when the iframe finished loading, and there you can use the scrollTo function on the contentWindow iframe to go to a specific pixel position, left and top (x, y):

 var myIframe = document.getElementById('iframe'); myIframe.onload = function () { myIframe.contentWindow.scrollTo(xcoord,ycoord); }

You can check the working example here .

Note. . This will work if both pages are in the same domain.

Greg · Answer 2 · 2012-01-18 06:20

Inspired by Nelson's comment, I did it.

Workaround for javascript The same origin policy regarding the use of .ScrollTo () for a document coming from an external domain.

A very simple job for this is to create a dummy html page that hosts an external website, and then call .ScrollTo (x, y) on that page after loading it. Then the only thing you need to do is create a frame or iframe on this website.

There are many other ways to do this; this is by far the easiest way to do this.

* note that the height must be large to accommodate the maximum value of the scroll bar.

- home.htm

 <html> <head> <title>Home</title> </head> <frameset rows="*,170"> <frame src=body.htm noresize=yes frameborder=0 marginheight=0 marginwidth=0 scrolling=no> <frame src="weather.htm" noresize=yes frameborder=0 marginheight=0 marginwidth=0 scrolling=no> </frameset> </html>

- weather.htm

 <html> <head> <title>Weather</title> </head> <body onLoad="window.scrollTo(0,170)"> <iframe id="iframe" src="http://forecast.weather.gov/MapClick.php?CityName=Las+Vegas&state=NV&site=VEF&textField1=36.175&textField2=-115.136&e=0" height=1000 width=100% frameborder=0 marginheight=0 marginwidth=0 scrolling=no> </iframe> </body> </html>

Sony Santos · Answer 3 · 2015-05-07 20:16

Inspired by the comments of Nelson and Chris , I found a way around the same origin using div and iframe :

HTML:

 <div id='div_iframe'><iframe id='frame' src='...'></iframe></div>

CSS

 #div_iframe { border-style: inset; border-color: grey; overflow: scroll; height: 500px; width: 90% } #frame { width: 100%; height: 1000%; /* 10x the div height to embrace the whole page */ }

Now suppose I want to skip the first 438 (vertical) pixels of the iframe page by scrolling to that position.

JS solution:

 document.getElementById('div_iframe').scrollTop = 438

JQuery solution:

 $('#div_iframe').scrollTop(438)

CSS solution:

 #frame { margin-top: -438px }

(One is sufficient for each solution, and the CSS effect alone is slightly different, as you cannot scroll up to see the top of the iframed page.)

Steve Claridge · Answer 4 · 2010-10-25 13:58

JQuery solution:

 $("#frame1").ready( function() { $("#frame1").contents().scrollTop( $("#frame1").contents().scrollTop() + 10 ); });

Justin Ludwig · Answer 5 · 2009-08-04 20:42

Use the scrollTop property of the content of the frame to set the vertical vertical movement of the content by a certain number of pixels (for example, 100):

 <iframe src="foo.html" onload="this.contentWindow.document.documentElement.scrollTop=100"></iframe>

Chloe · Answer 6 · 2015-03-29 04:23

Based on Chris comment

CSS

 .amazon-rating { width: 55px; height: 12px; overflow: hidden; } .rating-stars { left: -18px; top: -102px; position: relative; }

HAML

 .amazon-rating %iframe.rating-stars{src: $item->ratingURL, seamless: 'seamless', frameborder: 0, scrolling: 'no'}

mostlyliquid · Answer 7 · 2013-07-12 16:26

Or you can set margin-top to iframe ... a bit hacky, but for now it works in FF.

 #frame { margin-top:200px; }

G. Andrews · Answer 8 · 2015-10-29 13:08

I am also having problems using any javascript "scrollTo" function in an iframe on an iPad. Finally, an “old” solution to the problem was found, just a hash to the anchor.

In my situation, after returning ajax, my error messages were set to display at the top of the iframe, but if the user scrolls down in what is admittedly a long form, the view disappears and the error appears “above the crease”, Also assuming the user scrolls down the page, the top-level page was scrolled from 0.0 and was also hidden.

I added

 <a name="ptop"></a>

at the top of my iframe document and

 <a name="atop"></a>

at the top of the top level page

then

  $(document).ready(function(){ $("form").bind("ajax:complete", function() { location.hash = "#"; top.location.hash = "#"; setTimeout('location.hash="#ptop"',150); setTimeout('top.location.hash="#atop"',350); } ) });

in iframe.

Do you have an iframe hash in front of the top page or just the iframe scrolling will scroll and the top will remain hidden, but while it’s a bit “jumpy” due to time-out intervals. My guess is that labels everywhere would allow different scroll points to be used.

user2958869 · Answer 9 · 2013-11-07 23:42

 var $iframe = document.getElementByID('myIfreme'); var childDocument = iframe.contentDocument ? iframe.contentDocument : iframe.contentWindow.document; childDocument.documentElement.scrollTop = 0;

Scrolling iframes using JavaScript?

More articles: