29
Help us understand the problem. What are the problem?

More than 3 years have passed since last update.

posted at

History APIで履歴をいじる

History APIってなんなん

History APIは以前からありjavascriptから「戻る」「進む」などの操作を提供していました。
HTML5になって履歴情報を操作(追加/変更/移動監視)することが可能となりました。

履歴の移動

前のページへ(back)

前のページに移動するには、以下の様にします。

window.history.back();

次のページへ(forward)

次のページに移動するには、以下の様にします。

window.history.forward();

指定ページに移動(go)

指定ページへの移動は、以下の様にします。
以下の例では、1つ次のページへ進みます。(window.history.forwad()と同じ動きになります。)

動きは引数にセットする値により変わります。
+の場合、現在のページより先へ
-の場合、現在のページより前へ

window.history.go(1)

履歴情報の操作

履歴情報では以下の情報を扱います。

  • state 任意のオブジェクト
  • title 現在は使用されていない値
  • url 履歴のURL

履歴情報の追加(pushState)

履歴を追加するには、以下の様にします。
追加したstateは、popStateイベントの第1引数のオブジェクトにstateプロパティとして格納されます。

window.history.pushState({name : 't-okushima'}, null, '/name')

履歴情報の置き換え(replaceState)

履歴を置き換えるには、以下の様にします。

window.history.replaceState({name : 'aaaa'}, null, '/name')

履歴情報の監視(popState)

ブラウザの「戻る」「進む」または、同様の操作が行われた際に呼び出されるイベントとなります。
以下の様にします。

window.addEventListener('popstate', function(event) {
    // 任意の処理
    var state = event.state;
    alert(state.name):
});

現履歴情報の取得(state)

現在の履歴情報をpopState以外から扱いたい場合に利用できます。
以下の様にします。

window.history.state

サンプル

<!DOCTYPE html>
<html>
    <head>
        <title>History API Sample</title>
    </head>
    <body>
        <label for='name'>Name</label>
        <input type='text' id='name' value='' />
        <input type='button' id='pushButton' value='pushState' />
        <hr />
        <input type='button' id='replaceButton' value='replaceState' />
        <script>
            document.getElementById('pushButton').addEventListener('click', function() {
                var name = document.getElementById('name').value;
                window.history.pushState({name : name}, null, './history-api.html');
            });

            document.getElementById('replaceButton').addEventListener('click', function() {
                var name = document.getElementById('name').value;
                window.history.replaceState({name : name}, null, './history-api.html');
            });

            window.addEventListener('popstate', function(e) {
                var state = e.state;
                if (state) {
                    document.getElementById('name').value = state.name;
                    alert(state.name);
                } else {
                    document.getElementById('name').value = '';
                }
            });
        </script>
    </body>
</html>
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
29
Help us understand the problem. What are the problem?