jQuery でページを更新する

Shraddha Paghdar 2023年1月30日 2022年7月12日
  1. jQuery で location.reload() メソッドを使用してページを更新する
  2. jQuery で history.go() メソッドを使用してページを更新する
jQuery でページを更新する

今日の記事では、jQuery の location オブジェクトと history オブジェクトを使用してページを更新する方法を学習します。

jQuery で location.reload() メソッドを使用してページを更新する

ユニフォームリソースロケーターはページの場所であり、場所インターフェースで表されます。加えられた変更は、それが参照するオブジェクトに反映されます。

ドキュメントとウィンドウのインターフェイスには、それぞれ Document.locationWindow.location を介してアクセスできる場所が関連付けられています。

[更新]ボタンと同様に、location.reload() 手法は既存の URL を再読み込みします。location.reload() はよく知られている JavaScript メソッドです。したがって、jQuery は必要ありません。

リロードするとハングし、SECURITY_ERROR DOMException がスローされる場合があります。これは、スクリプト呼び出し location.reload() の基礎が、location オブジェクトを所有するページの起点と異なる場合に発生します。

構文:

reload();

次の例でそれを理解しましょう。

注:次のコードはこの方法では実行できず、出力もありません。結果を表示するには、既存のコードに追加する必要があります。

HTML コード:

<p>Hello World!</p>
<button type="button" id="btn">Reload</button>

JavaScript コード:

$('#btn').click(function() {
  location.reload();
});

jQuery をサポートするブラウザで上記のコードスニペットを実行してみてください。ページをリロードします。

jQuery で history.go() メソッドを使用してページを更新する

history.go() メソッドは、セッション履歴の特定のページをロードします。これを使用して、パラメーターの値に基づいて履歴内を前後に移動できます。このメソッドは非同期です。

history.go() メソッドは、渡されたパラメーターに基づいてブラウザーの履歴から URL をロードします。指定されたパラメータが 0 の場合、現在のページをリロードします。

構文:

history.go(0);

次の例でそれを理解しましょう。

注:次のコードはこの方法では実行できず、出力もありません。結果を表示するには、既存のコードに追加する必要があります。

HTML コード:

<p>Hello World!</p>
<button type="button" id="btn">Reload</button>

JavaScript コード:

$('#btn').click(function() {
  history.go(0);
});

jQuery をサポートするブラウザで上記のコードスニペットを実行してみてください。ページをリロードします。

こちらのデモをご覧ください。

Shraddha Paghdar avatar Shraddha Paghdar avatar

Shraddha is a JavaScript nerd that utilises it for everything from experimenting to assisting individuals and businesses with day-to-day operations and business growth. She is a writer, chef, and computer programmer. As a senior MEAN/MERN stack developer and project manager with more than 4 years of experience in this sector, she now handles multiple projects. She has been producing technical writing for at least a year and a half. She enjoys coming up with fresh, innovative ideas.

LinkedIn