DOM

History.replaceState() メソッド

 編集:2022.10.26 by T.A.

[Edge]。→

セッション履歴 History の内容を指定の物に置き換えます。

mdn:現在の履歴を編集し、メソッドに引数で渡された状態オブジェクトや URL で置き換えます。このメソッドは、ユーザーのアクションに応じて現在の履歴項目の状態オブジェクトや URL を更新したい場合に特に便利です。

構文
History.replaceState(stateObj, unused[, url])
History History オブジェクト。
stateObj state オブジェクト。置き換える内容。

mdn: 状態オブジェクトは JavaScript オブジェクトで、replaceState メソッドに渡された履歴項目に関連付けられるものです。状態オブジェクトは null を指定することができます。

unused この引数は歴史的な理由のために存在しており、省略することはできません。空文字を渡すことが、将来このメソッドに変更が加えられたときに安全です。
url 省略可。履歴項目の URL です。新しい URL は現在の URL と同じオリジンでなければなりません。もしそうでないと例外が発生します。
戻り値

mdnより

これはブラウザーの履歴項目に state と url を設定したものを作成します。

const state = { 'page_id': 1, 'user_id': 5 }
const url = 'hello-world.html'

history.pushState(state, '', url)

HTML:

<A href="#Aテスト">リンク。アンカーへ</A><BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<A id=Aテスト>アンカー</A>

JavaScript: HTMLを組み込んでから以下を実行する。リンクをクリックして、ページを戻す。

history.pushState({page_id:1}, '');
function Job(eve){  //pushState イベントの処理:
  alert("popstate イベント発生");
  D=eve.state;
  if(eve.state==null){
    alert("データは null です");
  }else{
    alert("データが得られました");
  }
}
window.onpopstate=Job;  //イベント割り当て。

得られた内容:D

=[object]:[object Object]
page_id=[number]:1

pushState() しなくても popstate イベントが発生するようです。

popstate イベントは不明な所もある。

PopStateEvent.state


テスト