Change parent window URL from iFrame

Question

I'm having a parent site at myurl.com from which I load an iFrame in a an overlay/modal layer. In the iFrame I have different tabs with steps 1-5 containing different form elements - in other words it's a kind of checkout flow. Each tab is located within a div with eg. the id "tab1".

I use the easytabs jQuery plugin (http://os.alfajango.com/easytabs/) which uses jQuery hash change in order to change the URL when you click on a tab so the URL would say eg. myurl.com#tab1. However, this doesn't work when the tabs are placed inside the iFrame. This is a problem because when you click the browsers back button you will leave the entire flow and possibly lose a lot of inputted data which means baaaaad UX.

So, my question is: Any ideas how to change the URL on the parent site from actions you make in the iFrame?

Thank you in advance!

Basically my code in the parent window "myurl.com" looks like this:

<div class="main-content">
    <!-- Content goes here -->
</div>

<div class="overlay">
    <iframe id="iframe" src="iframe.html"></iframe>
</div>

And the tabs in the iframe.html looks simply like this:

<div id="tabs-container">
    <ul>
        <li><a href="#tab1">Go to tab1</a></li>
        <li><a href="#tab2">Go to tab2</a></li>
    </ul>
    <div id="tab1">
        <!-- Content for Tab 1 goes here -->
    </div>

    <div id="tab2">
        <!-- Content for Tab 2 goes here -->
    </div>
</div>

score 19 · Accepted Answer · answered May 01 '14 at 05:58

19

Try this

<a href="#" onclick="top.window.location.href='URLGoesHere';">

Also read more about top in HTML

_top loads content in the top-level frameset (in effect, the whole browser window), no matter how many nested levels down the current frame is located

answered May 01 '14 at 05:58

Mayank Pathak

3,621
5
39
67

1

If I use the above my URL looks like this: myurl.com/iframe.html#tab1 - the page refreshes and I only see the iframe.html content and not the parent site. The page should not refresh - it should only add the ID of the tab to the parent URL so it should look like this myurl.com#tab1 – McAsh May 01 '14 at 07:07
1

This works on the parent site - but not on the iframe. ` $('#tab1').click(function(e) { window.location.hash = $(this).attr('id'); e.preventDefault(); }); ` – McAsh May 01 '14 at 07:24
@McAsh , you marked this as the accepted answer, but your comments suggest no one could tell you how to change parent URL without refreshing -- did you find an answer? Maybe I'm mistaken. Thanks – Nate Anderson Dec 01 '17 at 23:05

score 3 · Answer 2 · answered Jul 13 '15 at 19:05

3

One way to do it is using window.postMessage: https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage

answered Jul 13 '15 at 19:05

Daniel Bang

715
6
21

score 2 · Answer 3 · answered Dec 03 '16 at 05:50

2

If you simply want to do it without using javascript, you could give:

<a href="absolute_target_url" target="_parent"></a>

By just mentioning the target as parent it will work even for cross domain iframes.

answered Dec 03 '16 at 05:50

iniravpatel

1,553
16
24

score 0 · Answer 4 · answered May 01 '14 at 13:20

0

You can also do this if you're loading the iframe's url from the parent frame.

<a href="#" onclick="window.parent.location='/url';return false;">

answered May 01 '14 at 13:20

Control Freak

12,965
30
94
145

This doesn't do the trick either. I end up with the same URL as with the above suggestion and the page refreshes. It should only add the tab's ID at the end of the parent's URL. – McAsh May 01 '14 at 13:57

Change parent window URL from iFrame

4 Answers4