ページをリロードせずに URL を変更するにはどうすればよいですか?

ページを再ロードせずに URL を変更する: 決定版ガイド

Web 開発の世界では、ページを再ロードせずにアドレス バーを更新する機能が長い間利用されてきました。待望の機能。かつては夢でしかなかったこの概念は、HTML5 History API の導入により、ほとんどの最新ブラウザで現実になりました。

ゲームチェンジャー: HTML5 History API

HTML5 History API は、次のことを可能にします。開発者はブラウザの履歴オブジェクトを操作するコントロールを使用できるため、ページ全体をリロードせずに URL を変更できます。この機能は、次の 3 つの主要なメソッドによって実現されます。

• pushState(): ブラウザ履歴に新しいエントリを作成し、ページをリロードせずに URL を更新します。
• replaceState(): ブラウザ履歴の現在のエントリの URL を変更し、新しいエントリに置き換えます。 one.
• popstate(): ブラウザ履歴の現在のエントリを削除し、履歴スタックの前の URL に移動します。

pushState の使用方法()

pushState() の機能を活用し、ページを更新せずにアドレス バーを更新するには、次の手順に従います。手順:

1. 状態オブジェクトまたは文字列を定義します: このオブジェクトまたは文字列は、新しい URL に関連付けられたデータを表します。
2. タイトルを指定します: タイトルはブラウザのタイトル バーに表示され、空の場合もあります。 string.
3. 新しい URL を指定します: これは、アドレス バーに表示する URL です。

pushState() の構文は次のとおりです。

window.history.pushState(stateObject, title, newURL);

実践例

これは、次の方法を示す例です。 use PushState():

// Create a new history entry with the updated URL
window.history.pushState(null, null, "/new-url");

このコードは、ページを更新せずにアドレス バーを「/new-url」に更新します。

ブラウザ サポート

HTML5 History API は、すべての主要な最新ブラウザでサポートされています。以下を含む:

• Chrome
• Firefox
• Safari
• Microsoft Edge

この新たに得た知識を使用すると、次のことが可能になります。ページをリロードすることなく、Web ページの URL を簡単に変更できるようになりました。これにより、Web 上でよりダイナミックでシームレスなユーザー エクスペリエンスを作成するための刺激的な可能性が開かれます。

以上がページをリロードせずに URL を変更するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。