history.pushstate无法使浏览器的返回和前进按钮正常工作

Question

history.pushstate无法使浏览器的返回和前进按钮正常工作

javascriptjquerybrowser-historypushstate

15

我正在使用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();
        });
    });
});

除了在浏览器使用前进/后退按钮时，地址栏按计划更改但页面不更改之外，一切工作正常。我做错了什么？

在查看了克莱顿的答案后更新了脚本

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

- Barry127

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Clayton · Accepted Answer

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

 });

如果您查看我提供的 Fiddle 并点击按钮，警报将会弹出，显示您正在推送一个新状态。如果此时您继续点击后退按钮，一旦 pushstate 被触发，就会看到先前的页面（或 popstate）被触发。