Page 1 of 2 12 LastLast
Results 1 to 10 of 13

Thread: iframes and anchor tag links - jump

  1. #1
    Join Date
    Feb 2007
    Posts
    36
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Default iframes and anchor tag links - jump

    I have a main page that contains an iframe.
    In the page that is getting called into the iframe, there are named anchor tags to locations within this same page (<"a name="">).

    When you click on any of the named anchor links, not only does the iframed page jump - so does the entire main page that contains the firame.

    This doesn't happen with regular links (<a href=whatever.htm">), just named anchor links (<a href=#whatever">)

    Is there any way to keep this from happening? Some code in either the main page, or the page that's getting called into the iframe??
    Thanks.
    ps
    I've tried re-writing the links using javascript (scrollto, scrollintoview, etc), spelling out the entire href, but the entire page still jumps.

  2. #2
    Join Date
    Feb 2007
    Posts
    116
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Try something like this:

    iframes.html (the page containing the iframe):

    Code:
    <html>
    <head>
    <script type="text/javascript">
    function gotoAnchor(aname)
    {
    	var yScroll = document.body.scrollTop;
    	var xScroll = document.body.scrollLeft;
    	document.getElementById("theframe").src="iframe.html#" + aname;
    	self.scrollTo(xScroll, yScroll);
    }
    </script>
    </head>
    <body>
    <iframe id="theframe" src="iframe.html" width="100px" height="100px">
    </iframe>
    </body>
    </html>
    iframe.html (the contents of the iframe)

    Code:
    <html>
    <body>
    <a href='javascript:parent.gotoAnchor("hi")'>click here</a>
    1<br>
    2<br>
    3<br>
    4<br>
    5<br>
    6<br>
    7<br>
    8<br>
    9<br>
    10<br>
    11<br>
    <a name="hi">
    12<br>
    13<br>
    14<br>
    </body>
    </html>
    Last edited by Blake; 02-25-2007 at 07:53 PM.
    "Rock and roll ain't noise pollution." - AC/DC

    http://www.blake-foster.com

  3. #3
    Join Date
    Jul 2006
    Location
    Canada
    Posts
    2,581
    Thanks
    13
    Thanked 28 Times in 28 Posts

    Default

    Code:
    document.getElementById("theframe").src
    The standard way is to refer to frames with document.frames['theframe'], or document.frames[0] (in this case).
    - Mike

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Quote Originally Posted by mburt View Post
    The standard way is to refer to frames with document.frames['theframe'], or document.frames[0] (in this case).
    document.frames has no properties, it should be window.frames

    Getting the element often yields better results in these situations though.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. #5
    Join Date
    Jul 2006
    Location
    Canada
    Posts
    2,581
    Thanks
    13
    Thanked 28 Times in 28 Posts

    Default

    It can be either/or. document.frames works fine within a function called from the body, window.frames can work anywhere I believe.
    - Mike

  6. #6
    Join Date
    Feb 2007
    Posts
    36
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Default thank you

    Thank you both for the fast replies.
    Blake's code works perfectly.

    One last question though -
    Is there any way to write it so that the link in the iframed page (iframe.html) would work whether the page was framed or not, in other words even if the page stood on its own and wasn't part of main.html?

  7. #7
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Quote Originally Posted by mburt View Post
    It can be either/or. document.frames works fine within a function called from the body, window.frames can work anywhere I believe.
    Baloney:

    Code:
    <iframe src="black.htm"></iframe><br>
    <a href="#" onclick="alert(document.frames[0].src);return false;">m</a>
    It gets worse, window.frames[0].src is undefined so, even if you use the correct syntax, you cannot get access to the frame element that way.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  8. #8
    Join Date
    Feb 2007
    Posts
    116
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by Peter Johnson View Post
    One last question though -
    Is there any way to write it so that the link in the iframed page (iframe.html) would work whether the page was framed or not, in other words even if the page stood on its own and wasn't part of main.html?
    iframe.html:

    Code:
    <html>
    <body>
    
    <a href="#hi" onclick='if (parent.gotoAnchor) {parent.gotoAnchor("hi"); return false;}'>click here</a>
    
    1<br>
    2<br>
    3<br>
    4<br>
    5<br>
    6<br>
    7<br>
    8<br>
    9<br>
    10<br>
    11<br>
    <a name="hi">
    12<br>
    13<br>
    14<br>
    </body>
    </html>
    iframes.html

    Code:
    <html>
    <head>
    <script type="text/javascript">
    function gotoAnchor(aname)
    {
    	var yScroll = document.body.scrollTop;
    	var xScroll = document.body.scrollLeft;
    	document.getElementById("theframe").src="iframe.html#" + aname;
    	self.scrollTo(xScroll, yScroll);
    }
    </script>
    </head>
    <body>
    <iframe id="theframe" src="iframe.html" width="100px" height="100px">
    </iframe>
    </body>
    </html>
    Last edited by Blake; 02-25-2007 at 09:17 PM.
    "Rock and roll ain't noise pollution." - AC/DC

    http://www.blake-foster.com

  9. #9
    Join Date
    Feb 2007
    Posts
    36
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Default

    Perfect.
    It just makes it easier to test the links offline if it works in or out of the iframe.
    Thank you again!

  10. #10
    Join Date
    Feb 2007
    Posts
    293
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    This script is really cool. But when I tried it, it only works if both files are in the same directory.
    Is there any way it could work if the files were in different directories, or even on different servers? I would have access to both servers, so that wouldn't be a problem. I was just wondering if the parent relationship would still work. I tried playing around with the URLs to make them absolute, not relative, but the javascript didn't work when I did.

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •