JavaScriptでページをリロードする

概要

JavaScriptでページのリロードをするには、Windowオブジェクトのwindow.location.reload()メソッドを用います。

プログラム例

コード

下記のHTMLファイルを作成します。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
  <script type="text/javascript">
    var now = new Date();
    function LoadProc() {
      var target = document.getElementById("DateTimeDisp");

      var Year = now.getFullYear();
      var Month = now.getMonth();
      var Date = now.getDate();
      var Hour = now.getHours();
      var Min = now.getMinutes();
      var Sec = now.getSeconds();

      target.innerHTML = Year + "年" + Month + "月" + Date + "日" + Hour + ":" + Min + ":" + Sec;
    }

    function Button_Click() {
      window.location.reload();
    }
  </script>

</head>
<body onload="LoadProc();">
現在の時刻:
   <div id="DateTimeDisp"></div>
<hr />
  <div>
    <input id="Button1" type="button" value="リロード" onclick="Button_Click();"/></div>
</body>
</html>

解説

ページのリロード

下記のコードにより、ボタンがクリックされると上記の"Button_Click"関数が呼び出されます。関数内の"window.location.reload();"によりページがリロードされます。

function Button_Click() {
  window.location.reload();
}

現在時刻の表示

下記のコードは、HTML中の"DateTimeDisp"のIDを持つ要素に現在時刻を表示するコードです。詳細はこちらの記事を参照して下さい。

var now = new Date();
function LoadProc() {
  var target = document.getElementById("DateTimeDisp");

  var Year = now.getFullYear();
  var Month = now.getMonth();
  var Date = now.getDate();
  var Hour = now.getHours();
  var Min = now.getMinutes();
  var Sec = now.getSeconds();

  target.innerHTML = Year + "年" + Month + "月" + Date + "日" + Hour + ":" + Min + ":" + Sec;
}

実行結果

HTMLファイルを表示します。下図の画面が表示され、現在の時刻が画面に表示されます。
JavaScriptでページをリロードする:画像1

Webページ内の[リロード]ボタンを押すとページが再読み込みされます。画面に表示されている時刻が変化しています。
JavaScriptでページをリロードする:画像2