JS

ネイティブネタ帳

UI

モーダル

タブ

ドロワー

スライダー

スクロール

アコーディオン

目次

ローディングアニメーション

ツールチップ

ヘッダー

フォーム

フォーム

文字

文字の装飾

文字の操作

文字のカウント

数字の操作

ウィンドウ

ウィンドウ操作

タイトルの操作

ページ遷移時の動き

class

classの操作

要素

要素の操作

要素の追加

API

WP REST API

Google Books APIs

楽天市場API

画像・動画

画像の操作

YouTube

リンク

Google Analytics

cookie

検索

検索

お気に入り登録

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

お気に入り登録をすると、お気に入り記事一覧に登録することができます。

location.reload()

JavaScriptの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のコードを記述せずに済むので、状況に応じて使い分けてください。