0

History.js (jquery.history.js v1.8b2) を使用しています。Chrome バージョン 30.0.1599.101 m。

History.js を期待どおりに動作させる方法がわかりません。

2 つのリンクがあるページがあります。1 つ目は ajax 操作をシミュレートします。ページ内のテキストを<h2>「開始」から「2」に変更するだけです。2 番目のリンクは google.com を指すだけです。

これが私がすることです:

  • クロムのキャッシュをクリアする
  • ページを読み込む
  • 最初のリンクをクリックします (pushState を呼び出すと、statechange が発生し、そこでテキストを "2" に更新します)
  • google.com リンクをクリックします (google に移動します)
  • ブラウザの戻るボタンをクリックします。

戻るボタンをクリックすると、statechange ハンドラーが呼び出され、状態オブジェクトを取得して、テキストを "2" に復元できると期待しています。

しかし、ハンドラーは呼び出されません。したがって、私のページには「開始」というテキスト (ブラウザにキャッシュされたページ) が残ります。興味深いことに、URL は、pushState 呼び出しでプッシュした "2" バージョンに設定されています。

何か不足していますか?これが私のコードです:

<h2 id="state">start</h2>

<a id="2" class="button" href="#">Goto State 2</a>

<a href="http://google.com">Goto google</a>

<script type="text/javascript">

    $(function() {

        History.Adapter.bind(window, "statechange", function() {
            console.log("statechange called");

            var state = History.getState();

            if (state.data.mystate) {
                // Restore the old state
                $("#state").text(state.data.mystate);
            } else {
                // Start state
                $("#state").text("start");
            }
        });


        $(".button").click(function(e) {
            // push the state we're transitioning to
            var newState = $(this).attr("id");

            History.pushState(
                { mystate: newState },
                "at state " + newState,
                "http://localhost:50494/PushState?state=" + newState);

            // statechange will be called now, and we'll update the page from our newState

            e.preventDefault();
        });


    });

</script>
4

1 に答える 1