iFrame Scroll to Anchor Problem
http://www.thescripts.com/forum/thread89747.html
The scrollTo on page load event I first used worked great in Mozilla, Safari and even Internet Explorer on the Mac. However, the problem resided with Internet Explorer on Windows. In IE, the anchored content in the iFrame always took precedent (because it loaded last?) and jumped (scrolled) the main browser window down to the same target point as anchored in the iFrame, which in turn hid the DIV element at the top of the page. I solicited help here in the WebDeveloper forum but didn't receive a response. I continued to attack the problem with javascript using different layer and frame load order combinations without much success.
I finally resolved the issue by calling the scrollTo in an onLoad event in the frame element instead of in the HTML body tag. Ahh HAAA!!
Here is the code:
<script>
function loadorder() {
document.getElementsByName("iframename")[0].src= "http://www.foo.com/bar.htm#anchor_on_page"
window.scrollTo(0,0)
}
</script>
---
<iframe width="830" src="http://www.foo.com/bar.htm#anchor_on_page" height="500" scrolling="yes" frameborder="0" id="iframename" name="iframename" style="top: 200px; left: 0px; position:absolute" onLoad="loadorder();"></iframe>
I gleaned helpful information from the following sources:
http://groups.google.com/group/microsoft.public.scripting.jscript/
http://www.webmasterworld.com/forum21/7779.htm
http://www.dynamicdrive.com/forums/showthread.php?t=10557
http://www.dhtmlcentral.com/tutorials/tutorials.asp?page=3&id=5
http://www.tizag.com/javascriptT/javascript-getelementbyid.php
11 Comments:
Thanks for the tip! I blogged about using it here.
By Ben Fulton, at 8:20 PM
Brilliant. You've long since forgotten about this post, I'm sure, but you just solved a vicious problem for me.
By Anonymous, at 2:53 PM
Cheers! This helped me out a lot
By Anonymous, at 3:47 PM
Thank you so much, I though it was going to take me hours to figure out why this was happening!
By Anonymous, at 1:21 PM
Is there anyway to do this using only javascript and no perl? I dont have perl, and I have solved this problem for mac and windows FF, but ie is still jumping down the parent page...
By Unknown, at 2:04 PM
Perl? This has nothing to do with Perl, only javascript...
By Jim Epler, at 5:07 PM
awesome, thank you so much!
i was having this problem on a sharepoint site, so using your exact code caused an infinite loop (the page kept refreshing itself in the iframe). instead, the loadorder function only contained the window.scroll line and it worked like a charm!
By Drew, at 8:59 AM
Thanks for this solution!!! I posted it in another forum too. Yours seem to be the only solution for that out there, please keep it available.
www.htmlcodetutorial.com Thread about iframe scroll problem
By FfdE, at 5:15 AM
Great post! As drew mentioned, I too removed the 'document.getElementsByName("iframename")[0].src= "http://www.foo.com/bar.htm#anchor_on_page"' line and it worked like a charm!
By VendorLink, at 7:41 AM
Thanks, this helped me too!
By Paul D. Eden, at 12:33 PM
Thanks! This helped me too.
By Paul D. Eden, at 12:33 PM
Post a Comment
<< Home