この記事では、JavaScript を使用して Web ページをリロードせずに URL を変更する方法について説明します。
ページをリロードせずに JavaScript で URL を変更/変更する方法は?
Web ページをリロードせずに URL を変更するには、次の JavaScript 定義済みメソッドを使用します。
方法 1: 「pushState()」メソッドを使用して、ページをリロードせずに JavaScript で URL を変更する
Web ページをリロードせずに URL を変更するには、「 pushState() ' 方法。これは、「 履歴オブジェクト ページをナビゲートしたり更新したりせずにブラウザの履歴を変更できるようにします。履歴スタックを追加または変更するだけで、新しいページはロードしません。このアプローチを使用すると、ブラウザの履歴スタックに新しいエントリを追加することで、ページを前後に切り替えることができます。
構文
「pushState()」メソッドの指定された構文に従います。
窓。 歴史 . プッシュ状態 ( 州 、 タイトル 、 URL ) ;
ここ：
- 「 州 」は、新しい履歴エントリを表します。
- 「 タイトル 」は、ブラウザのタイトル バーに表示される特定のテキストです。
- 「 URL 」は、新しいエントリとして置き換えられた URL を示します。
例
HTML ファイルで、「」を呼び出す 4 つのボタンを作成します。 変更 URL() ボタンクリック時の機能：
< ボタンオンクリック = 'modifyUrl('CSS チュートリアル', 'CSSTutorial.html');' > 2 ボタン >
< ボタンオンクリック = 'modifyUrl('JavaScript チュートリアル', 'JavaScriptTutorial.html');' > 3 ボタン >
< ボタンオンクリック = 'modifyUrl('Java チュートリアル', 'JavaTutorial.html');' > 4 ボタン >
関数を定義する」 変更 URL() 」を、ボタンのクリックでトリガーされる JavaScript ファイルに記述します。 2 つのパラメータを取ります。 タイトル ' そしてその ' URL 」。ボタンのクリックでメソッドが呼び出されると、「タイトル」と「url」が引数として渡されます。 「」の種類を確認する プッシュ状態 ” ではない場合、履歴オブジェクトの ' 未定義 」。次に、「 history.pushState() 」 URL を変更するメソッド:
関数 変更 URL ( タイトル 、 URL ) {
もしも ( タイプ ( 歴史。 プッシュ状態 ) != '未定義' ) {
だった オブジェクト = {
タイトル : タイトル 、
URL : URL
} ;
歴史。 プッシュ状態 ( オブジェクト 、 オブジェクト。 タイトル 、 オブジェクト。 URL ) ;
}
}
ボタンをクリックするたびに、ページをリロードせずに URL が正常に変更されることがわかります。
上記の出力では、左上の戻る矢印ボタン ( <- ) ボタンをクリックしているときに有効になっている場合、「 pushState() 」メソッドは、履歴スタックに新しい URL を追加します。
方法 2: 「replaceState()」メソッドを使用して、ページをリロードせずに JavaScript で URL を変更する
使用 ' replaceState() 」 Web ページをリロードせずに URL を変更するメソッド。 「」の特徴でもあります。 履歴オブジェクト 」ですが、履歴スタックに新しいエントリは追加されません。ブラウザの履歴の既存の状態を変更し、新しい状態に置き換えます。このアプローチを使用すると、ページ間を前後に切り替えることができなくなります。
構文
指定された構文は、「replaceState()」メソッドに使用されます。
例
定義された関数で、「 replaceState() ページをリロードしたりナビゲートしたりせずに、ボタンのクリック時に URL を置き換える ” メソッド:
もしも ( タイプ ( 歴史。 replaceState ) != '未定義' ) {
だった オブジェクト = {
タイトル : タイトル 、
URL : URL
} ;
歴史。 replaceState ( オブジェクト 、 オブジェクト。 タイトル 、 オブジェクト。 URL ) ;
}
}
出力は、ボタンをクリックするたびに URL が変更され、戻る矢印ボタンが無効になっているため、戻るために移動するオプションがないことを示しています。
JavaScript でページをリロードせずに、URL の変更に関連するすべての重要な情報を提供しました。
結論
Web ページを更新せずに URL を変更するには、「 pushState() 」メソッドまたは「 replaceState() ' 方法。 「pushState()」メソッドは、新しい URL を新しいエントリとして履歴スタックに追加し、ユーザーが前後に移動できるようにします。一方、「replaceState()」メソッドは URL を置き換え、バック ページへの移動を許可しません。この記事では、JavaScript を使用して Web ページをリロードせずに URL を変更する方法について説明しました。