title: Why does the popstate event not fire?
body: <p>I am trying to understand the <code>popstate</code> event in JavaScript and for that I created this simple AJAX-based navigation website.</p>
  <p>Here's <code>home.html</code>:</p>
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang=&quot;en&quot;&gt;
  &lt;head&gt;
      &lt;title&gt;Home&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;header&gt;
          &lt;a href=&quot;index.html&quot;&gt;Home&lt;/a&gt;
          &lt;a href=&quot;about.html&quot;&gt;About&lt;/a&gt;
      &lt;/header&gt;
  
      &lt;div id=&quot;main&quot;&gt;
          &lt;h1&gt;Home Page&lt;/h1&gt;
          &lt;p&gt;Lorem, ipsum dolor sit amet consectetur adipisicing elit. Repellendus eligendi suscipit aliquid. Mollitia ratione impedit ab, dicta reprehenderit veniam nam facere ipsam vel minus doloribus officia, odit dolorum alias error.&lt;/p&gt;
      &lt;/div&gt;
      &lt;script src=&quot;nav.js&quot;&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p>Here's <code>about.html</code>:</p>
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang=&quot;en&quot;&gt;
  &lt;head&gt;
      &lt;title&gt;About Us&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;header&gt;
          &lt;a href=&quot;index.html&quot;&gt;Home&lt;/a&gt;
          &lt;a href=&quot;about.html&quot;&gt;About&lt;/a&gt;
      &lt;/header&gt;
  
      &lt;div id=&quot;main&quot;&gt;
          &lt;h1&gt;About&lt;/h1&gt;
          &lt;p&gt;Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto placeat ipsam nam nobis exercitationem voluptatibus, officia impedit. Dolore, esse dignissimos enim porro aspernatur sit aperiam asperiores, maiores, hic velit quod.&lt;/p&gt;
      &lt;/div&gt;
      &lt;script src=&quot;nav.js&quot;&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p>And here's the script <code>nav.js</code>:</p>
  <pre><code>// implementing ajax-based navigation
  var main = document.getElementById('main');
  
  function makeRequest(url, callback) {
      var xhr = new XMLHttpRequest();
      xhr.responseType = 'document';
      xhr.open('GET', url);
      xhr.onreadystatechange = function() {
          if (this.readyState == 4 &amp;&amp; this.status == 200) {
              callback(this);
          }
      }
      xhr.send();
  }
  
  window.onclick = function(e) {
      if (e.target.href != window.location.href) {
          history.pushState(null, '', e.target.href);
      }
  
      makeRequest(e.target.href, function(xhr) {
          document.title = xhr.responseXML.title;
          main.innerHTML = xhr.responseXML.getElementById('main').innerHTML;
      });
      e.preventDefault();
  
      window.onpopstate = function(e) {
          console.log('The popstate event has fired')
          makeRequest(window.location.href, function(xhr) {
              main.innerHTML = xhr.responseXML.getElementById('main').innerHTML;
          });
      }
  }
  </code></pre>
  <p>The problem I am facing is detailed as follows:</p>
  <ol>
  <li><p>I go to a new tab and open up the document <code>index.html</code>. This is the first entry in the tab's history.</p>
  </li>
  <li><p>On this page, I click the link pointing to <code>about.html</code>. As a result, the <code>window.onclick</code> handler gets fired and ultimately, using AJAX, the document <code>about.html</code> gets dynamically displayed. The browser's title also gets changed, as well as the URL (which happens due to <code>history.pushState()</code>).</p>
  </li>
  <li><p>Now I go back (using the back button of the browser), the URL changes to <code>index.html</code>, and consequently the <code>popstate</code> event fires on <code>window</code>. Here, I reload the contents of <code>index.html</code> into the current document and everything works fine.</p>
  </li>
  <li><p>I go back, which takes me to the home page of Google Chrome (the start of every new tab).</p>
  </li>
  <li><p>Now, I go forward. This takes me to the document <code>index.html</code>. What is displayed on the browser are the contents of <code>index.html</code>. So uptil this point, everything is working fine.</p>
  </li>
  <li><p>I go forward again. The browser's URL changes to <code>about.html</code> and its title as well. However, this time, <strong>the <code>popstate</code> event doesn't fire</strong>. The URL has changed to a location which was set earlier on using <code>history.pushState()</code> so I expect the <code>popstate</code> event to fire. However, it doesn't.</p>
  </li>
  </ol>
  <p><strong>What is the reason for the <code>popstate</code> event not firing on the last forward step?</strong></p>