[JS] アドレスバーのURLを動的に書き換える方法

JavascriptでURLを書き換えたい

通常のWebでは、URLの変更とページ更新はセットです。ただし、シングルページアプリケーション(SPA)などでは、同一ページのコンテンツを非同期に書き換えたりします。したがってコンテンツの書き換えに従いURLも書き換わらなければなりません。

URLの書き換えも非同期に行わなければ画面の再読み込みが発生してしまいます。もちろんURLの書き換えを行うことで、URLの閲覧履歴にも追加されるので、[戻る]や[進む]でページ遷移も可能になります。

ということでブラウザのアドレスバーのURLを非同期に書き換える方法が存在するのでそれをまとめます。

JavascriptでURLの管理

ブラウザの履歴を操作する(MDN)

履歴(MSDN)

pushState() メソッド

URLを書き換え、新しい履歴エントリを追加するには history.pushState() を利用します。第3引数に新しいパス(URL)を設定します。第1引数はこのページに紐づくオブジェクト(state)を管理できるようです。第2引数は将来的に使うかもしれない、titleらしいです。

第3引数にパスを入れるだけでよいです。

history.pushState('hoge_state', '', 'hoge.html')

replaceState() メソッド

pushState() メソッドと同じように動作するのが、history.replaceState() メソッドです。ただし、新しい履歴エントリを作成するのではなく、現在の履歴エントリを書き換えます。

使い方は pushState() と同じです。

history.replaceState('hogehoge_state', '', 'hogehoge.html')

histry.state

現在のページの state は、history.stateで取得できます。pushState(), replaceState() で、第1引数に指定した値です。

window.onpopstate イベント

window.onpopstate イベント

ユーザーが履歴内の 2 つの移動エントリ間を移動し、そのうち少なくとも 1 つが history.pushState() または history.replaceState() で作成されているときに、window.onpopstate イベント ハンドラーはアプリに通知します。これは、UI による対話的操作 (戻るボタンや進むボタンをクリックする、コンテキスト メニューの [戻る] をクリックする、BackSpace キーを押すなど) を通じて発生します。また、Alt + 左方向キー、Alt + 右方向キー、または BackSpace キーを押したり、history.back、history.forward、または history.go を呼び出したりした場合にも発生します。

window.onpopstate イベントで履歴エントリの移動を検知できます。引数から state を取得できます。上記引用が全てです。

まとめ

ここまでの内容をまとめたサンプルコードをいかにまとめます。ブラウザのコンソールで実行して見てください。アドレスバーに注目してください。

// 現在の履歴エントリを書き換え
history.replaceState('aaa', '', 'aaa.html');
// 履歴エントリを追加
history.pushState('bbb', '', 'bbb.html');
// 履歴移動のイベントを追加
window.onpopstate = function(e) { alert(e.state); }
// 戻る(bbb.html => aaa.html)
history.back();

以上。