history.pushstate schlägt Browser zurück und vorwärts

Question

Ich verwende jQuery, um Inhalt in einem div-Container dynamisch zu laden.

Der serverseitige Code erkennt, ob die Anforderung AJAX oder GET lautet.

Ich möchte die Browser zurück/vorwärts Tasten mit dem Code arbeiten, so dass ich versuche, history.pushState verwenden. Ich habe zu folgenden Code bekam:

$('.ajax').on('click', function(e) { 
    e.preventDefault(); 
    $this = $(this); 
    $('#ajaxContent').fadeOut(function() { 
     $('.pageLoad').show(); 
     $('#ajaxContent').html(''); 
     $('#ajaxContent').load($this.attr('href'), function() { 
      window.history.pushState(null,"", $this.attr('href')); 
      $('.pageLoad').hide(); 
      $('#ajaxContent').fadeIn(); 
     }); 
    }); 
}); 

Alles funktioniert gut, außer wenn sie mit den Browsern Vor/Zurück-Taste, die Adresse in der Leiste ändert nach Plan, aber die Seite gerade nicht ändert. Was mache ich falsch?

aktualisiert Skript mit Hilfe von Clayton Antwort

var fnLoadPage = function(url) { 
    $('#ajaxContent').fadeOut(function() { 
     $('.pageLoad').show(); 
     $('#ajaxContent').html('').load(url, function() { 
      $('.pageLoad').hide(); 
      $('#ajaxContent').fadeIn(); 
     }); 
    }); 
}; 

window.onpopstate = function(e) { 
    fnLoadPage.call(undefined, document.location.href); 
}; 

$(document).on('click', '.ajax', function(e) { 
    $this = $(this); 
    e.preventDefault(); 
    window.history.pushState({state: new Date().getTime()}, '', $this.attr('href')); 
    fnLoadPage.call(undefined, $this.attr('href')); 
}); 

Answer 1

@ Barry_127, ob dies für Sie arbeiten: http://jsfiddle.net/SX4Qh/

$(document).ready(function(){ 
    window.onpopstate = function(event) { 
     alert('popstate fired'); 
     $('#ajaxContent').fadeOut(function() { 
      $('.pageLoad').show(); 
      $('#ajaxContent').html('') 
          .load($(this).attr('href'), function() { 
           $('.pageLoad').hide(); 
           $('#ajaxContent').fadeIn(); 
          }); 
     }); 
    }; 

    $('.ajax').on('click', function(event) { 
     event.preventDefault(); 
     alert('pushstate fired'); 
     window.history.pushState({state:'new'},'', $(this).attr('href')); 
    }); 

}); 

Wenn Sie einen Blick auf die Geige nehme ich zur Verfügung gestellt und klicken Sie auf die Schaltfläche, der Alarm wird ausgelöst und zeigt an, dass Sie einen neuen Status auslösen. Wenn Sie dann auf den Zurück-Button klicken, sobald der Pushstate ausgelöst wurde, sehen Sie, dass die vorherige Seite (oder Popstate) ausgelöst wird.