title: History object back button with iframes
body: <p>I'm having problems with history object and iframes in javascript/html5.  I wrote a simple project to describe my problem:</p>
  
  <p><a href="http://dktest.evermight.com/" rel="nofollow noreferrer">http://dktest.evermight.com/</a></p>
  
  <p>It's a page with an iframe and a next button. Every time you click next, it loads a new page with an incrementing counter.  However, clicking the browser back button doesn't do what I want it to do.  Let me explain the problem by breaking this post up into the following sections:</p>
  
  <ol>
  <li>What I'd like to achieve</li>
  <li>Undesired results in current project</li>
  <li>Post all my code</li>
  </ol>
  
  <p><strong>1. What I'd like to achieve</strong></p>
  
  <p>I want the user to:</p>
  
  <ol>
  <li>Open a new window and go to <a href="http://dktest.evermight.com/" rel="nofollow noreferrer">http://dktest.evermight.com/</a></li>
  <li>Click next page and see a redbox fade in, and to see the url <code>http://dktest.evermight.com/count.html?count=0</code> appear in both the iframe AND the browser's address bar</li>
  <li>Click next page again and see <code>http://dktest.evermight.com/count.html?count=1</code> in the iframe and browser's address bar</li>
  <li>Click browser's back button <strong>ONCE</strong> and see <code>http://dktest.evermight.com/count.html?count=0</code> in both the iframe and the browser's address bar</li>
  <li>Click browser's back button <strong>ONCE</strong> and see <code>http://dktest.evermight.com/</code> in the browser's address bar AND see the red box fade out</li>
  </ol>
  
  <p><strong>2. Undesired results in current project</strong></p>
  
  <p>With my code at <a href="http://dktest.evermight.com/" rel="nofollow noreferrer">http://dktest.evermight.com/</a>, it's currently not performing steps 4 and steps 5 correctly.  When I perform step 4, the iframe shows <code>http://dktest.evermight.com/count.html?count=0</code> but the browser address bar shows <code>http://dktest.evermight.com/count.html?count=1</code>.  I have to press the browser's back button again to make the browser address bar show <code>http://dktest.evermight.com/count.html?count=0</code>.  When I perform step 5, the red box fades out which is great, but the address bar is still showing <code>http://dktest.evermight.com/count.html?count=0</code>.  I have to press back again to make the address bar show <code>http://dktest.evermight.com/</code>.</p>
  
  <p><strong>3. Post all my code</strong></p>
  
  <p>My code is pretty straight forward.  You can view source on <a href="http://dktest.evermight.com/" rel="nofollow noreferrer">http://dktest.evermight.com/</a>.  I will also post here for convenience.</p>
  
  <p><strong>index.html</strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
     &lt;title&gt;&lt;/title&gt;
     &lt;script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"&gt;&lt;/script&gt;
     &lt;script type="text/javascript"&gt;
  var count=0;
  function clicknext()
  {
     $('#container').fadeIn();
     $('#iframe').attr('src','count.html?count='+count.toString());
     $('html title').html(count);
     history.pushState({blahblah:'whatgoeshere?'},'i dont know what goes here either','http://dktest.evermight.com/count.html?count='+count);
     count++;
  }
  function hideContainer()
  {
     $('#container').fadeOut();
        var closeurl = 'close.html';
        if($('#iframe').attr('src') != closeurl )
        $('#iframe').attr('src', closeurl);
  
  }
  
  $(document).ready(function(){
     hideContainer();
  });
     &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div id="container" style="display:none; background:red;"&gt;
  
  
          &lt;!-- IMPORTANT 
              When DOM first created, the iframe.src MUST BE initialize.html
              I have some code that I need to fire on that page before the rest 
              of this document starts
          --&gt;
          &lt;iframe id="iframe" src="initialize.html"&gt;&lt;/iframe&gt;
  &lt;/div&gt;
          &lt;input type="button" onclick="clicknext()"; value="next page" /&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>close.html</strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
          &lt;script type="text/javascript"&gt;
                  parent.hideContainer();
          &lt;/script&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>count.html</strong></p>
  
  <p>I CAN NOT modify the contents of count.html.  In my real project, count.html is actually a youtube video, which is on a server I can't directly access.</p>
  
  <pre><code>&lt;html&gt;
          &lt;body&gt;Youtube video at url &lt;script type="text/javascript"&gt;document.write(location.href);&lt;/script&gt;&lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>initialize.html</strong></p>
  
  <pre><code>Perform application specific functionality
  </code></pre>
  
  <p>Can anyone correct my code to achieve the results of step 4 and step 5 as described in section 1?</p>
  
  <p><strong>UPDATE</strong>
  Ok, I'm appreciating the problem a bit more based on some experiments I'm doing.  </p>
  
  <p><strong>Experiment 1</strong>: I tried changing the line:</p>
  
  <pre><code>$('#iframe').attr('src','count.html?count='+count.toString());
  </code></pre>
  
  <p>to </p>
  
  <pre><code>$('#iframe')[0].contentWindow.location.replace('count.html?count='+count.toString());
  </code></pre>
  
  <p>This allowed me to perform step 4 correctly.  Apparently, contentWindow.location.replace() will not create an entry in the history object.  However, this caused some other issues related with the contents of count.html, which is actually a page to youtube/vimeo content.  The youtube/vimeo content REQUIRES that you load information via the attr('src') approach instead of .contentWindow.location.replace().  So perhaps the solution is to find a way to make attr('src') NOT create an entry with the history object?</p>
  
  <p><strong>Experiment 2</strong> Another possible solution I tried was changing the order of the attr('src') and history.pushState() call.  I tried calling attr('src') first then history.pushState() second, and also history.pushState() first then attr('src') second.  But in both cases, when I push the browser's back button, it is the iframe content that goes back first.  So there's no way for me to capture pass myself a message via the history object to do a "double back", since information in the history object is available LAST in the sequence of events.</p>
  
  <p><strong>Experiment 3</strong> I also tried working with History.js.  It did not do anything to solve my problems above.  From what I could tell, it worked exactly like the regular history object.</p>
  
  <p>Does anyone have any thing else I can try?  Or suggest modifications to any of the experiments above?  I'm going to explore Experiment 1 further as a separate stack overflow question.</p>