【JavaScript入門】reloadでページを更新する(一部だけ更新/禁止)

こんにちは！エンジニアの中沢です。

JavaScriptにはページの更新を行うための「reloadメソッド」があります。

ページの更新には、フレームだけリロードしたり、ページの一部だけを更新することができるので、上手く活用してください。

この記事では、

ページをreloadメソッドでリロードする方法
キャッシュを無視して更新する方法
キャッシュを利用して更新する方法
フレームのみをリロードする方法
ページの一部だけをリロードする方法
F5キーによるリロードを禁止する方法

などの基本的な使い方から応用的な使い方に関しても解説していきます。
今回はこれらの方法を覚えるために、ページの更新のさまざまな使い方をわかりやすく解説します！

この記事の目次

1 ページをreloadメソッドでリロードする方法
2 reloadメソッドの応用的な使い方
3 フレームのみをリロードする方法
4 ページの一部だけをリロードする方法
5 リロードを禁止する方法
6 まとめ

ページをreloadメソッドでリロードする方法

ページを再読み込みして更新するには、「window」オブジェクトの「window.location.reload」メソッドを使用します。

基本的には、「reload」メソッドを呼び出すだけでページが更新されます。

以下、実際のコードを見ていきましょう。

// ページをreloadする方法
// reloadの基本的な使い方
function doReload() {

    // reloadメソッドによりページをリロード
    window.location.reload();
}
 
window.addEventListener('load', function () {

    // ページ表示完了した5秒後にリロード
    setTimeout(doReload, 5000);
});

上のコードでは、「load」イベント発行時、つまりページのコンテンツが全てダウンロードされた時に「setTimeout」メソッドを実行して、5秒後に「doReload」を呼ぶように設定してます。
「doReload」では、「window」オブジェクトの「reload」メソッドを実行してページを更新しています。

その結果、現在のページが再読み込みされ更新されます。

reloadメソッドの応用的な使い方

キャッシュを無視して更新する方法

「reload」メソッドの応用として、「reload」の引数にtrueかfalseを与え、ページキャッシュを無視してページを更新するか、ページキャッシュを利用してページを更新するかが選択可能です。

ページキャッシュとは既にダウンロード済みのページのパーツのことです。
例えば、ページのHTMLファイルや画像、JavaScriptファイル、CSSファイルなどがページキャッシュとして残されています。

次回読み込み時は、これらキャッシュとして残されているファイルをダウンロードしなくても済みますので、ページの更新が速くなります。

まずは、ページキャッシュを使用せず、ページのコンテンツを全てサーバーから新たにダウンロードする方法を見ていきましょう。

この場合、「reload」メソッドの引数に「true」を与えて実行します。

// ページをreloadする方法
// reloadの応用方法
// キャッシュを無視してリロードする方法
function doReloadNoCache() {
 
    // キャッシュを無視してサーバーからリロード
    window.location.reload(true);
 
}
 
window.addEventListener('load', function () {
 
    // ページ表示完了した5秒後にリロード
    setTimeout(doReloadNoCache, 5000);
 
});

上の例では、ページの表示が完了して5秒後に、「window」オブジェクトの「reload」メソッドに引数「true」を与えて実行しています。

この場合、5秒後にページが全てのコンテンツがサーバーからダウンロードされます。

キャッシュを利用して更新する方法

次にページのキャッシュを利用してページを更新する方法を見ていきましょう。

キャッシュがある場合、ダウンロードせずにブラウザに表示されますので、ページの表示速度が速くなります。

ただし、サーバー上のパーツがキャッシュのパーツより新しい場合は、新たにサーバーからパーツがダウンロードされます。

キャッシュを利用してページを更新するには「window」オブジェクトの「reload」メソッドの引数に「false」を与えて実行します。

// reloadの応用方法
// キャッシュを利用してリロードする方法
function doReloadWithCache() {
 
    // キャッシュを利用してリロード
    window.location.reload(false);
 
}
 
