Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Change parent window URL from iFrame

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>
like image 609
McAsh Avatar asked May 01 '14 05:05

McAsh


People also ask

How do I change parent URL in iframe?

1) click on images link in iframe changes Parent page, click on another iframe image link changes Parent to another page (see below). can you please post the code you're currently using, in addition to the link you provided? You need to name the parent and use the target attribute.

Can an iframe get parent URL?

Yes, accessing parent page's URL is not allowed if the iframe and the main page are not in the same (sub)domain. However, if you just need the URL of the main page (i.e. the browser URL), you can try this: var url = (window. location !=

How do I turn off iframe parent window?

window. close(); or this: top. window. close(); you should be able to close it.

How do I open an iframe external link in parent window?

To open the link from <iframe> in the parent window, you can use the <base> tag and set the target attribute to _parent in the <head> section.


1 Answers

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

like image 81
Mayank Pathak Avatar answered Oct 10 '22 05:10

Mayank Pathak