Load page from iframe into main window

Question

I have an MVC site with a page (let's call it x) with an iframe in it (let's call it x2). When I interact with the iframe (x2) if I end up on a particular url (let's call it y) I'd like for that url (y) not to open up in the iframe (x2) but to open up in the browser as the main page. I'd like the url to change to y too. What JQuery magic do I need?

Edit

My fault, I didn't explain myself well enough. I do not go to that page using a link that I click on but an external site redirects to that page from the iframe.

Well then I would used my edited answer below, because essentially it will do the same thing. See my edit. — Leeish, Jan 18 '13 at 16:52

score 1 · Answer 1 · answered Jan 18 '13 at 16:36

1

No jQuery required, just put a target on the <a>:

<a href="@Url.Action("Action", "Controller", { property = 'foo' })" target="_parent">Link</a>

answered Jan 18 '13 at 16:36

Rory McCrossan

331,213
40
305
339

This won't work. The url is not at our side. It is a redirect from an external site. – Sachin Kainth Jan 18 '13 at 16:37
In which case what you require is not possible as you cannot interact with content of another domain via an iframe due to the Same Origin Policy/XSS. – Rory McCrossan Jan 18 '13 at 16:38
You can, via post message. But still must have access to the page in the iFrame. I do it cross domain. – Leeish Jan 18 '13 at 16:39
I believe you can via using a hashtag at the end of the URL plus a loop to check for it in the destination sight – Adam Tuliper Jan 18 '13 at 17:06

Leeish · Accepted Answer · 2013-01-18T16:52:03.950

1

You can look into doing this via window.postmessage. I did something similar. One of my pages has an iframe. Clicking on a certain link, rather than changing the iframe, changes the parent page.

http://davidwalsh.name/window-postmessage has a great article on how to use it. Essentially you will set up a listener on page x. When you load page y, have page y post a message to the parent window. X will listen for that message and act accordingly.

EDIT: Add a listener to check the onLoad event of the iFrame. Each time look at the URL of the iFrame. If that URL matches page Y, force page X to change URLs.

edited Jan 18 '13 at 16:52

answered Jan 18 '13 at 16:36

Leeish

5,203
2
17
45

it seems this is a HTML 5 thing - not all of our clients have up to date browsers – Sachin Kainth Jan 18 '13 at 16:44
Well you are probably out of luck then. You can still most likely use post.message. And as a fall back, set a listener to check the URL. http://stackoverflow.com/questions/938180/get-current-url-from-iframe Once you see the URL of page Y, force a page change. Not ideal but a fall back. Just because your users all don't have new browsers, (no one does) doesn't mean you can't use new technology. The new tech is there to solve problems like this. Just provide a suitable fallback and tell the people driving Model-Ts on the highway to get a new car. – Leeish Jan 18 '13 at 16:46
http://stackoverflow.com/questions/2429045/iframe-src-change-event-detection You can read how to listen for the iFrame URL change event. – Leeish Jan 18 '13 at 16:50
The reason I am using post.message rather than the method I described is because I get the height of the HTML from the page y and post that info the page x. Then I resize the iframe based on that information. IE uses see a sometimes overly tall iFrame or scrollbars, but users with good browsers see an iframe and page that perfectly matches the required size. – Leeish Jan 18 '13 at 17:22

score 1 · Answer 3 · answered Jan 18 '13 at 17:07

1

I believe you can via using a hashtag at the end of the URL plus a loop to check for it in the destination sight. Changing the hashtag won't reload the URL and allows the destination frame to read it. It's hacky but it should work.

answered Jan 18 '13 at 17:07

Adam Tuliper

29,982
4
53
71

Load page from iframe into main window

3 Answers3