プログラム日記

History API の pushState メソッドと popstate イベント

JavaScript

History API の pushState メソッドと popstate イベントを使ったサンプル。
これはかなり忘れそうな感じなのでメモ。

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
window.onload = function(e) {
  history.pushState(null, null, null);
}

window.addEventListener("popstate", function(e) { 
  console.log("popstate");
});
</script>
</head>
<body>
<p>test page</p>
</body>
</html>

上記 HTML を表示してブラウザの「戻る」ボタンをクリックすると、コンソールに "popstate" と出力される動作になります。

やってることとしては、

・load イベント時に pushState メソッドを使って履歴エントリの追加
・addEventListener を使って popstate イベントを登録

のみです。今回は単純に履歴エントリの追加と popstate イベントが発生するか見たかっただけなので、pushState の引数は全部 null にしてあります。引数については以下のドキュメントあたりに情報があります。

・Manipulating the browser history - Web developer guide | MDN
https://developer.mozilla.org/ja/docs/Web/Guide/DOM/Manipulating_the_browser_history#pushState()_.E3.83.A1.E3.82.BD.E3.83.83.E3.83.89

・WindowEventHandlers.onpopstate - Web API Interfaces | MDN
https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onpopstate

簡単ですが、以上です。

[ 環境情報 ]
Windows 7 SP1
Internet Explorer 11