Forum Moderators: open

Message Too Old, No Replies

Open a new page and jump to an anchor

IFRAME anchor new page

         

ken4runner

10:33 pm on Jan 5, 2004 (gmt 0)

10+ Year Member



I am having the same problem as "pseudo1" was in the topic "Iframes Linking To Another Iframe With Anchor Tags"

I don't think there was a solution posted, so I would like to ask for some guidance on this topic...

I have a page with an inline frame, lets call it page1 and frame1.

I need to have links in frame1 to open up a new page, call it page2, which has an inline frame called frame2.

the link from page1, frame1 needs to jump to an anchor in page2's frame 2, lets call the anchor "My_anchor"

I can make a link from page1, frame1 that opens the new page (page2) and loads the correct page into the frame, but I cannot get it to go to the anchor in the inline frame. I have tried all kinds of crazy javascript, but nothing works. It seems like this would be simple....

It seems like the following would work, but it will only loads the page, it will not go to the anchor

<a href="page2.html" target="_top" onClick="top.frames['frame2'].location='page2#My_anchor';">Go To My Anchor on page 2</a>

I have searched the web and many forums and have not found a clear solution on how this can be done.... if it can be done.

the problem seems to be tied to OPENING A NEW PAGE and GOING TO AN ANCHOR at the SAME TIME. On a single page I can update a frame and link to an anchor just fine. But when I try to open a new page and go to an anchor at the SAME TIME, it doesn't work.

If anyone knows how to do this - please post a reply.
I hope I have explained the problem thorougly enough....

tedster

12:09 am on Jan 6, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Welcome to WebmasterWorld, ken4runner.

I haven't worked much with this issue myself, but while reading your post an idea occurred to me.

target="_top" uses one of the reserved values for the target attribute, and browsers treat it in an exceptional fashion. That is, the newly opened window is NOT named "_top", and definitely is not named "top". Any new link with a target="_top" attribute will open yet another window, rather than loading a new document into the previously opened one.

You're also struggling with the fact that javascript is local to the window where it is first scripted. You need to go through some extra steps to pass javascript objects from one window pass to another window.

My first approach would involve using javascript document.write() on page2.html -- I would pass the anchor name from page1 as a query string appended to the url, then extract that anchor name in page2 and use document.write() to write it directly into the iframe's src tag.

ken4runner

2:58 pm on Jan 6, 2004 (gmt 0)

10+ Year Member



tedster - thanks for the welcome and for the tip...

the code I am using is not opening a new window, but I will try _parent and _self (instead of _top), since I only have an inline frame maybe these will behave differently... I'll try that today and let you know what happens.

the scripting you mentioned trying is way above my current javascript capabilities... could you give me some pointers on how that might work?

mucho thanks -
ken

AWildman

6:22 pm on Jan 7, 2004 (gmt 0)

10+ Year Member



I too make extensive use of iframes. So let's start with simply getting a link from page 1 to open page2 AND change the src of page2's iframe.

Here's how I did it (this assumes the iframe name is the same from page1 to page2:

Page1 link: <a href = "somedir/page1.htm?framename=anotherdir/page2.html" target = "_top">some anchor text</a>

Then the script I have onload: <body onload = "init(somedir/framepage1.html')">

function init(defaultpath)
{
var locsubstr = location.search.substring(1);//find url parameter
if((locsubstr.indexOf("framename")!= -1))//if there is a new path for frame
{
var frameloc = locsubstr.substring(locsubstr.indexOf("=") + 1, locsubstr.length);//find the newpath for frame

if((window.location.href.indexOf("#")!= -1))
{frameloc += window.location.href.substring(window.location.href.indexOf("#"), window.location.length);}

parent.frames[0].location.replace(frameloc);//change frame to new path
}
else
{parent.frames[0].location.replace(defaultpath);}//if there isn't a new path, set frame to default
}
}

Is this alot of js? Yes. If you have a simpler algo, I'd love to see it.

As for the anchor thing: GOOD LUCK! I could get it to work in IE but not in NN. Never got it to work in NN6 or higher. I looked hard and you'll find a previous post of mine asking about just that. Again, if you find a solution, please let me know.

tedster

6:35 pm on Jan 7, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



the code I am using is not opening a new window

Whooops - sorry about the brain glitch on my end. Shows you how much I don't work with frames and iframes, doesn't it.

