History

History API

・ブラウザの履歴数取得
・ブラウザの履歴の一つ前に戻る
・ブラウザの履歴の一つ先に進む
・指定の回数分、履歴を前後する
・指定のurlを履歴に追加
・指定のurlを今の履歴に上書き

・window.history.length;
・window.history.back();
・window.history.forward();
・window.history.go($前後の回数);
・window.history.pushState($state, $title, $追加履歴);
・window.history.replaceState($state, $title,$上書き履歴);


--------------------------------------------------------------

        <div>
            historyLength : <span id="historyLength"></span>
            <br>
            <button id="back">back</button>
            <br>
            <a href="#" id="forward">forward</a>
            <br>
            <input type="button" value="go" id="go" />
            <br>
            <input type="text" id="pushState"/>
            <br>
            <button id="replaceState">replaceState</button>
        </div>



        <script type="text/javascript">
            (function () {

                $({id:'historyLength'}).innerHTML = window.history.length;
             
                // タグ名でエレメントを取得
                var btns = $({tagName:'button'});
                var aTag = $({tagName:'a'});
                var inputTag = $({tagName:'input'});

                // button, aタグ, inputタグを配列でforEach関数呼び出す
                forEach([btns, aTag, inputTag]);

                /*
                 * タグ配列を数分、イベントリスナー登録
                 */
                function forEach(tagArray) {
                    // タグ配列分、ループ処理
                    tagArray.forEach(function (item, index, array) {
                     
                        // タグ配列の要素数分、ループ処理
                        for (var idx = 0; idx < item.length; idx++) {
                             var el = item[idx];
                         
                            // INPUTタグ かつ ボタン以外はイベント登録なし
                            if (el.tagName === 'INPUT' && el.type !== 'button') {
                                return;
                            }
                         
                            // イベントリスナー登録処理
                            el.addEventListener('click', function () {
                                           
                                // 上記で判定しているため、不要だが、
tagName判断処理を作成したいため、書いておく
                                if ('BUTTON' === event.target.tagName
                                        || 'A' === event.target.tagName
                                        || 'button' === event.target.type) {
                                    historyExe();
                                }
                            });
                        }
                    });
                }
             
                /*
                 * 履歴関連処理
                 * @returns {undefined}
                 */
                function historyExe() {
                    debugger;
                    var id = event.target.id;
                    var func = "window.history." + id + "()";
                    eval(func);
                };              

                /*
                 * 指定オブジェクトからエレメントを取得
                 */
                function $(obj) {
                    debugger;
                    if(obj['id']){
                         return document.getElementById(obj['id']);                    
                    }
                 
                    if(obj['tagName']){
                        return document.getElementsByTagName(obj['tagName']);                  
                    }
                }

            })();

        </script>
----------------------------------------------------------------