ノート
訪問者数 1074      最終更新 2009-12-22 (火) 12:18:59

Webブラウザで、画面を定期更新する方法

自動リロード機能のあるブラウザ

HTMLのrefresh機能を使う
  例として

<html>
<head>
<meta http-equiv="Refresh" content="15">
<title>☆☆☆</title>
</head>
<body>
<iframe src="http://www.yahoo.co.jp/" height=100% width=100%></iframe>
</body>
</html>

JavaScriptでタイマーを使う 「Ajaxとタイマーを組み合わせると定期的にニュース情報を取得しページを更新することもできます」 や アニメーションGIFもどき
  最初の例

<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>Get Yahoo! NEWS</title>
<link rel="stylesheet" href="main.css" type="text/css" media="all">
<script type="text/javascript" src="xmlhttp.js"></script>
<script type="text/javascript"><!--
function getYNews()
{
 httpObj = createXMLHttpRequest(displayData);
 if (httpObj)
 {
  httpObj.open("GET","curl.rb?"+(new Date()).getTime(),true);
  httpObj.send(null);
 }
}
function displayData()
{
 if ((httpObj.readyState == 4) && (httpObj.status == 200))
 {
  $("result").innerHTML = httpObj.responseText;
 }
}
function setTimer()
{
 timerID = setInterval("getYNews()",60 * 1000); // 60×1000ミリ秒 = 1分
 getYNews();
}
function clearTimer()
{
  clearInterval(timerID);
}
// --></script>
</head>
<body>
<h1>Get Yahoo! NEWS</h1>
<form method="get" name="ajaxForm" onsubmit="return false;">
<input type="button" value="Yahoo NEWS! 取得" onClick="setTimer()">
<input type="button" value="Yahoo NEWS! 更新解除" onClick="clearTimer()">
</form>
<div id="result">ボタンをクリックすると以後1分ごとにYahoo News!が表示/更新されます</div>
</body>
</html>

トップ   編集 凍結 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS
Last-modified: 2009-12-22 (火) 12:18:59 (2861d)