window.addEventListener('load', function () {
 
    // ページ表示完了した5秒後にリロード
    setTimeout(doReloadWithCache, 5000);
 
});

上の例では、ページの表示が完了して5秒後に、「window」オブジェクトの「reload」メソッドに引数「false」を与えて実行しています。

この場合、5秒後にサーバー上のページのパーツがキャッシュのパーツより新しい場合はサーバーからダウンロードされ、それ以外の場合はキャッシュにあるページのパーツが利用され画面に表示されます。

なお、実際のところキャッシュが利用されるかサーバーからダウンロードされるかは、Webサーバーの設定に依存します。Webサーバーの設定によっては、毎回キャッシュが利用される場合があります。

これは、毎回ダウンロードされることを防ぎ、サーバー側のネットワークの負荷を下げ、Webサーバーの負荷も下げるためです。

フレームのみをリロードする方法

HTMLタグの「iframe」を用いれば、ページ内のフレームに別のHTMLページを挿入できます。

この際、その「iframe」のフレームのみをreloadして更新できます。

「iframe」オブジェクトの「contentWindow.location.reload」メソッドを使用すると「iframe」のフレーム（contentWindow）のみ更新されます。

以下、実際のコードを見ていきましょう。

「index.html」「frametarget.html」「iframe.js」は同じフォルダに配置してください。

そして、「index.html」を開くのですが、パソコン上ではこのサンプルコードは動きません。

ただ、Webサーバーへアップロードすると動きますので、お持ちの場合はWebサーバーへアップロードして動作確認してください。

index.html：

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="utf-8" />
        <title>HTML</title>
        <script type="text/javascript" src="iframe.js?var=1.0"></script>
    </head>
    <body>

        <h1>iframeをreloadするサンプル</h1>

        <iframe id="frametarget" src="frametarget.html" width="700" height="300">

        </iframe>

    </body>
</html>

frametarget.html：

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <title>IFRAME</title>
        <meta charset="utf-8" />
    </head>
    <body>
        <div id="container">
            <h1>フレームサンプル</h1>
            <p class="article">
                サンプルメッセージ
            </p>
            <script type="text/javascript">
                <!--
                var cnt = 0;
                function count() {
                    cnt++;
                    document.open();
                    document.write('cnt = ' + cnt);
                    document.close();
                }
                setInterval(count, 1000);
                //-->
            </script>
        </div>
    </body>
</html>

iframe.js：

// フレームをreloadする方法
function doReloadTheFrame() {

    // フレームのDOM要素を取得
    var iframe = document.getElementById('frametarget');

    // フレームをreload
    iframe.contentWindow.location.reload(true);

}
window.addEventListener('load', function () {

    // 5秒ごとに、フレームをreload
    setInterval(doReloadTheFrame, 5000);

});

上の例では、「index.html」が画面に表示された後から5秒ごとにid=”frametarget”の「iframe」タグのフレームが更新されます。

5秒ごとに呼び出される「doReloadTheFrame」では、「getElementById」に”frametarget”を指定して「iframe」オブジェクトを変数iframeに取得してます。

そして「iframe」オブジェクトの「contentWindow.location.reload」メソッドにてフレームのみ更新しています。

ただ通常、セキュリティ上親ページからIFRAMEタグを操作できません。

唯一、「同一ドメイン」のページは、同じ管理者が管理しているページであり安全であるものとみなされ、親ページからIFRAMEタグを操作可能です。

親ページとIFRAMEタグの参照先ページが「違うドメイン」の場合は、セキュリティ上安全でないため、親ページからIFRAMEタグを操作できません。

また、パソコン上でも親ページからIFRAMEタグを操作できません。これはパソコン上では、IFRAMEの参照先を自由に変更でき、セキュリティ的に安全でないからです。

IFRAMEタグとドメインの関係について詳しくは、以下のURLを参照してください。

