Tech Musings

Thursday, December 21, 2006

iFrame Scroll to Anchor Problem

After almost eight hours of trial and error I managed to stitch together a solution for a scrollTo problem I was having with a page that included layers and frames. At issue was the need to maintain an anchored scroll position in an external page that loaded in an iframe (frame), but to make sure the parent page's header (which was contained in a DIV element) would remain visible at the top of the window. It was very similar to the problem described in the following thread that was never fully resolved:

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 Blogger 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 Anonymous, at 2:53 PM  

  • Cheers! This helped me out a lot

    By Anonymous 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 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 Blogger Unknown, at 2:04 PM  

  • Perl? This has nothing to do with Perl, only javascript...

    By Blogger 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 Blogger 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 Blogger 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 Blogger VendorLink, at 7:41 AM  

  • Thanks, this helped me too!

    By Blogger Paul D. Eden, at 12:33 PM  

  • Thanks! This helped me too.

    By Blogger Paul D. Eden, at 12:33 PM  

Post a Comment

<< Home