ホームページ >ウェブフロントエンド >CSSチュートリアル >Web ページを定期的に自動的に更新するにはどうすればよいですか?
Web ページを定期的に自動的に更新するにはどうすればよいですか?
- 王林転載
- 2023-09-04 11:21:063258ブラウズ
「http-equiv」属性を持つ「meta」タグを使用するか、setInterval() ブラウザ API を使用することで、Web ページを自動的に更新できます。 Web サイトを自動的に更新する特定の使用例があります。たとえば、天気予報 Web アプリケーションを作成する場合、特定の場所のほぼ正確な気象データをユーザーに表示するために、一定の間隔後に Web サイトを更新する必要がある場合があります。
自動更新 Web サイトを設定する方法を学ぶために、以下の 2 つの方法を見てみましょう。
方法 1
この方法では、「meta」タグの「http-equiv」属性を使用して、「content」属性アプリに渡された特定の間隔の後に Web を更新します。 HTML5 仕様では、デフォルトでメタ タグが提供されます。
構文
<meta http-equiv="refresh" content="n">
ここでの「n」は正の整数で、ページを更新する秒数を示します。
例
この例では、「meta」タグの「http-equiv」属性を使用して、Web アプリケーションを 2 秒ごとに更新します。
<!DOCTYPE html> <html lang="en"> <head> <title>How to Automatic Refresh a web page in fixed time?</title> <meta http-equiv="refresh" content="2"> </head> <body> <h3>How to Automatic Refresh a web page in fixed time?</h3> </body> </html>
メソッド 2
このメソッドでは、ブラウザーによって提供される「setInterval()」API を使用します。これにより、一定期間後にコードを実行できます。これらは両方ともパラメータとしてブラウザ API に渡されます。
Syntax
setInterval(callback_fn, time_in_ms)
「setInterval()」には 2 つのパラメータがあり、1 つ目は遅延後にトリガーされるコールバック関数で、2 つ目はミリ秒単位で指定される遅延です。
例
この例では、「setInterval()」ブラウザ API を使用して、Web アプリケーションを 2 秒ごとに更新します。
<!DOCTYPE html>
<html lang="en">
<head>
<title>How to Automatic Refresh a web page in fixed time?</title>
</head>
<body>
<h3>How to Automatic Refresh a web page in fixed time?</h3>
<script>
window.onload = () => {
console.clear()
console.log('page loaded!');
setInterval(() => {
window.location = window.location.href;
}, 2000)
}
</script>
</body>
</html>結論
この記事では、HTML5 と JavaScript という 2 つの異なる方法を使用して、一定時間後に Web アプリケーションを自動的に更新する方法を学びました。最初の方法では、「meta」タグの「http-equiv」属性を使用し、2 番目の方法では、「setInterval」ブラウザ API を使用します。
以上がWeb ページを定期的に自動的に更新するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。