Webtech Walker

補足:githubのアレ(history.replaceStateとかhistory.pushStateの話)

以下の記事にgithubのhistory.replaceStateについて書かれてるのですが、一点補足しておきます。

githubのアレ(history.replaceStateとかhistory.pushStateの話) - 愛と勇気と缶ビール

補足の前に。

さらに、この記事を読んだ時「ChromeやSafariやFirefox4でパンくずリストやプロジェクトに含まれるファイル名をクリックするとズビビッとスライドしてDOMが置き換わるアレがreplaceStateを使っているのだろう」と思っていたけどそれも違った。replaceStateが使われているのは別の場所。

たしかにDOMの更新につかってるのはreplaceStateじゃなくてpushStateのほうなので僕の以前のエントリーが間違ってますね。すいません。

本題の補足は以下。

  1. pushStateでhistoryにリンクのURLをpush
  2. 同URLに?slide=1&_=(\d+)を付加したものをxhrでGET
  3. 得られたhtmlを使い、該当部分のDOMを書き換える(ここでアニメーション)

これに加えてもう一個大事なのが戻るボタン押したときの挙動です。ハッシュを変更する手法ではhashchangeイベントを使って戻るボタン押したときの動作を制御できますが、history.replaceStateではpopstateというイベントがあって、戻るを押したときはこのイベントが発火します。

window.addEventListener('popstate', function(event) {
    // 戻るとか進むを押したときの処理
}, false);

これで戻るとか進むボタンを押したときの処理を記述できます。また event.state でpushStateしたときのデータを受け取ることができます。詳しくは以下などを参照あれ。

window.onpopstate - MDC Doc Center

このエントリーをはてなブックマークに追加