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ファイルを表示します。下図の画面が表示され、現在の時刻が画面に表示されます。
Webページ内の[リロード]ボタンを押すとページが再読み込みされます。画面に表示されている時刻が変化しています。
著者
iPentecのメインプログラマー
C#, ASP.NET の開発がメイン、少し前まではDelphiを愛用
最終更新日: 2024-01-06
作成日: 2013-06-10