首頁 > 文章 > web前端 > 如何定時自動刷新網頁？

如何定時自動刷新網頁？

王林轉載: 2023-09-04 11:21:063167瀏覽

如何定時自動刷新網頁？

我們可以透過使用「http-equiv」屬性的「meta」標籤，或是使用setInterval()瀏覽器API來自動刷新網頁。自動刷新網站有一定的用例，例如，在創建天氣查找 Web 應用程式時，我們可能希望在設定的時間間隔後刷新我們的網站，以便向用戶顯示某個位置近乎準確的天氣資料。

讓我們看看下面的兩種方法，了解如何設定自動刷新網站。

方法1

在這個方法中，我們將使用「meta」標籤的「http-equiv」屬性在「content」屬性中傳遞的特定時間間隔後刷新我們的Web應用程式. HTML5規範中預設為我們提供了meta標籤。

語法

<meta http-equiv="refresh" content="n">

這裡的「n」為正整數，表示刷新頁面的秒數。

範例

在此範例中，我們將使用「meta」標記的「http-equiv」屬性每 2 秒刷新一次我們的 Web 應用程式。

<!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。

語法

setInterval(callback_fn, time_in_ms)

「setInterval()」有2個參數，第一個是延遲後觸發的回呼函數，第二個是以毫秒為單位提供的延遲。

範例

在此範例中，我們將使用「setInterval()」瀏覽器 API 每 2 秒刷新一次我們的 Web 應用程式。

<!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(&#39;page loaded!&#39;);
         setInterval(() => {
            window.location = window.location.href;
         }, 2000)
      }
   </script>
</body>
</html>

結論

在本文中，我們學習如何使用 HTML5 和 JavaScript 兩種不同的方法在固定時間後自動刷新我們的 Web 應用程式。在第一種方法中，我們使用「meta」標籤的「http-equiv」屬性，在第二種方法中，我們使用「setInterval」瀏覽器API。

以上是如何定時自動刷新網頁？的詳細內容。更多資訊請關注PHP中文網其他相關文章！

JavaScript html5 回调函数 http

陳述：

本文轉載於：tutorialspoint.com。如有侵權，請聯絡admin@php.cn刪除

上一篇：如何指定應禁用輸入元素？下一篇：如何指定應禁用輸入元素？

看更多