Can I change an iFrame's source from within?

Question

This is a question that I'm having trouble wording clearly; read carefully. I want to know whether or not it's possible for the source of an iFrame (the page displayed via the iFrame) to change it's inner source without changing the source of the iFrame's parent page.

For example:

If I create an iFrame in my web page, and click a traditional link within the iFrame, the source (location) of the master page (the page where I've created the iF) will be changed rather than the iFrame's content.

---

I want, instead, to change the source of the iFrame via the framed content (this could be cross-domain content) to a new location within the frame itself.

I've noticed different behaviors in JS methods of changing a page's location. This SO question has a few of them detailed. Some methods of changing the page behave differently, I noticed, such as not allowing the user to use the back button to get to the page that the user navigated from.

Using one of these different JS location changing methods, I thought this could be possible, but I'm not sure how it would be done.

The question:

Provided that the iFrame's requested web page is cooperating with it, is it possible to achieve the result of an iFrame resource changing its own location? If so, how is it done?

Answer 1

For any anchor tags within the iframe, try setting the target to _self. Like this:

<a href="/mynewlinkwithiniframe.html" target="_self">Test</a>

I'll play around with it, but I know this was the standard for old school frames.

EDIT Based on some tests I did, the default action for anchor links within an iframe is to load the new content within the iframe. target="_self" is redundant unless there is something else overriding it. Maybe you should supply more info about the source code if this isn't resolving it for you.

I could also make an assumption that you are running into the problem using javascript. If you are using window.location.href, you'll want to change that as follows:

Instead Of:

window.location.href = 'newpage.html';

Try:

window.open('/newpage.html', '_self');

Answer 2

Do like this:

window['iframe_name'].src = 'http://yourdomain.com';

Or do like this:

document.getElementById('iframe_id').src = 'http://yourdomain.com';

As per the comment you need to define the taget of a link to _self:

<a href="#" target="_self">Link</a>

Answer 3

I belive that postmessage() would help you

https://developer.mozilla.org/en-US/docs/Web/API/window.postMessage

Answer 4

Thank you Lawrence Johnson for reminding me. And you don't even need any Javascript for this. The "target" of a link is a window name so as long as that matches the name attribute on the window or iframe the link will open in the iframe. The link can be inside or outside the iframe. I just made myself an astonishingly simple panorama viewer at http://ab1jx.1apps.com/pix/panoramas/index.html using this principle. Each image has its own html wrapper. When you click the links below the iframe they load the wrapper into their target of picframe, changing the images in the process. Look at the source.