History APIで履歴に状態を記録する

HTML/CSS

ajaxを使って、1つのページ上で表示するコンテンツを切り替えたり、自動で続きのコンテンツを読み込んで表示する などよくあります

ネットショップでいえば、BASEでも、無限ロードで商品を読み込んでいくショップは多く見かけます。

しかしそのままだとajaxで読み込んだコンテンツは記録されないため、例えば違うページに移動して戻るボタンで戻ってみるとページは初期状態に戻っています。

もし最後のコンテンツまで読み込んでいたとすると、いちから読み込み直しとなりユーザー体験上も好ましくありません。

History APIを使えば、これらの問題は解決できます。

pushStateで状態を記録する

pushStateは「新しい履歴エントリの作成」を行い、そこに関連づけるオブジェクトを記録します。

pushStateの基本は下記

history.pushState( state , title , url );

stateに状態をセット

state には、{ foo : “hoge” , bar: hage }の形で任意の状態を複数セットできます。

たとえば、

 myState = {
   title = 'SAMPLE',
   html = document.getElementById('hoge').innerHTML
 }
 〜〜〜
 history.pushState( myState, null, url)

 // もちろん、history.pushState( {title:'SAMPLE', ...} , null , url ) の書き方でも良い

のようにページタイトルとHTMLをstateにセットしておいて、戻るボタンがクリックされたときにその状態を呼び出す ように使います。

title

執筆時時点でtitle の値を利用しているブラウザがほぼないので、nullをセット。

url

url は、URLバーに表示するURLを指定します。絶対URLでも相対URLでも可。

誤解してはいけないのは、ここで指定したURLは表示目的なだけで、location.href=url のように指定したURLに移動するわけではありません。URLの検証もされません。架空のURLを表示させても問題ありません。悪い使い方はしないようにしましょう。

popstateイベントでpushStateのオブジェクトを利用する

戻る・進むボタンなどでアクティブな履歴エントリが変更されるたびに、window はpopstateイベントを発行します。

そこで、pushStateで記録したオブジェクトを呼び出して

  window.addEventListener('popstate', function(e) {
      document.title = e.state.title;
    }, false);

のように利用できます。

ただしブラウザによっては、初回アクセス時にpopstateが発火して予期せぬ動きをしたりするので、stateの有無を判別させます。

  window.addEventListener('popstate', function(e) {
      if(e.state){
        // 
      }
    }, false);
ミフネWEB
タイトルとURLをコピーしました