web-dev-qa-db-ja.com

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

ブラウザの戻る/進むボタンでブラウジングする場合を除いて、すべてが正常に機能します。バーのアドレスは計画に従って変更されますが、ページは変更されません。私は何が間違っているのですか？

クレイトンの答えの助けを借りてスクリプトを更新

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

 });

私が提供したフィドルを見てボタンをクリックすると、アラートが発生し、新しい状態をプッシュしていることを示します。プッシュステートが起動した後で戻るボタンをクリックすると、前のページ（またはポップステート）が起動することがわかります。

15
Clayton