title: Change parent window URL from iFrame
body: <p>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".</p>
  
  <p>I use the easytabs jQuery plugin (<a href="http://os.alfajango.com/easytabs/" rel="noreferrer">http://os.alfajango.com/easytabs/</a>) 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.</p>
  
  <p>So, my question is: Any ideas how to change the URL on the parent site from actions you make in the iFrame? </p>
  
  <p>Thank you in advance!</p>
  
  <p>Basically my code in the parent window "myurl.com" looks like this:</p>
  
  <pre><code>&lt;div class="main-content"&gt;
      &lt;!-- Content goes here --&gt;
  &lt;/div&gt;
  
  &lt;div class="overlay"&gt;
      &lt;iframe id="iframe" src="iframe.html"&gt;&lt;/iframe&gt;
  &lt;/div&gt;                                                                      
  </code></pre>
  
  <p>And the tabs in the iframe.html looks simply like this:</p>
  
  <pre><code>&lt;div id="tabs-container"&gt;
      &lt;ul&gt;
          &lt;li&gt;&lt;a href="#tab1"&gt;Go to tab1&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#tab2"&gt;Go to tab2&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
      &lt;div id="tab1"&gt;
          &lt;!-- Content for Tab 1 goes here --&gt;
      &lt;/div&gt;
  
      &lt;div id="tab2"&gt;
          &lt;!-- Content for Tab 2 goes here --&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>