相关疑难解决方法(0)

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();
        });
    });
});
Run Code Online (Sandbox Code Playgroud)

一切正常,除非使用浏览器后退/前进按钮浏览时,栏中的地址会根据计划更改,但页面不会更改.我究竟做错了什么?

在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'));
});
Run Code Online (Sandbox Code Playgroud)

javascript jquery browser-history pushstate

13
推荐指数
1
解决办法
1万
查看次数

标签 统计

browser-history ×1

javascript ×1

jquery ×1

pushstate ×1