location.reload()

JavaScriptのlocation.reload()でページの更新

ブラウザの再読み込み(更新)を行うボタンを、JavaScriptのコードで作ってみました。

location.reload()

JavaScriptの location.reload() は、現在表示されているページの更新を行うメソッドです。

かかかず
かかかず

ブラウザの更新ボタンを押したときと同じ動作をします。

Mac のブラウザで「ページの更新」は、ショートカット「command + R キー」。Windowだと「F5」を押しながら再読み込みした時と同じ働きです。

location.reload()を使ったページ更新のサンプル

早速 location.reload() を使ったサンプルです。

以下のボタンをクリックすると、ページが更新されます。

ページ更新のコード

HTMLは、以下のようにidを付与した button タグのみです。

<button id="refleshBtn">ページ更新</button>

JavaScriptのコードは、.querySelector で「refleshBtn」のidを指定して、.addEventListener のクリックでページ更新を行うシンプルなコードです。

document.querySelector('#refleshBtn').addEventListener('click', () => {
	window.location.reload();
});
かかかず
かかかず

めちゃめちゃシンプルなコードです。

もっと簡単でシンプルなコード

上記のコードはシンプルですが、以下の通り記述しても同じ動きになります。

<a href="javascript:location.reload();">ページ更新</a>

この場合、別途JavaScriptのコードを記述せずに済むので、状況に応じて使い分けてください。