title: HTML5 history popstate with ajax, direct link not work
body: <p>This Demo I want to click forward to <code>content</code>(index.php?id=id) click back to <code>subject</code>(index.php).<br></p>
  
  <p>Q1. (index.php?id=id) direct link <code>content</code> page not available, it will show (index.php) <code>subject</code> , why?</p>
  
  <p>Q2. Click back after the second times (forward > back > forward > back) then url will stop change, why? (Safari 5)
  update: Use <code>window.onpopstate</code> url works fine. Not get this error.</p>
  
  <p><p><br>
  Any suggestion will be appreciated.</p>
  
  <pre><code>$(window).bind('popstate', function(){
      $.ajax({
          url:location.pathname,
          success: function(data){
              $('.container').html(data);
          }
      });
  });
  </code></pre>
  
  <p><p>
  Demo</p>
  
  <pre><code>$('.subject').click(function(){
      $.ajax({
          url: 'index.php?id=' + $(this).attr('rel'),
              success: function(data){
                  $('.container').html(data);
              }
      });
      var pageurl;
      pageurl = 'index.php?id=' + $(this).attr('rel');
      if(pageurl != window.location){
          window.history.pushState({path: pageurl}, "", pageurl);
      }
      return false;
  });
  </code></pre>
  
  <p>index.php</p>
  
  <pre><code>&lt;div class="container"&gt;
      &lt;?php
          if($_GET['id']){
             ...
              print"&lt;div class="content"&gt;&lt;/div&gt;";
          }
          else{
             ...
             print"&lt;div class="subject" rel="id"&gt;&lt;/div&gt;"
          }
      ?&gt;
  &lt;/div&gt;
  </code></pre>