2

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?

Community
  • 1
  • 1
  • If I were to put your request in my own words, would you say this is accurate? You want to have a link or javascript function within your iframe change the current page that the user is on (the parent page, not the iframe page). Correct? – Lawrence Johnson Apr 16 '14 at 04:50
  • Not quite. The result instead being the source of the iFrame changing without changing / adding new locations to the browser. The user clicks a "link" in the iFrame, and the iFrame changes to that link. The iFrame and the page have to communicate for this, possibly. @LawrenceJohnson –  Apr 16 '14 at 04:53

4 Answers4

0

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>
Bhojendra Rauniyar
  • 83,432
  • 35
  • 168
  • 231
  • How would I communicate between the source of the iFrame (the iFrame source needs to control the location, not the master page)and the page to tell the master page to execute this code? –  Apr 16 '14 at 04:51
  • Have a look at the comment I just left for Lawrence, above. –  Apr 16 '14 at 04:54
0

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');
Lawrence Johnson
  • 3,924
  • 2
  • 17
  • 30
  • It's a question of possibility, not something I'm using in a current project. For an example, you want to make a portfolio website where viewers of a web developer's profile can interface with his websites in an iFrame, and if they click a link inside, the content of the iFrame changes, rather than the portfolio website changing, or a new tab opening n the user's browser. –  Apr 16 '14 at 05:05
  • 1
    Then, yes. Quite simply, the answer is yes. :) – Lawrence Johnson Apr 16 '14 at 05:06
  • Good, very good, that means some cool future features. Thanks! –  Apr 16 '14 at 05:07
  • It's actually the way all frames were really designed to work. Look up "Stealth Redirect" when you get a chance. It's a really primitive way of domain forwarding still used by cavemen. :) – Lawrence Johnson Apr 16 '14 at 05:08
0

I belive that postmessage() would help you

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

Asik
  • 7,967
  • 4
  • 28
  • 34
0

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.

Alan Corey
  • 577
  • 6
  • 10