![]() |
ノート/Web画面の定期更新http://pepper.is.sci.toho-u.ac.jp/pepper/index.php?%A5%CE%A1%BC%A5%C8%2FWeb%B2%E8%CC%CC%A4%CE%C4%EA%B4%FC%B9%B9%BF%B7 |
![]() |
ノート
訪問者数 1568 最終更新 2009-12-22 (火) 12:18:59
自動リロード機能のあるブラウザ
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>