Using Jump Links from Parent Page to an Iframe

Question

I have a parent page that contains an iFrame. The anchors have that have a respective The anchors are outside of the iframe but I want them to be able to work as page jump links.

I've tried adding and targeting the iframe but it still does not work for me.

Any suggestions or recommendations?

Answer 1

In order to target an element inside of the iframe, you'll want to use Javascript and target it like so:

function findText() { 
    var frame =  document.getElementById('iframe').contentWindow;
    frame.scrollTo(0,frame.document.getElementById('suchen').offsetTop);
}

Then your markup will be something like this:

<iframe src="http://fiddle.jshell.net/pkvhw/2/show/" id="iframe"></iframe>
<a href="javascript:findText();">Find Text</a> 

Where iframe is the id of the iframe on your page, and suchen is the id of the element you want to find within the iframe.

Here is a fiddle of it in action: http://jsfiddle.net/vs9xhs0o/

Note: You will run into issues when trying to use this going across domains. Most sites will not allow you to make cross-domain requests like this, so make sure you have control over the site you are viewing through the iframe.