[HTML5] アドレスバーのURLを変更する – history.pushState()

  • このエントリーをはてなブックマークに追加
  • LINEで送る

SPA(Single Page Application)でWebページを開発している場合、ページの情報をJavaScriptで直接書き換えるたブラウザのアドレスバーに表示されているURLは常に同じです。これだとブラウザのバックボタン(戻るボタン)が利用できなかったり、ブックマークや外部からリンクを貼る際に非常に不便。

そこでHTML5から登場したWebブラウザの「履歴」を操作するHistoryAPIを利用することで、SPAにも関わらず情報が書き換わったタイミングでブラウザのアドレスバーに表示されているURLを書き換え、別のページに遷移したかのように見せることができます。

// example.com/foo から example.com/bar に変更
history.pushState({}, '', '/bar')

厳密にはpushState()を実行すると履歴が新しく追加されます。現在表示されているページの情報にURLを発行(定義)するイメージですね。

- Sponsored Link -

history.pushStateの利用例

パスを変更

冒頭の例の通りですが、第3引数にURLとしたい文字列を記述するだけです。注意点としては最初にスラッシュを付けて絶対パスにするかどうかで挙動が変わります。

// example.com/foo/bar → example.com/hoge
history.pushState({}, '', '/hoge');
// example.com/foo/bar → example.com/foo/hoge
history.pushState({}, '', 'hoge');

ハッシュを変更

同じページ内で移動する場合や、SPAではページ内の情報を出し分ける際にhashbang等で利用するヤツです。これも素直に第3引数で指定するだけです。

// example.com/foo → example.com/foo#hoge
history.pushState({}, '', '#hoge');

すでにURLにハッシュが付いている場合は置き換わります。

// example.com/foo#huga → example.com/foo#hoge
history.pushState({}, '', '#hoge');

クエリーを追加

素直に以下のように記述することもできますが、

// example.com/foo → example.com/foo?name=value
history.pushState({}, '', '?name=value');

MDNのサンプルのように記述する方が楽ちんですね。

const url = new URL(window.location);
url.searchParams.set('name', 'value');
history.pushState({}, '', url);

参考ページ

コメント

ご感想やご質問などお気軽にどうぞ。書き込むにはfacebookへのログインが必要です。

このブログを応援する

お寄せいただいたお気持ちは全額サーバ代や次の記事を執筆するための原資として活用させていただいております。この記事が参考になった場合などぜひご検討ください。

PayPal(ペイパル)
PayPalで300円支払う
※金額は任意で変更できます。
※100円でも泣いて喜びますw
※住所の入力欄が現れた場合は「no needed」を選択ください
これまでのご協力者さま
- Sponsored Link -