Log in

View Full Version : 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):



<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)



<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
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
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
It can be either/or. document.frames works fine within a function called from the body, window.frames can work anywhere I believe.

Baloney:


<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
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:



<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



<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.
Blake
02-27-2007, 05:09 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.


You just need to put in the full url:



<html>
<head>
<script type="text/javascript">
function gotoAnchor(aname)
{
var yScroll = document.body.scrollTop;
var xScroll = document.body.scrollLeft;
document.getElementById("theframe").src="http://www.somewhere.com/iframe.html#" + aname;
self.scrollTo(xScroll, yScroll);
}
</script>
</head>
<body>
<iframe id="theframe" src="http://www.somewhere.com/iframe.html" width="100px" height="100px">
</iframe>
</body>
</html>
Veronica
03-01-2007, 03:26 AM
Thanks for writing it out. I did try that. What I did to see if it was using the javascript or just the A name was to create two "a names", hi1 and hi2, with the a href going to hi1 and the javascript going to hi2:

<a href="#hi1" onclick='if (parent.gotoAnchor) {parent.gotoAnchor("hi2"); return false;}'>click here</a>

When the files are on the same server, the link goes to hi2.

But if they're on different servers, it goes to hi1, so apparently it's not reading that there's a parent with a gotoAnchor.

Maybe it's a server security issue? It's too bad, cause it's neat otherwise.
mundeno
02-11-2009, 09:18 PM
I tried to get the original script in this thread to work for a while...but it wasn't happening....

I found this page that uses javascript and ID to perform the same function of a #link, but without the "parent" page jumping:

http://www.huntingground.freeserve.co.uk/main/mainfram.htm?../webplus/iframes/iframe_anchor_dir1.htm

It worked for me after figuring a few things out. I had to get rid of any "!DOCTYPE html PUBLIC" information in the top of the page for my iframe content pages. Also, I found out that it is best to avoid embedding the
<div id="anchor1">anchor1</div> inside any table elements....

instead just put the divs outside of tables if you have any.


I hope this helps someone! It looks like tons of people have tried many different ways of doing this, and I researched many others, but this one worked best for me.