[Webinar] Streamline your web hosting managementRegister Today

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1728
  • Last Modified:

setting scroll position from within an IFRAME

From within an iframe, is there any reason window.scrollTo(0,0) wouldn't work? In other words, the client code for the iframe itself wants to scroll to the top of the iframe's client area whenever it is loaded. I thought the logic was window.scrollTo(0,0) but it's not working. Any ideas?

(To be perfectly clear: if the situation is
<body>
<iframe id=f1 src="test.htm"></iframe>
</body>

and the contents of test.htm contains javascript like:

<body onload="window.scrollTo(0,0)">
<blah blah>
</body>

is there any reason the iframe contents themselves won't be scrolled to the top and left within their client area?
0
roricka
Asked:
roricka
  • 6
  • 4
1 Solution
 
limweizhongCommented:
only if the iframe and the top window are same domain pages (seems to me that for you they are), then you could tell the top window to scroll to the top, like so:
top.scrollTo(0,0);
0
 
limweizhongCommented:
but if you want to scroll to the top of the iframe window, then you use:
function getX(obj){ var o=0; do o+=obj.offsetLeft; while( obj=obj.offsetParent ); return o; }
function getY(obj){ var o=0; do o+=obj.offsetTop; while( obj=obj.offsetParent ); return o; }
var t=document.getElementById('f1');
top.scrollTo(getX(t),getY(t));

Open in new window

0
 
limweizhongCommented:
Sorry it should be:
function getX(obj){ var o=0; do o+=obj.offsetLeft; while( obj=obj.offsetParent ); return o; }
function getY(obj){ var o=0; do o+=obj.offsetTop; while( obj=obj.offsetParent ); return o; }
var t=top.document.getElementById('f1');
top.scrollTo(getX(t),getY(t));

Open in new window

0
Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

 
rorickaAuthor Commented:
limweizhong --
I guess I don't understand your answer, but I appreciate you trying to help.

Why can't I just use window.scrollTo(0,0)? Why wouldn't that work? (This was my question originally and I don't think you have mentioned it.)

But with regard to the solution you DID provide, how could it EVER be correct to use top.scrollTo() ?? Won't that ALWAYS mean scrolling the container (i.e., top) window?? Doesn't "top.scrollTo()" mean the container window is going to scroll? I don't want the container window to scroll. I want the IFRAME wndow to scroll. I have a feeling I am missing something here -- could you address whether or not you are talking about scrolling the top window or scrolling the iframe window?

PS. I have written very simple examples and have no trouble using scrollTo() inside the iframe, to scroll the iframe. But in complex situations, IT DOESN'T WORK. My question to experts-exchange is: WHY WOULD THIS EVER FAIL TO WORK???? It seems to me you have given a very complicated way of scrolling the parent window, NOT an explanation of why the very simple method of scrolling the iframe window might sometimes fail.

But you obviously understand this problem better than I do. Please explain to me where I am going off the tracks!! Thanks.
0
 
limweizhongCommented:
window.scrollTo should always work as long as the scroll position is valid (which 0,0 is), so you should show us the exact situation where it does not work, which is probably a bug, or that your HTML is not complete or not standard.
0
 
limweizhongCommented:
What I thought you would have wanted to do is to scroll the parent window to where the iframe is so that the users would be pointed there when the iframe is loaded or navigated.
0
 
rorickaAuthor Commented:
Limweizhong,

No, in my case there's no problem with the users seeing the iframe. As the question says: setting scroll position from within an IFRAME. "WITHIN an iframe" (emphasis added).

Now, as far as posting the code... See, that's a bit of a problem. There's just too much happening -- this is on a page full of dynamic controls (both in the parent window and in the iframe.)

But anyway, you've kind of answered my question. Basically, you are saying "NO". Are you sure? There's nothing special about setting the scroll position from within the iframe? There are no caveats where it is known not to work?? I looked at other sites, and there was some stuff about problems with this function inside an iframe, but it was rather incoherent. I repeat -- are you SURE there are no known issues??

0
 
limweizhongCommented:
Actually I was waiting for another comment about why you accepted my answer. (I still find it weird why you put that in the onload event handler.) Anyway I am not completely sure there are no known issues, since in different browser implementations there may be bugs. So was it a bug with the browser?
0
 
rorickaAuthor Commented:
limweizhong,

Honestly, using "onload" was just a way of triggering the scroll. I could have put it in a javascript function that was activated by a button click. That wasn't supposed to be important. The important thing was that the command to scroll was being given from WITHIN the iframe source, NOT the enclosing container. I tried to make that point as clear as I could. The dummy code, where I used the onload, was just supposed to be frosting on the cake. Sorry it misled you.
0
 
rorickaAuthor Commented:
Sorry -- I didn't answer your final question. The problem, as it turned out, had more to do with timing than with the browser (i.e., using setTimeout() to invoke the scolling after the iframe loaded. Also, I discovered that using scrollIntoView() instead of scrollTo() seemed to be a bit more reliable.

But I must confess, at the end of the day, while I was still trying to figure out the best way to accomplish the proper positioning of the contents of the iframe, I discovered my UNDERLYING problem of why the contents were not positioned in the first place. It had nothing to do with scrolling -- instead I was erroneously setting the height of a container. Once I found that and eliminated it, the whole scrolling mess went away.

But in the end, your answer that there was really no reason why scrollTo should work differently from inside the iframe compared to outside was the correct response, hence the points!
0

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 6
  • 4
Tackle projects and never again get stuck behind a technical roadblock.
Join Now