title: How to tell the difference between 'real' and 'virtual' onpopstate events
body: <p>I'm building a tool that uses AJAX and <code>pushState</code>/<code>replaceState</code> on top of a non-javascript fallback (<a href="http://biologos.org/resources/find" rel="nofollow noreferrer">http://biologos.org/resources/find</a>). Basically, it's a search tool that returns a list of real HTML links (clicking a link takes you out of the tool).</p>
  
  <p>I am using <code>onpopstate</code> so the user can navigate through their query history created by <code>pushState</code>. This event <em>also</em> fires when navigating back from a real link (one <strong>NOT</strong> created with <code>pushState</code> but by actual browser navigation). I don't want it to fire here.</p>
  
  <p>So here's my question: how can I tell the difference between a <code>onpopstate</code> event coming from a <code>pushState</code> history item, vs one that comes from real navigation?</p>
  
  <p>I want to do something like this:</p>
  
  <pre><code>window.onpopstate = function(event){
    if(event.realClick) return;
  
    // otherwise do something
  
  }
  </code></pre>
  
  <p>I've tried <a href="https://stackoverflow.com/questions/5257819/onpopstate-handler-ajax-back-button">onpopstate handler - ajax back button</a> but with no luck :(</p>
  
  <p>Thanks in advance!</p>
  
  <p><strong>EDIT:</strong>
  A problem here is the way different browsers handle the <code>onpopstate</code> event. Here's what seems to be happening:</p>
  
  <p>Chrome</p>
  
  <ul>
  <li>Fires <code>onpopstate</code> on both <em>real</em> and <em>virtual</em> events</li>
  <li>Actually re-runs javascript (so setting <code>loaded=false</code> will actually test false)</li>
  <li>The solution in the above link actually works!</li>
  </ul>
  
  <p>Firefox</p>
  
  <ul>
  <li>Only fires <code>onpopstate</code> on <em>virtual</em> events</li>
  <li>Actually re-runs javascript (so setting <code>loaded=false</code> will actually test false)</li>
  <li>For the linked solution to actually work, <code>loaded</code> needs to be set true on page load, which breaks Chrome!</li>
  </ul>
  
  <p>Safari</p>
  
  <ul>
  <li>Fires <code>onpopstate</code> on both <em>real</em> and <em>virtual</em> events</li>
  <li>Seems to <strong>NOT</strong> re-run javascript before the event (so <code>loaded</code> will be true if previously set to be true!)</li>
  </ul>
  
  <p>Hopefully I'm just missing something...</p>