JavaScript を使用してページをリロードせずにブラウザの URL を変更するにはどうすればよいですか?

JavaScript を使用してページを再ロードせずにブラウザ URL を変更する

多くの JavaScript アクションは現在のページに影響を与えますが、後で参照したりブックマークしたりするために URL を変更する必要があります。さらに、「戻る」ボタンを使用したときに元の URL を復元したいという要望もあります。これを実現する方法は次のとおりです。

オプション 1: フラグメント識別子の使用 (レガシー ブラウザの場合)

新しいhistory.pushState およびhistory.popState をサポートしていないブラウザの場合、フラグメント識別子を利用するという「古い」方法があります。この方法ではページの再読み込みは必要ありません。

必要な状態情報を含む値を window.location.hash プロパティに割り当てることで、状態を URL に効果的にエンコードできます。次に、window.onhashchange イベントを使用するか、古いブラウザの場合はハッシュ値を定期的にポーリングして変更を検出する必要があります。ページの読み込み時にハッシュ値に基づいてページ コンテンツを初期化します。

オプション 2:history.pushState およびhistory.popState (最新のブラウザ)

最新のブラウザでは、 History.pushState メソッドとhistory.popState メソッドは、よりクリーンで堅牢なアプローチを提供します。 history.pushState を使用すると、ページをリロードせずに URL を更新できます。一方、history.popState は「戻る」ボタンの処理を処理します。この方法は、すべての主要な最新ブラウザでサポートされています。

ID の衝突を避ける

フラグメント識別子を使用する場合は、ページ上の要素 ID との潜在的な衝突に注意してください。ブラウザは、ID がハッシュ値と一致する要素までスクロールする傾向があり、予期しない動作が発生する可能性があります。

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