同一オリジンポリシー - Web セキュリティ | MDN

ページの一部だけをリロードする方法

Ajaxを使う方法

JavaScriptでは、ページの一部だけ更新することができます。

「Ajax」という技術を使用し、「XMLHttpRequest」オブジェクトにてサーバーに対し「非同期XML通信」を行います。

「XMLHttpRequest」により、ページ読み込み具合とは関係なく、非同期にサーバーからデータを取得します。

送受信するデータは必ずしもXMLである必要はなく、HTMLやJSONのデータも取得できます。

以下、実際のコードを見ていきましょう。

サンプルコードでは、「index.html」「ajax.html」「ajax.js」は同じフォルダに配置してください。そして、「index.html」を開いてください。

index.html：

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="utf-8" />
        <title>HTML</title>
        <script type="text/javascript" src="ajax.js?ver=1.0"></script>
    </head>
    <body>

        <h1>Ajaxを使ったreloadサンプル</h1>

        <div id="ajaxreload">
            <h1>Ajax更新エリア</h1>
            <p class="article">
                サンプルメッセージ
            </p>
        </div>

    </body>
</html>

ajax.html：

<div class="ajaxReturn">
    <h1>Ajaxからの返信</h1>
    <p class="article">
        Ajaxメッセージ
    </p>
</div>

ajax.js：

// ページの一部だけをreloadする方法
// Ajaxを使う方法
// XMLHttpRequestを使ってAjaxで更新
function ajaxUpdate(url, element) {

    // urlを加工し、キャッシュされないurlにする。
    url = url + '?ver=' + new Date().getTime();

    // ajaxオブジェクト生成
    var ajax = new XMLHttpRequest;

    // ajax通信open
    ajax.open('GET', url, true);

    // ajax返信時の処理
    ajax.onload = function () {

        // ajax返信から得たHTMLでDOM要素を更新
        element.innerHTML = ajax.responseText;
    };

    // ajax開始
    ajax.send(null);
}

window.addEventListener('load', function () {

    var url = "ajax.html";

    var div = document.getElementById('ajaxreload');

    setTimeout(function () {
        ajaxUpdate(url, div);
    }, 5000);

});

上の例では、index.htmlが表示されて5秒後に「Ajax」通信が開始されます。

データの送受信が完了した時に「XMLHttpRequest」オブジェクトの「onload」イベントが発行され、イベントハンドラの第一引数に受信したHTMLやJSONのテキストが入ります。

「Ajax」通信完了後、受信したajax.htmlファイルのHTMLデータを、id=”’ajaxreload’”の「div」タグのinnerHTMLプロパティに代入しています。

これにより、非同期にページの一部の「div」タグ内のみ更新されます。

「getElementById」や「innerHTML」について詳しくは、以下のURLを参照してください。

【JavaScript入門】はじめてのDOM操作・取得まとめ！

更新日 : 2020年5月8日

jQueryを使う方法

jQueryを使っても「Ajax」通信ができます。

そのためには、jQueryの「ajax」メソッドを使用します。

「ajax」メソッドの引数にJSONオブジェクト形式で「url」やキャッシュの利用の有無、Ajax通信成功時の受信データを受け取るコールバック関数、Ajax通信失敗時に実行されるコールバック関数などを指定します。

以下、実際にコードを見ていきましょう。

「index.html」「ajax.html」「jquery-ajax.js」は同じフォルダに配置してください。そして、「index.html」を開いてください。

index.html：

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="utf-8" />
        <title>HTML</title>
        <!-- jQuery CDN: https://code.jquery.com/ -->
        <script src="https://code.jquery.com/jquery-2.2.4.js" integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI=" crossorigin="anonymous"></script>
        <script type="text/javascript" src="jquery-ajax.js?ver=1.0"></script>
    </head>
    <body>
        <h1>jQueryを使ったreloadサンプル</h1>

        <div id="ajaxreload">
            <h1>jQuery更新エリア</h1>
            <p class="article">
                サンプルメッセージ
            </p>
        </div>

    </body>