I'll give this a re-think when I have a chance and let you know if I have any success.

ken4runner

3:35 pm on Jan 14, 2004 (gmt 0)

10+ Year Member



Sory it has been so long since I posted on this topic -

I eventually gave up on opening a new page and getting the page to go to the anchor in the iframe in the new page. I don't think that will ever work without tons of crazy javascripting.

what I ended up doing was adding a 2nd iframe, and instead of loading a new page - I update both iframes with the link. this way I can go to any anchor in each of these pages, no problems.

the top iframe is a navigational table of centents for the page that I want to always be shown on the page, even when the user has scrolled to the bottom of the 2nd iframe, which is the actual content of the page. if that makes any sense.

this is working fairly well, a few little things I am still working on....
if anyone wants more details - just ask.

If anyone ever comes up with a (simple) way to click a link, open a new page (in the same browser window), and then go to an anchor in an iframe in that window - please share.

thehittmann

3:54 pm on Jan 14, 2004 (gmt 0)

10+ Year Member



ummm i made a little test and this is how i did it.

<a href="page2.htm#anch" target="_self">link</a>

this is the link that will show on the first iframe page, it worked fine for me to open the 2nd page and jump right to where i asked it to. No fancy java needed.

ken4runner

4:14 pm on Jan 14, 2004 (gmt 0)

10+ Year Member



thehittmann - that was a good suggestion, but it won't work in my situation.

the first page has an iframe. the link is in that iframe. using _self for any link in that iframe will only update content of the iframe, not the whole window.

I need to load a new page (from the link mentioned above). this new page has an iframe. I need the original link to open the new page, and jump to an anchor in the new page's iframe.

I've tried just about everything to do this, but it won't work....

thehittmann

6:17 pm on Jan 14, 2004 (gmt 0)

10+ Year Member



i think i got it sorted out what you were trying to do. let me see.
the first page has an iframe.....inside this iframe there is a link. you want that link to open a new page and jump right to the sopt inside an iframe.

now here is what i done.

index.htm
//inside body
<iframe src="1.htm" width="100%" height="400" scrolling="yes" title="frame1"></iframe>

1.htm
//inside body
//everything you want in the iframe and your link
<a href="2.htm" target=_parent>2.html</a>

2.htm
//inside body
<iframe src="3.htm#link" width="100%" height="400" scrolling="yes" title="frame2"></iframe>

3.htm
//inside body
//big list of info in my case i used a-z with s as anchor
<p>s<a name="link"></a></p>

you can replace _parent for _blank if you want a new window _parent will open the frame and go right to the anchor in the same window

ken4runner

2:32 pm on Jan 15, 2004 (gmt 0)

10+ Year Member



thehittmann - thanks again for the reply, but what you described is not the same as my scenario...

there are two pages, page1.html and page2.html

each of these pages has its own iframe.

page1's iframe calls the file iframe1.html. page2's iframe calls the file iframe2.html.

these pages all already exist.

there is a link in iframe1.html that opens up page2.html (takes over the same entire window), and I want this link to jump to a specific anchor in iframe2.html.

other links in iframe1.html will open up page2.html and jump to other anchors in iframe2.html.

It is not just that I want the page to open to the same spot everytime the page is opened. that would be easy. I need to be able to load a new page and go to an anchor in the new page's iframe. so far, I cannot find any way to do this.

I think the problem has to do with the scope of document objects.

thanks -
ken

thehittmann

3:53 pm on Jan 15, 2004 (gmt 0)

10+ Year Member



If you follow my code that is what happens if you would like you can sticky me your email and i can send you the test files that i made.

They do exactly what you say you want.

ken4runner

4:58 pm on Jan 15, 2004 (gmt 0)

10+ Year Member



thehittmann - I finally see how your pages work. thanks for sending them to me.

the anchor is hard-coded into the webpage with the frame... that way when the page is opened it automatically goes to that anchor, not because the link told it to, but because the page is built to always go to that anchor.

If i have multiple links in my iframe, I will have to create multiple copies of my pages each with the anchor hardcoded into the iframe tag...

This is a good workaround for something that so far has been impossible, but it will require lots of duplicate files, I think...

maybe I can just create the whole page with javascript, and that way it will not require the copies of the same files...

thanks for the ideas!

-ken

Mikeboy

