WEBデザイン スクリプト

ページ遷移はしないけどアドレスバーのURLが変化するあれのメモ

2018年11月20日

フォーム入力したりリンクをクリックしたとき、ページの切り替えがないけどなにかアクションが起こって、アドレスバーのURLが変わってる。ブラウザのバックボタンとか履歴にものこってるあれってどうなってるの?というメモ。

お察しの通りJavaScriptで実装されています。
pushState、popStateを利用すると、ブラウザ履歴を追加し、ブラウザバックに対応することができるとのこと。
(replaceStateというのもあり、こちらはブラウザに履歴が残らない)

pushState

HTML5から追加されたメソッドで、ページ遷移なしでブラウザの履歴を追加することができ、アドレスバーの値も変化いたします。

pushState(第1引数,第2引数,第3引数)

・第1引数=state
  履歴に関連付する任意のオブジェクトを渡すことができ、そのオブジェクトはpopstateイベントハンドラから
  参照することができます。

・第2引数=title
  履歴のタイトルを指定できるようですが、現在のところ無視されるようです。
第3引数=URL
履歴のURLとしますが、現在のURLと異なるURLを指定してもページのリロードは発生しません。相対パス、絶対パスのどちらでの指定も可能です。

<script>
window.history.pushState(null, null, "書き換えてしまえ");
</script>

デモページ

アイデア次第でいろいろできそうです。

-WEBデザイン, スクリプト

Copyright© MDBloG , 2020 All Rights Reserved Powered by AFFINGER5.