Answered Can a hyperlink inside an iframe manipulate separate iframe outside of it?

[yumedoll]

So I have this homepage that contains two separate iframes that are sourced from two separate html files. One is a calendar, the other is a blog. What I want to do is to put hyperlinks on marked dates on the calendar that the user can click to jump to the related blog post of that date.
Something like this:

Calendar's marked date will have an anchor tag like so, let's say the date is the 15th of the month

<a href="#blogpost1">15</a>

And then the blog post in the separate iframe

<div class="blog" id="#blogpost1">15th May is my friend's birthday :)</div>

But I'm not sure if this is possible. If it's not possible, I'd really appreciated if someone can suggest a workaround but if not, it's ok, I'll try to find a way myself 🙂

 

[tomliv]

I do not believe an iframe can talk to the host page, let alone another iframe. My suggestion would be to make the html part of the page rather than having iframes.

 

[nicholascn]

Yes, it is possible for a hyperlink inside an iframe to manipulate a separate iframe outside of it, but there are specific conditions that must be met for this to work.

Key Points:

1. Same-Origin Policy:
- Both the iframe and the parent page (or the other iframe) must be from the same origin (same protocol, domain, and port). If they are not, the browser's security policy will block any attempts to manipulate the external iframe to prevent cross-site scripting (XSS) attacks.

2. Accessing the Parent Window:
- If the above condition is met, you can use JavaScript to manipulate the other iframe. For example, from within the first iframe, you can access the parent window using window.parent and then target the other iframe like this:

javascript
     window.parent.document.getElementById('iframeID').src = 'newURL';

- Here, 'iframeID' is the ID of the iframe you want to manipulate, and 'newURL' is the new source URL you want to load in that iframe.

3. Hyperlink Example:
- If you want to change the source of the external iframe using a hyperlink inside the first iframe, you could use something like this:

html
     <a href="#" onclick="window.parent.document.getElementById('iframeID').src='newURL';">Click here to change iframe</a>

4. Cross-Origin Restrictions:
- If the iframes are from different origins, you would need to look into server-side solutions, proxying, or other techniques to work around the restriction, but this generally involves more complex setups and potential security risks.

Summary:
Yes, a hyperlink inside an iframe can manipulate a separate iframe outside of it, but both iframes need to be from the same origin for this to work seamlessly due to the browser's same-origin policy. If they are, you can easily achieve this using JavaScript.

 

[tomliv]

Yes, it is possible for a hyperlink inside an iframe to manipulate a separate iframe outside of it, but there are specific conditions that must be met for this to work.

Key Points:

1. Same-Origin Policy:
- Both the iframe and the parent page (or the other iframe) must be from the same origin (same protocol, domain, and port). If they are not, the browser's security policy will block any attempts to manipulate the external iframe to prevent cross-site scripting (XSS) attacks.

2. Accessing the Parent Window:
- If the above condition is met, you can use JavaScript to manipulate the other iframe. For example, from within the first iframe, you can access the parent window using window.parent and then target the other iframe like this:

javascript
     window.parent.document.getElementById('iframeID').src = 'newURL';

- Here, 'iframeID' is the ID of the iframe you want to manipulate, and 'newURL' is the new source URL you want to load in that iframe.

3. Hyperlink Example:
- If you want to change the source of the external iframe using a hyperlink inside the first iframe, you could use something like this:

html
     <a href="#" onclick="window.parent.document.getElementById('iframeID').src='newURL';">Click here to change iframe</a>

4. Cross-Origin Restrictions:
- If the iframes are from different origins, you would need to look into server-side solutions, proxying, or other techniques to work around the restriction, but this generally involves more complex setups and potential security risks.

Summary:
Yes, a hyperlink inside an iframe can manipulate a separate iframe outside of it, but both iframes need to be from the same origin for this to work seamlessly due to the browser's same-origin policy. If they are, you can easily achieve this using JavaScript.

Interesting. This works as long as you have access to the contents of the iframe (source code) and can edit it. Re-reading the original question it seems the OP has at least access to the calendar so as to control the href of the date links. As I read the rest of the original question, I understood his need was to be able to link to a specific section of the content of the second iframe. "What I want to do is to put hyperlinks on marked dates on the calendar that the user can click to jump to the related blog post of that date." Seems he needs to reach into the second iframe to an anchor prehaps. Not sure if that's possible. Can the new source of the second iframe include an anchor to a specific part of the content of that iframe?

My experience with iframes has been that they were third-party and not something I controlled the source of.

Even if the OP has access to both iframes source, I still stand by the idea that it would be easier to build everything on a single page and either jump to anchors or show/hide the desired content based on calendar link clicks. Without more context, I am not seeing the need for iframes if the OP is responsible for the content of those iframes.

 

[yumedoll]

Yes, it is possible for a hyperlink inside an iframe to manipulate a separate iframe outside of it, but there are specific conditions that must be met for this to work.

Key Points:

1. Same-Origin Policy:
- Both the iframe and the parent page (or the other iframe) must be from the same origin (same protocol, domain, and port). If they are not, the browser's security policy will block any attempts to manipulate the external iframe to prevent cross-site scripting (XSS) attacks.

2. Accessing the Parent Window:
- If the above condition is met, you can use JavaScript to manipulate the other iframe. For example, from within the first iframe, you can access the parent window using window.parent and then target the other iframe like this:

javascript
     window.parent.document.getElementById('iframeID').src = 'newURL';

- Here, 'iframeID' is the ID of the iframe you want to manipulate, and 'newURL' is the new source URL you want to load in that iframe.

3. Hyperlink Example:
- If you want to change the source of the external iframe using a hyperlink inside the first iframe, you could use something like this:

html
     <a href="#" onclick="window.parent.document.getElementById('iframeID').src='newURL';">Click here to change iframe</a>

4. Cross-Origin Restrictions:
- If the iframes are from different origins, you would need to look into server-side solutions, proxying, or other techniques to work around the restriction, but this generally involves more complex setups and potential security risks.

Summary:
Yes, a hyperlink inside an iframe can manipulate a separate iframe outside of it, but both iframes need to be from the same origin for this to work seamlessly due to the browser's same-origin policy. If they are, you can easily achieve this using JavaScript.

oh this is great, as I'm pretty familiar with JS and the calendar and blog are all under my domain. Thank you! 🙂