11:12 pm on Jan 30, 2004 (gmt 0)

10+ Year Member



Hello

Ive been trying to figure out how to do this for about 5 hours this evening without any success.

I wish to have a menu page with 3 links. Lets call them 'cherry', 'banana', and 'orange'. Each of these links will lead to their relevent pages, cherry.html, banana.html etc

I want to have one page set up as a template holder using an Iframe that can accept any source. I'm calling this 'holder.html'.

When I follow a link from the menu page I want it to open the holder.html page, with the particular fruit page as its source in the iframe. Just to make sure thats 100% clear, if say I click cherry.html, I want cherry.html to be loaded into holder.html. If I click banana.html I want it to load into that same holder.html.

Everything I have tried has failed! :(

Here is my latest attempt using 'Awildman's' script from above :

menu.html

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>New Page 1</title>
</head>
<body>
<a href = "holder.html?framename=cherry.html" target = "_top">Cherry</a>
<a href = "holder.html?framename=banana.html" target = "_top">Banada</a>
<a href = "holder.html?framename=orange.html" target = "_top">Orange</a>
</body>
</html>

holder.html

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>New Page 2</title>
</head>
<body onload = "init(holder.html?!?')">
<script>
function init(defaultpath)
{var locsubstr = location.search.substring(1);//find url parameter
if((locsubstr.indexOf("framename")!= -1))//if there is a new path for frame
{var frameloc = locsubstr.substring(locsubstr.indexOf("=") + 1, locsubstr.length);//find the newpath for frame
if((window.location.href.indexOf("#")!= -1))
{frameloc += window.location.href.substring(window.location.href.indexOf("#"), window.location.length);}
parent.frames[0].location.replace(frameloc);//change frame to new path }
else
{parent.frames[0].location.replace(defaultpath);}//if there isn't a new path, set frame to default }
</script>

<iframe name="leisurepage" id="leisurepage"
marginwidth="0" marginheight="0"
src="do i still need this iframe bit?!?">

</body>
</html>

cherry.html

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>New Page 3</title>
</head>
<body>
Cherrys blah blah blah
</body>
</html>

Well this doesn't do anything and I am quite confused as to what page should be referred to in the above, where? I reckon I've made such a mess of it , might need starting from scratch ...

Any assistance will be great.

Thanks in advance

Mike

ken4runner

3:56 pm on Feb 2, 2004 (gmt 0)

10+ Year Member



hey Mike

you shouldnt have to do anything fancy to load a new page and load new content into the iframe in the document - I think your code is overkill for this task...

the trouble only begins when you want to jump to an anchor in one of those iframes that you have loaded in the new page (the original issue of this post)

your "holder" should have only one iframe, with one name. it looks like your links are all pointing to different named frames, which is probably not necessary...

suppose you have one iframe in holder.html, and that iframe is named "fruity"

your links from any other page would look like this (assuming all your files are all located in the same folder)

<a href="holder.html" target="_top" onClick="top.frames['fruity'].location='cherry.html';">cherry</a>

<br>

<a href="holder.html" target="_top" onClick="top.frames['fruity'].location=banana.html';">banana</a>

<br>

<a href="holder.html" target="_top" onClick="top.frames['fruity'].location=orange.html';">orange</a>

these links I think will do what you want, open the holder webpage, and load the iframe with the proper page

So long as you dont need to jump to a specific anchor in the page being loaded in your iframe, you're golden.

let me know if this makes sense...

if you ever want to jump to anchors, you will have to rethink this - and I have a few ideas on that if you ever need your links to jump to an anchor.

take it easy,
ken

Mikeboy

11:52 pm on Feb 3, 2004 (gmt 0)

10+ Year Member



Ken ,

That's perfect! I will try it , I have great confidence that it will be all good :)

Thanks so much for explaining it, great help

Cheers! :D

Mike

bcman

7:46 pm on Feb 29, 2004 (gmt 0)



Hi ken,

The code is looking good however I get the following error: Description:'top.frames.content' is null or not an object.

I am using this as code:
<a href="content.htm" onClick="top.frames['content'].location='data.htm';"><IMG WIDTH="132" HEIGHT="16" SRC="home/images/index_13.gif" BORDER="0"></a>

content.htm contains the iframe named content
data.htm is just data to be displayed in the iframe

What do you think the problem is?
thanks in advance for your help!

bcman