javascript – history.pushstate无法浏览器返回和转发按钮

我正在使用jQuery来动态地加载div容器中的内容.

服务器端代码检测请求是AJAX还是GET.

我想让浏览器的后退/前进按钮使用代码,所以我尝试使用history.pushState.我必须遵循一些代码：

$('.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();
        });
    });
});

一切正常,除非浏览浏览器后退/转发按钮,否则栏中的地址会根据计划而改变,但页面不会更改.我究竟做错了什么？

在Clayton的答案帮助下更新了脚本

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'));
});

解决方法

@ Barry_127,看看这是否适合你： 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'));
    });

 });

如果你看看我提供的小提琴,然后点击按钮,警报会开始显示你正在推动一个新的状态.如果随后pushstate触发后,继续单击后退按钮,您将看到上一页(或popstate)将触发.