現在のページを再読み込みする(location.reload)

広告

windows.location オブジェクトの reload メソッドを実行すると、現在表示しているページを再読み込みしてあらためて表示します。ここでは JavaScript を使って現在のページを再読み込みする方法について解説します。

location.reloadメソッドの使い方

window.location オブジェクトで用意されている reload メソッドを実行すると、現在表示している Web ページを再読み込みします。書式は次のとおりです。

location.reload()

再読み込みによって履歴は追加されません。現在のページのまま新しい内容に更新されます。

サンプルコード

次のサンプルを見てください。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>サンプル</title>
</head>
<body>

<h1>サンプル</h1>

<p id="msg">現在のページを再読み込みします</p>

<input type="button" value="reload" id="btnReload">

<script>
let d = new Date();
let element = document.getElementById('msg');
element.insertAdjacentHTML('afterend', '<p>' + d.toTimeString() + '</p>');

let btnReload = document.getElementById('btnReload');
btnReload.addEventListener('click', function(){
    location.reload();
});
</script>

</body>
</html>

画面に表示されているボタンをクリックすると現在のページを再読み込みします。

現在のページを再読み込みする(location.reload)(1)

現在のページを再読み込みする(location.reload)(2)

-- --

JavaScript を使って現在のページを再読み込みする方法について解説しました。

( Written by Tatsuo Ikura )

関連記事 (一部広告含む)
Profile
profile_img

著者 / TATSUO IKURA

初心者~中級者の方を対象としたプログラミング方法や開発環境の構築の解説を行うサイトの運営を行っています。