iframes and anchor tag links - jump

**Peter Johnson** · 02-25-2007, 06:27 PM

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.

**Blake** · 02-25-2007, 07:23 PM

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>

**mburt** · 02-25-2007, 08:04 PM

Code:

document.getElementById("theframe").src

The standard way is to refer to frames with document.frames['theframe'], or document.frames[0] (in this case).

**jscheuer1** · 02-25-2007, 08:34 PM

Originally Posted by mburt

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.

**mburt** · 02-25-2007, 08:37 PM

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

**Peter Johnson** · 02-25-2007, 08:45 PM

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?

**jscheuer1** · 02-25-2007, 08:50 PM

Originally Posted by mburt

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.

**Blake** · 02-25-2007, 09:06 PM

Originally Posted by Peter Johnson

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>

**Peter Johnson** · 02-25-2007, 09:53 PM

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

**Veronica** · 02-26-2007, 10:25 PM

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.

Thread: iframes and anchor tag links - jump

Thread Tools

Search Thread

iframes and anchor tag links - jump

thank you

Bookmarks

Bookmarks

Posting Permissions