JavaScriptでページをリロードさせたい時に便利なlocation.reload()メソッドの使い方

ハッシュ(#)の変更を検知するhashchangeイベント

JavaScriptでユーザーが現在開いているページを何かのタイミングリロードさせたいケースがあります。

そんな時は、そのタイミングでlocation.reload()メソッドを使うのが便利です。

メソッド

メソッド意味
location.reload([真偽値])ページをリロードさせる。引数に[true]を指定するとブラウザキャッシュを削除してリロードさせます。

サンプルコード

サンプルコードとして、リロードボタンを用意しました。

Output
Pug
 button#button.mb-4 Button
SCSS
#button {
	--background-color: #fff;
  --color: #576574;
	--transition: all .3s;
	margin-bottom: 10px;
  background-color: var(--background-color);
  padding: 10px;
  color: var(--color);
	border: 1px solid #576574;
  cursor: pointer;
  width: 120px;
	transition:  var(--transition);
	&:hover {
		transition: var(--transition);
		color: var(--background-color);
		background-color: var(--color);
	}
}
JavaScript
// ボタンをクリックしたら予め用意していたonClickAction()関数を実行する
document.getElementById('button').addEventListener('click', onClickAction);
/** ボタンをクリックと関数を実行 */
function onClickAction() {
	//コンファームを表示
	const checkConfirm = confirm('リロードします。よろしいですか?'); 
	if ( checkConfirm ) {
		location.reload();
	}
}
インストラクター
コメント

コメントを残す