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を参照してください。
【JavaScript入門】onloadイベントの使い方とハマりやすい注意点とは
更新日 : 2019年4月22日
まとめ
いかがでしたか？
今回はreloadメソッドでページを更新する方法を解説しました。
フレームだけリロードしたり、ページの一部だけを更新することができるので、ぜひ活用してくださいね。もし、ページをリロードする方法を忘れてしまったらこの記事を確認してください！
