読者です 読者をやめる 読者になる 読者になる

すたらブログ

文系Webプログラマの備忘録

JavaScript: pushStateを使ってページの状態を再現可能にする

JavaScript

タブ表示形式の記事の任意のタブを開いた状態を、URLパラメータに記述して再現可能にします。
pushStateを使うことで、ブラウザの「戻るボタン」の動作にも対応できます。


要点

pushStateを使っているのは下記の部分だけです。
タブの状態を履歴に加える処理をしてもらっています。
URLパラメータを元にタブの状態を再現する処理は、pushStateとは関係ありません。

if (window.history && window.history.pushState) {
  var url = '?tab=' + idx;
  var txt = self.elems.tabs[idx].textContent;
  history.pushState(txt, txt, url);
}

下記の記事に刺激を受けて、今回のサンプルを作ってみました。


近況報告

2015年末から3ヶ月鬱になってました。
ゆっくり復帰します。