Anchor Links on Parent Page that Jump To Different Sections in Iframe

Question

I have a main parent page that I have set up with Page Section Name

When triggered I want the iFrame to slide down to that section inside of the iFrame. Is this possible? I know inside of the same page i could just create an ID with the same href="#ID" but I don't know where to begin with this. Any solutions or recommendations would be great. Thanks!

Answer 1

You can give the IFRAME a name attribute, and the link a target attribute that points to that particular name. Here's an example:

 #container { display: flex; } a, iframe { margin: 0 16px 8px; display: block; } 

 <div id="container"> <div> <a href="https://vuejs.org/#hero" target="my-iframe"> Go to the top in the IFRAME </a> <a href="https://vuejs.org/#footer" target="my-iframe"> Go to the footer in the IFRAME </a> </div> <iframe name="my-iframe" src="https://vuejs.org/" width="300" height="200"></iframe> </div> 

Note that I'm providing the full URL https://vuejs.org/#footer in the HREF attribute, not just #footer ; the shorthand version only works if the link target is in the same document. As long as the URL before the # doesn't change, the browser will still only scroll to the named target, not reload the frame.