</html>

ajax.html：

<div class="ajaxReturn">
    <h1>jQueryのAjaxからの返信</h1>
    <p class="article">
        jQueryのAjaxメッセージ
    </p>
</div>

jquery-ajax.js：

// jQueryを使う方法
function dojQueryAjax() {

    // jQueryのajaxメソッドを使用しajax通信
    $.ajax({
        type: "GET", // GETメソッドで通信

        url: "ajax.html", // 取得先のURL

        cache: false, // キャッシュしないで読み込み

        // 通信成功時に呼び出されるコールバック
        success: function (data) {

            $('#ajaxreload').html(data);

        },
        // 通信エラー時に呼び出されるコールバック
        error: function () {

            alert("Ajax通信エラー");


        }
    });

}

window.addEventListener('load', function () {

    setTimeout(dojQueryAjax, 5000);

});

上の例では、index.html表示完了の5秒後に「dojQueryAjax」関数を呼び出し、その中でjQueryの「ajax」メソッドを実行し「Ajax」通信を行っています。

キャッシュは利用しないよう、「cache」オプションは「false」にしています。Ajax通信成功時には、受信したajax.htmlのHTMLをid=”ajaxreload”のタグに挿入しています。

Ajax通信失敗時にはエラーメッセージをalertメソッドで表示しています。

リロードを禁止する方法

F5キーによるリロードを禁止する方法

F5キー押下によるページのreloadを禁止したい場合もあります。

「document」オブジェクトの「keydown」イベント発行時に、キーの番号である「keyCode」を見て、キーがF5である場合に「keydown」イベントの実行をキャンセルします。

これにより、F5キーの押下をキャンセルできます。

キャンセルするには、「keydown」イベントのコールバック関数の第一引数の「イベントオブジェクト」の「preventDefault」メソッドを呼び出します。

「preventDefault」メソッドは、イベントの実行を禁止（prevent）します。

実際のサンプルコードは以下の通りです。

// reloadを禁止する方法
// F5キーによるreloadを禁止する方法
document.addEventListener("keydown", function (e) {
 
    if ((e.which || e.keyCode) == 116 ) {
        e.preventDefault();
    }
 
});

上の例のように、「document」の「keydown」イベントのイベントハンドラ内で「keyCode」がF5を示す値116かどうかチェックしています。

F5キーを示す値116だった場合、イベントオブジェクト「e」の「preventDefault」メソッドを実行しF5キー押下のイベントの実行を禁止しています。

ページ離脱時にアラート(alert)を出す方法

ページ離脱時に、警告をalertメソッドと同様の形式で表示できます。警告に対し「離脱する」か「離脱しない」かユーザーが選択できます。

これにより、ユーザーがうっかりページを離脱してしまうミスを防げます。

警告を出すには「window」オブジェクトの「beforeunload」イベントにイベントハンドラを設定します。

「beforeunload」イベントはページ離脱直前に発行されます。

イベントハンドラの第一引数のイベントオブジェクトの「returnValue」に離脱時alertに表示するメッセージを設定すると、ページ離脱時にalertが表示されます。

実際のサンプルコードは以下の通りです。

// reloadを禁止する方法
// ページ離脱時alertを出す方法
window.addEventListener('beforeunload', function (e) {
 
    // メッセージを表示する
    e.returnValue = '本当にページ移動しますか？';
 
});

上の例では、「window」オブジェクトの「beforeunload」イベント発行時のイベントオブジェクト「e」の「returnValue」に離脱時に表示するメッセージを設定しています。

これにより、ページ離脱時に警告alertが表示され、そのまま離脱するか離脱をキャンセルするかユーザーが選択できます。

ページ離脱防止と「beforeunload」イベントについて詳しくは、下記URLを参照してください。