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>