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>
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.
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 !=
window. close(); or this: top. window. close(); you should be able to close it.
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.
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With