How can I navigate to an anchor in a parent document (iFrame)?


I have a Hype animation running in an iFrame.
Clicking on a certain object should navigate to an HTML anchor in the parent document.
Normally you can do this with “#anchorname” and “target=_parent” in the URL.
Unfortunately the Mouse Click Event does not allow to set a target.

Is there any workaround for this ?

Thank you very much,

Thanks DBear, but this does not hit the point.

I have a Tumult Anim in an iFrame.
Clicking on a link inside the animation should scroll to a particular point in the main document.

You can see the problem here:

Hovering over the picture shows the employee’s name.
Clicking on it should scroll down to the address data on the main page.

You can place this within the inner HTML of an element:

<a href="#idofelement" target="_parent">linked text</a>

If this was not in an iframe, you could use the standard ‘mouse click’ -> go to URL field to place #idofelement

Thanks Daniel,

the iFrame is the only way to avoid collisions with the Wordpress theme.

How can I access the inner HTML of an element ?

There’s a couple ways:

Wasn’t told that this was in an iframe on a completely separate page :slight_smile:

Also with @Daniel’s solution you will find that the “_parent” will target the parent but it will not target the right document. At least in my test.

You could do a number of things. Note that the href (location) points to the document where you have the iframe in. In my example index.html but could be different in your case.

A link inside the innerHTML (⇧⌘E) of an element.

<a href="./index.html#anchor" target="_parent">Link</a>

A function on Mouse Click of the element

window.parent.location.href = "./index.html#anchor";

These both assume that the iframe html is in the same folder as the html page that has the iframe.


DBear, you are the best! :slight_smile:
The function works like a charm.

Thank you so much!

Thank you so very much for this! :stuck_out_tongue:

@DBear your solution works great for a link in a Hype container targeting an iframe but what if I put the Hype container into an iFrame as well? I don’t get that to work here sadly.

Is that even possible?

You should be able to target other frames if you use the link method with the frame name as the target:

<a href="./index.html#anchor" target="myiframeid">Link</a>

Alternatively, if you were doing this via code it would look like:

window.parent.document.getElementById("myiframeid").src = "./index.html#anchor";
1 Like

Hi Jonathan, thank you for the reply.
Well I can’t seem to get the code part to work here.

I made 2 Hype documents and exported them.
Hype document A is called: “top” and contains a Hype animation (top.html).
Hype document B is called: “bottom” with 2 buttons: ‘a href’ link, and link but in code. (bottom.html)

I create a new HTML page called “Fun_with_Hype.html” with 2 iFrames. The top frame has an non-Hype html document in it, the bottom frame has the Hype document B called “bottom” in it.

On opening “Fun_with_Hype.html” in a browser, the ‘href’ link in the button replaces the non-Hype html document for ‘top.html’ but the code link on the second button does nothing. But, if I replace the bottom iFrame with the actual Hype code that creates ‘bottom.html’ the code does work! So the code seems to be ok, but refuses to work from inside an iFrame. At least here…

Any suggestions?

Can you post the project…


I made a quick example which works.

The problem you are probably getting is the code button is most likely getting a cross domain protocol error.

i.e “file://” instead of “html://”

This should not happen when you have it on a server.

When on a server both ways should work.

frame calls to (212.5 KB)

1 Like

Oh, cool! Thank you so much for the effort.

I must admit I didn’t even think :sweat: of running it through a server as I did just switch HD’s and didn’t put Mamp Pro back.

But gee, gosh blush thank you for taking the time! :kissing_heart:
This is a life saver!

Not sure if I can get help with this as it may not be Hype related at all but I’m at a complete and total loss here.

I have an IPS forum and to make sure I don’t corrupt my official forum I have an near exact copy of that forum that I use as test ground. I already asked the developers of IPS for help but got a huge explanation why they can’t, so I hope someone here has an idea what goes wrong.

I have 2 iframes (A+B) which link to Hype content. The link from iFrame (A) loads Hype content in iFrame (B) and replaces the contents of iFrame (A) at the same time.

This is one of the 2 links.

This works perfectly without any errors on my test forum.
It also works when placed just in an HTML document.
It doesn’t work on my main forum. The 2 iFrames load but when I click the link in Iframe (A) nothing happens and I get cross domain error(s).

I use full paths, double-triple checked if I missed to add a “www” somewhere, non of this is the case, yet something truncates the “www” part from https://www.(my site) into https://(my site) but only on my main forum. Which makes me think the error is in the forum software but I actually haven’t got a clue where to look for.

Safari’s error log makes it look (for a noob like me) as if the error may be somewhere in the Hype script. Which makes no sense as it works outside this forum.

Can anyone offer me some idea where to look to fix this? What magic removes ‘www’ from a link and how to I counter this?

This sort of thing is normally controlled by who ever controls the domain space/server and DNS registry.
And looks like the site is doing a redirect to a plain domain when the subdomain www is used.

You will need to speak to who ever sets that up.

In the mean time what happens when you just use the plain domain in the links.

Again, thank you for your quick reply. :kissing_heart:

I just worked my way around it, (I thought) by bypassing the iFrames and now when a sound in Hype loads I get this:
XMLHttpRequest cannot load https://www.4f-(mysite).com/site/forum/uploads/mnw_preview/mnw_splash_screen.hyperesources/intro2.mp3?. Origin https://4f-(mysite).com is not allowed by Access-Control-Allow-Origin.

I’ll pull some arms at my web host maybe they know more, this is so maddening frustrating. (grrr!) :stuck_out_tongue_closed_eyes:

Did you try and set the links without the www

1 Like