【JavaScript】location.reload()でページをリロードする

こんにちは、ryohei(@ityryohei)です!

本記事では、JavaScriptのlocation.reload()でページをリロードする方法をご紹介しています。

JavaScriptで何らかのアクションをした後にページをリロードする処理を組みたいんだけど、良い方法ないかな?

上記の疑問にお答えします。

では、解説していきます。

location.reload()とは

JavaScriptでページをリロードするには、location.reload()を使用します。location.reload()はブラウザの再読み込みと現在開いているページのURLを再読み込みすることができるメソッドです。

構文は下記の通りです。

location.reload()

上記メソッドが呼び出されたタイミングでページがリロードされます。せっかくですので色々な方法でリロードを試してみたいと思います。

location.reload() は同じオリジン内で使用することができます。オリジンが異なるページで呼び出された場合はDOMExceptionでセキュリティーエラーとなる場合があります。オリジンの定義についてはこちらをご参照ください。

ボタンクリックでページをリロードする

ボタンクリックでページをリロードします。addEventListenerclickイベントを使用します。

HTML

<button class="btn" type="button">ページをリロードする</button>

JavaScript

document.querySelector('.btn').addEventListener('click', ()=>{
    location.reload();
}, false);

setTimeoutで一定時間経過後にページをリロードする

setTimeout()に指定した秒数経過後にページをリロードします。 第二引数にミリ秒で時間を指定します。 下記例では、スクリプトが読み込まれた5秒後に関数内の処理が実行されます。

JavaScript

setTimeout(() => {
    location.reload();
}, 5000);

setIntervalで一定の間隔でページをリロードする

setInterval()で一定の時間間隔でページをリロードします。第二引数にミリ秒で時間間隔指定します。 下記例では、5秒間隔で関数内の処理が実行されます。

JavaScript

setInterval(() => {
    location.reload();
}, 5000);

最後に

本記事では、ページをリロードするlocation.reload()の構文といくつかのサンプルを用いて使い方をご紹介しました。WebサイトやWebアプリケーションでは特定のタイミングでページを更新させたい場合があります。その際にlocation.reload()を使って処理を作成していただければと思います。

以上、JavaScriptのlocation.reload()ページをリロードする方法のご紹介でした!

JavaScriptを基礎からしっかりと学びたい方へ

下記の参考書がおすすめです。私がJavaScript入門時に購入した書籍で、基礎から応用まで多様なサンプルを用いて解説されています。ページ数は多いですが、内容が伴っているのですらすら読めます。腰を据えて学びたい方に最良の一冊となっています。

おすすめの書籍

Adobe Creative Cloudを通常価格で購入していませんか?

Adobe Creative Cloud(Adobe CC)はAdobe社が提供するクリエイター向けのサービスです。WEB制作の幅を広げる「Photoshop・Illustrator・XD」Youtuberや動画クリエイターの編集作業に欠かせない「Premiere Pro・After Effects」など全20以上のアプリが提供されており、幅広いプランが用意されています。

コンプリートプランはAdobe CCの全20以上のアプリが使用できるプランです。多くのアプリが使用できるため定価で購入すると年間7万円以上するプランですが、デジタルハリウッドのAdobeマスター講座では「基礎動画教材+Adobe CC コンプリートプラン(12ヵ月)」がセットになって39,980円(税込)で利用できます。定価より安価にAdobe Creative Cloudのライセンスを購入でき、以降のライセンス更新も可能。動画教材で基礎スキルを習得できるので、入門する方にも便利な講座です。詳しくは下記のリンクからチェックしてみてくださいね。