[Edge]。→、、
セッション履歴 History のスタックに項目を追加します。
| History | History オブジェクト。 |
|---|---|
| state | 作られる新しい履歴項目に関連した（¶任意の内容の） JavaScript オブジェクトです。
ユーザーが新規の state に移動したときはいつも、popstate イベントが発行され、イベントの state プロパティは、履歴項目の state オブジェクトのコピーを含みます。 このオブジェクトは、シリアライズ可能なあらゆものとなりえます。Firefox では状態オブジェクトをユーザーのディスクに保存してブラウザーを再起動した後にも復帰できるため、 state オブジェクトのシリアライズ表現に 2 Mbyte の上限を課しています。これを超える大きさの状態オブジェクトを pushState() に渡した場合、このメソッドで例外が発生します。これ以上のスペースが必要な場合、sessionStorage や localStorage を使用することをお勧めします。 |
| unused | 非推奨 非標準 [Edge]⛌。この引数は歴史的な理由のために存在しており、省略することはできません。空文字を渡すことが、将来このメソッドに変更が加えられたときに安全です。 |
| url | 省略可。新しい履歴項目の URL を示す文字列。
ブラウザーは pushState() を呼び出した後もこの URL を読み込もうとせずに、例えばユーザーがブラウザーを再起動した後など、後で URL を読み込む場合もあるのにご注意ください。新しい URL は絶対パスとは限りません。つまり相対パスの場合、現在の URL から相対的に解決されます。新しい URL は現在の URL と同一でなければならず、そうでない場合、pushState() で例外が発生します。 この引数が指定されなかった場合、この文書の現在の URL が設定されます。 |
¶
ある意味で、pushState() の呼び出しは window.location = "#foo" と似ていて、両方とも現在の文書に関連した別の履歴項目を作成し、有効化します。しかし pushState() にはいくつかの利点があります。
pushState() は hashchange イベントを発行しません。新 URL が旧 URL とハッシュだけ異なる場合でもそうなることに気をつけてください。
これはブラウザーの履歴項目に 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}, '#Aテスト');
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 イベントは不明な所もある。
JavaScript： 以下を実行
history.pushState({anch:2}, '', "../Com/Test.htm"); //エラー発生：Failed to execute 'pushState' on 'History': A history state object with URL 'file:///C:/Users/asmin/Documents/HTML%E3%83%AA%E3%83%95%E3%82%A1%E3%83%AC%E3%83%B3%E3%82%B9forEdge/HTML-Rifarennsu/DOM/Com/Test.htm' cannot be created in a document with origin 'null' and URL 'file:///C:/Users/asmin/Documents/HTML%E3%83%AA%E3%83%95%E3%82%A1%E3%83%AC%E3%83%B3%E3%82%B9forEdge/HTML-Rifarennsu/DOM/History/pushState.htm'.
function Job(eve){ //pushState イベントの処理：
alert("popstate イベント発生");
D=eve.state;
if(eve.state==null){
alert("データは null です");
}else{
alert("データが得られました");
}
}
window.onpopstate=Job; //イベント割り当て。
HTML：
JavaScript： HTMLを組み込まずに以下を実行する。ページを戻したり進めたりすることができるようです。
history.pushState({anch:1}, '', "#Aテスト1");
history.pushState({anch:2}, '', "#Aテスト2");
function Job(eve){
alert("popstate イベント発生");
D=eve.state;
if(eve.state==null){
alert("データは null です");
}else{
alert("データが得られました");
}
}
window.onpopstate=Job;
得られた内容：D
＝[object]：[object Object] page_id＝[number]：1