プログラミング勉強日記
2020年11月2日
HTMLとJavaScriptのそれぞれのブラウザの自動リロードの方法をまとめる。
HTMLのみを使った自動リロード
metaタグではhttp-equiv="refresh"を定義することで指定秒後にページを自動リロードすることができる。このとき、`content="リロードさせるまでの秒数"を数字で指定する。
サンプルコード
<html>
<head>
<title>サンプルコード</title>
<meta http-equiv="refresh" content="2;url=jikko1.html">
</head>
<body>
<font>最初のページ。２秒後に移動する。</font>
</body>
</html>
この場合、ヘッダー情報としてheadタグの後に置く通常のmetaタグとは違って、例外的にHTMLファイルの冒頭に置くことになり、htmlタグやheadタグなどの構造は省略される。
content="秒数；URL=移動先"で他ページを表示することもできる。(このときは構造タグは省略されない)
違うページにリロード
<html>
<head>
<meta http-equiv=”Refresh” content=”2;URL=https://qiita.com/mzmz__02”>
<title>デザイナーズ プロジェクト [DSPT]</title>
</head>
<body>
<font>最初のページ。２秒後に違うページに移動する。</font>
</body>
</html>
JavaScriptを使った自動リロード
setTimeout()とlocation.reload()を利用することで間隔でブラウザをリロードできる。
サンプルコード
setTimeout(function () {
location.reload();
}, 2000);
参考文献
３章 リンク ８．ページを自動的に移動させる
ブラウザを自動的にリロードするいくつかの方法
指定時間になったら自動でページをリロード（更新）・読み込む