PushStateとreplaceStateを使用する手順の詳細な説明
今回はpushStateとreplaceStateを使用する手順について詳しく説明します。pushStateとreplaceStateを使用する際の注意事項は何ですか?実際のケースを見てみましょう。
1. はじめに
HTML5 では、history.pushState() メソッドとhistory.replaceState() メソッドが導入されており、それぞれ履歴エントリを追加および変更できます。これらのメソッドは通常、window.onpopstate と組み合わせて使用されます。
2. PushState() メソッドの例
次の JavaScript コードが http://mozilla.org/foo.html で実行されると仮定します。
var stateObj = { foo: "bar" };
history.pushState(stateObj, "page 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() には、状態オブジェクト、タイトル (現在は無視されます)、および (オプション) の 3 つのパラメーターが必要です。これらの 3 つのパラメーターの詳細を説明します。
State オブジェクト — 状態オブジェクトの state は JavaScript オブジェクト であり、pushState() を通じて新しい履歴エントリを作成します。ユーザーが新しい状態に移動するたびに、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 事件就会在对应window对象上触发。 如果当前处于激活状态的历史记录条目是由history.pushState()方法创建,或者由history.replaceState()方法修改过的, 则popstate事件对象的state属性包含了这个历史记录条目的state对象的一个拷贝。
我们也可以直接在history对象上获取state，如下：
var currentState = history.state;
需要注意的是，调用 history.pushState() 或者 history.replaceState() 不会触发 popstate 事件。 opstate事件只会在浏览器某些行为下触发， 比如点击后退、前进按钮(或者在JavaScript中调用history.back()、history.forward()、history.go()方法)。
七、popstate 事件的例子
假如当前网页地址为 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,条目索引为1
history.pushState({page: 2}, "title 2", "?page=2"); //添加并激活一个历史记录条目 http://example.com/example.html?page=2,条目索引为2
history.replaceState({page: 3}, "title 3", "?page=3"); //修改当前激活的历史记录条目 http://ex..?page=2 变为 http://ex..?page=3,条目索引为3
history.back(); // 弹出 "location: http://example.com/example.html?page=1, state: {"page":1}"
history.back(); // 弹出 "location: http://example.com/example.html, state: null
history.go(2); // 弹出 "location: http://example.com/example.html?page=3, state: {"page":3}八、pushState()的用途
王二使用 pushState() 主要是它可以监听到浏览器上的返回事件，这在移动端上也同样适用，参考如下一段代码(可以直接运行）：
<body>
<p>window.onpopstate可以监听到返回键事件</p>
<script>
history.pushState({}, "");
window.onpopstate = function(event) {
//这里可以监听到浏览器的返回事件，并做你想做的事情，
//例如：跳转到另一个网页
location.href = "https://www.baidu.com";
};
</script>
</body>当然，用 window.onhashchange 也可以监听到浏览器上的返回事件，参考如下一段代码(可以直接运行）：
<body>
<p>window.onhashchange可以监听到返回键事件</p>
<script>
setTimeout(()=>{
location.hash="a"
},100);
setTimeout(()=>{
window.onhashchange = function(event) {
location.href = "https://www.baidu.com";
}
},200);
</script>
</body>相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
推荐阅读：
以上がPushStateとreplaceStateを使用する手順の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7518
15
1378
52
81
11
21
68
C++のmode関数の詳しい解説
Nov 18, 2023 pm 03:08 PM
C++ のモード関数の詳細な説明 統計において、モードとは、一連のデータ内で最も頻繁に現れる値を指します。 C++ 言語では、モード関数を記述することによって、任意のデータセット内のモードを見つけることができます。モード関数はさまざまな方法で実装できます。一般的に使用される 2 つの方法を以下で詳しく紹介します。 1 つ目の方法は、ハッシュ テーブルを使用して各数値の出現回数をカウントすることです。まず、各数値をキー、出現回数を値とするハッシュ テーブルを定義する必要があります。次に、特定のデータセットに対して次を実行します。
Win11での管理者権限の取得について詳しく解説
Mar 08, 2024 pm 03:06 PM
Windows オペレーティング システムは世界で最も人気のあるオペレーティング システムの 1 つであり、その新バージョン Win11 が大きな注目を集めています。 Win11 システムでは、管理者権限の取得は重要な操作であり、管理者権限を取得すると、ユーザーはシステム上でより多くの操作や設定を実行できるようになります。この記事では、Win11システムで管理者権限を取得する方法と、権限を効果的に管理する方法を詳しく紹介します。 Win11 システムでは、管理者権限はローカル管理者とドメイン管理者の 2 種類に分かれています。ローカル管理者はローカル コンピュータに対する完全な管理権限を持っています
Oracle SQLの除算演算の詳細説明
Mar 10, 2024 am 09:51 AM
OracleSQL の除算演算の詳細な説明 OracleSQL では、除算演算は一般的かつ重要な数学演算であり、2 つの数値を除算した結果を計算するために使用されます。除算はデータベース問合せでよく使用されるため、OracleSQL での除算演算とその使用法を理解することは、データベース開発者にとって重要なスキルの 1 つです。この記事では、OracleSQL の除算演算に関する関連知識を詳細に説明し、読者の参考となる具体的なコード例を示します。 1. OracleSQL での除算演算
C++の剰余関数の詳しい解説
Nov 18, 2023 pm 02:41 PM
C++ の剰余関数の詳しい説明 C++ では、剰余演算子 (%) を使用して、2 つの数値を除算した余りを計算します。これは、オペランドが任意の整数型 (char、short、int、long など) または浮動小数点数型 (float、double など) になる二項演算子です。剰余演算子は、被除数と同じ符号の結果を返します。たとえば、整数の剰余演算の場合、次のコードを使用して実装できます。
Vue.nextTick関数の使い方と非同期更新での応用について詳しく解説
Jul 26, 2023 am 08:57 AM
Vue.nextTick 関数の使い方と非同期更新での応用について詳しく説明 Vue の開発では、DOM を変更した直後にデータを更新したり、関連する操作が必要になったりするなど、データを非同期で更新する必要がある状況によく遭遇します。データが更新された直後に実行されます。このような問題を解決するために登場したのが、Vue が提供する .nextTick 関数です。この記事では、Vue.nextTick 関数の使用法を詳しく紹介し、コード例と組み合わせて、非同期更新でのアプリケーションを説明します。 1.Vue.nex
php-fpmのチューニング方法を詳しく解説
Jul 08, 2023 pm 04:31 PM
PHP-FPM は、PHP のパフォーマンスと安定性を向上させるために一般的に使用される PHP プロセス マネージャーです。ただし、高負荷環境では、PHP-FPM のデフォルト設定ではニーズを満たせない場合があるため、チューニングが必要です。この記事では、PHP-FPM のチューニング方法を詳しく紹介し、いくつかのコード例を示します。 1. プロセスの数を増やす デフォルトでは、PHP-FPM はリクエストを処理するために少数のプロセスのみを開始します。高負荷環境では、プロセス数を増やすことで PHP-FPM の同時実行性を高めることができます。
PHPモジュロ演算子の役割と使い方を詳しく解説
Mar 19, 2024 pm 04:33 PM
PHP のモジュロ演算子 (%) は、2 つの数値を除算した余りを取得するために使用されます。この記事では、モジュロ演算子の役割と使用法について詳しく説明し、読者の理解を深めるために具体的なコード例を示します。 1. モジュロ演算子の役割 数学では、整数を別の整数で割ると、商と余りが得られます。たとえば、10 を 3 で割ると、商は 3 になり、余りは 1 になります。モジュロ演算子は、この剰余を取得するために使用されます。 2. モジュロ演算子の使用法 PHP では、% 記号を使用してモジュロを表します。
Linuxシステムコールsystem()関数の詳細説明
Feb 22, 2024 pm 08:21 PM
Linux システム コール system() 関数の詳細説明 システム コールは、Linux オペレーティング システムの非常に重要な部分であり、システム カーネルと対話する方法を提供します。その中でも、system()関数はよく使われるシステムコール関数の一つです。この記事では、system() 関数の使用法を詳しく紹介し、対応するコード例を示します。システム コールの基本概念 システム コールは、ユーザー プログラムがオペレーティング システム カーネルと対話する方法です。ユーザープログラムはシステムコール関数を呼び出してオペレーティングシステムを要求します。
