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

4725

2018-03-30 22:57

起源

答案:

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

 });

如果您查看我提供的小提琴并单击按钮，警报将显示您正在推动新状态。如果您在触发状态触发后再继续单击后退按钮，您将看到前一页（或popstate）将触发。

2018-04-02 17:42

Thnx很多克莱顿！你的例子非常具有说明性，现在所有这些都很有意义。我将更新我的问题，以显示我的最终代码是什么样的。 - Barry127

答案:

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

 });

2018-04-02 17:42

Thnx很多克莱顿！你的例子非常具有说明性，现在所有这些都很有意义。我将更新我的问题，以显示我的最终代码是什么样的。 - Barry127

问题 history.pushstate使浏览器后退和前进按钮失败

答案:

答案:

热门问题