HTML5 では、history.pushState() メソッドとhistory.replaceState() メソッドが導入されており、それぞれ履歴エントリを追加および変更できます。これらのメソッドは通常、window.onpopstate と組み合わせて使用されます。
2. PushState()メソッドの例次の JavaScript コードが http://mozilla.org/foo.html で実行されるとします。
var stateObj = { foo: bar };history.pushState(stateObj、ページ 2、bar.html);これにより、ブラウザのアドレス バーには http://mozilla.org/bar.html が表示されますが、ブラウザは bar.html を読み込んだり、bar.html が存在するかどうかを確認したりすることはありません。
ここで、ユーザーが http://google.com にアクセスし、「戻る」ボタンをクリックしたとします。このとき、アドレス バーには http://mozilla.org/bar.html が表示され、ページは Popstate イベントをトリガーします。イベント オブジェクトの state には stateObj のコピーが含まれます。ページ自体は foo.html と同じですが、そのコンテンツは Popstate イベントで変更される可能性があります。
もう一度「戻る」ボタンをクリックすると、ページの URL が http://mozilla.org/foo.html に変更され、ドキュメント オブジェクト document が別の Popstate イベントをトリガーします。今回は、イベント オブジェクトの状態オブジェクトが null になります。 ここでも同様に、戻ってもドキュメントの内容は変わりません。popstate イベントを受信するとドキュメントの内容が変更される可能性がありますが、その内容は以前のプレゼンテーションと一貫性が保たれます。
3.pushState()メソッドPushState() には、状態オブジェクト、タイトル (現在は無視されます)、および (オプション) URL の 3 つのパラメーターが必要です。これらの 3 つのパラメーターについて詳しく説明します。
State オブジェクト — 状態オブジェクト state は、pushState() を介して新しい履歴エントリを作成する JavaScript オブジェクトです。ユーザーが新しい状態に移動するたびに、popstate イベントが発生し、イベントの state プロパティには履歴エントリの state オブジェクトのコピーが含まれます。
title — このパラメータは現在無視されていますが、将来的には使用される可能性があります。ここでは空の文字列を渡すのは安全ですが、将来的には安全ではありません。あるいは、ジャンプ状態の短いタイトルを渡すこともできます。
URL — このパラメータは、新しい履歴 URL レコードを定義します。ブラウザは、pushState() を呼び出した直後にこの URL をロードしないことに注意してください。ただし、ユーザーがブラウザを再度開いたときなど、後で特定の状況下でこの URL をロードする可能性があります。新しい URL は絶対パスである必要はありません。新しい URL が相対パスの場合、現在の URL に対する相対パスとして扱われます。新しい URL は現在の URL と同じオリジンを持つ必要があります。そうでない場合、pushState() は例外をスローします。このパラメータはオプションであり、デフォルトは現在の URL です。
4. PushState()メソッドとハッシュ値設定の違いある意味、pushState() の呼び出しは window.location = #foo の設定に似ており、どちらも現在のページに新しい履歴レコードを作成してアクティブ化します。ただし、pushState() には次の利点があります。
新しい URL には、現在の URL と同じオリジンを持つ任意の URL を指定できます。また、window.location を設定すると、ハッシュ値を変更しただけの場合にのみ同じファイルが保持されます。
必要に応じて、URL を変更せずに履歴レコードを作成できます。 window.location = #foo; を設定すると、現在のハッシュが #foo でない場合にのみ、新しい履歴エントリが作成されます。
任意のデータを新しい履歴項目に関連付けることができます。ハッシュ値ベースの方法では、関連するすべてのデータを短い文字列にエンコードする必要があります。
5. replaceState() メソッドHistory.replaceState() の使用法は、history.pushState() と非常に似ていますが、replaceState() は新しい履歴項目を作成するのではなく、現在の履歴項目を変更するという点が異なります。
6. ポップステートイベントアクティブな履歴エントリが変更されるたびに、対応するウィンドウ オブジェクトで Popstate イベントがトリガーされます。 現在アクティブな履歴エントリが、history.pushState() メソッドによって作成されたか、history.replaceState() メソッドによって変更された場合、popstate イベント オブジェクトの state プロパティには、履歴エントリの state オブジェクトのコピーが含まれます。
次のように、履歴オブジェクトの状態を直接取得することもできます。
var currentState = 履歴.状態;
History.pushState() またはhistory.replaceState() を呼び出しても、popstate イベントはトリガーされないことに注意してください。 opstate イベントは、「戻る」ボタンと「進む」ボタンをクリックする (または JavaScript でのhistory.back()、history.forward()、およびhistory.go() メソッドの呼び出しなど) など、ブラウザーの特定のアクションでのみトリガーされます。
7. ポップステートイベントの例現在の Web ページのアドレスが http://example.com/example.html の場合は、次のコードを実行します。
window.onpopstate = function(event) {alert(location: + document.location + , state: + JSON.stringify(event.state));};//イベント処理関数をバインドします。history.pushState({page: 1 } , title 1, ?page=1); //履歴エントリを追加してアクティブ化します http://example.com/example.html?page=1、エントリのインデックスは 1history.pushState({page: 2}, title 2, ?page=2); //履歴エントリを追加してアクティブ化します http://example.com/example.html?page=2、エントリのインデックスは 2history.replaceState({page: 3}, title 3, ? page=3); //現在アクティブ化されている履歴エントリ http://ex..?page=2 を http://ex..?page=3 に変更します。エントリのインデックスは 3history.back();ポップアップの場所: http://example.com/example.html?page=1, state: {page:1}history.back(); // ポップアップの場所: http://example.com/example.html, state: nullhistory.go(2); // ポップアップの場所: http://example.com/example.html?page=3、状態: {page:3} 8. PushState()の目的Wang Er は主にブラウザ上で return イベントを監視できるため、pushState() を使用します。これはモバイル端末にも適用できます (直接実行できます)。
<body> <div>window.onpopstate はリターンキーイベントを監視できます</div> <script>history.pushState({}, ); window.onpopstate = function(event) { //ここでブラウザのリターンイベントを監視できます//例: 別の Web ページに移動します。href = https://www.baidu.com };もちろん、window.onhashchange を使用してブラウザ上の return イベントを監視することもできます。次のコードを参照してください (直接実行できます)。
<body> <div>window.onhashchange はリターンキーイベントを監視できます</div> <script> setTimeout(()=>{ location.hash=a },100); setTimeout(()=>{ window.onhashchange = function(event) { location.href = https://www.baidu.com } },200);以上がこの記事の全内容です。皆様の学習のお役に立てれば幸いです。また、VeVb Wulin Network をご支援いただければ幸いです。