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>

Answer 1

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

Answer 2

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

Answer 3

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.

Answer 4

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;">