History APIとは

History APIはHTML5の機能のひとつで、ブラウザの戻る進むボタンのイベントを取得してページの内容を動的に変えることができるものです。なかなか便利な機能ではあったのですが、ちょっとつまずきポイントが多く、癖もかなりあるっぽいので徹底的に試してみようと思います。

スタック

ブラウザの履歴の一つ一つの記録をスタックといい、一つ履歴が増える度にスタックが増える。そしてHistoryAPIを使うとこのスタックをページ推移を行わなくても増やすことができます。

HistoryAPIによってスタックが増えた場合は、ブラウザの戻るボタンを押してもページ遷移が発生せず、何も起きない。それがHistory API。

スタックの追加

スタックを追加するには、このようにやります。

history.pushState("hoge", null, "/hoge");Code language: JavaScript (javascript)

これで、履歴が一つ分増えます。これを実行すると、ブラウザの戻るボタンを一度押しても何も起きません。(ページ推移が発生しません)
しかし、二回ボタンを押すといつもどおりページ推移が発生します。

しかし、このhistory.pushStateを使う前に必ず

history.replaceState("index");Code language: JavaScript (javascript)

とします。

これをすることでGoogle Developer Tools もしくは Firebug上で

history

と入力し、エンターを押すと、historyオブジェクトが見えるので、historyオブジェクトを展開し、stateプロパティを確認すると、そこがindexになっていることが確認できます。

必ずこれをやっておかないとめんどくさいことになります。

ブラウザの戻る・進むイベントを監視する

jQueryを使っていますが、jQueryの場合はこのように書くことでイベントが実装できます。

$(window).on("popstate", function(_event){
    var state = _event.originalEvent.state;
    console.log("_event", _event);
    console.log("state", state);
});Code language: JavaScript (javascript)

これをソースコード内に記述して、

history.pushState("hoge", null, "/hoge");Code language: JavaScript (javascript)

を実行して、ブラウザの戻るボタンをクリックします。

Google Developper Tools または Firebugのコンソールで確認すると、 state がindexになっていることがわかります。

これがハマりポイントでした。最初に history.replaceState(“index”); をしたことで、index と表示されたわけですが、これをやらないとここが、 null になってしまいます。

最初このstateの値は hoge になるものだと思っていたのですが、実はそうではなく、戻るページに設定されているstateらしいです。

構造的には「index -> hoge」 という構造になっています。

このあたりがややこしいので注意が必要です。

Tips

History APIは基本的に以上の仕組みさえ理解すればそれだけですんなりと使えますが、他にも覚えておくと便利な点をあげておきます。

history.state

現在のstateを確認できます。indexなのかhogeなのか。

history.back()

これを実行するとブラウザを戻ります。ページ内に戻るボタンを設置する場合はこのメソッドを使用します。ただ、対応していないブラウザもあるので機能を切り分ける必要があります。

history.forward()

これを実行するとブラウザを進みます

history.go(num)

指定した履歴へジャンプします。

history.length

現在の履歴の数を表示します

location.pathname

現在のドメインを覗いたディレクトリパスを取得します

location.search

現在のURLの?の後ろのパラメータを取得します