How to automatically refresh web pages at regular intervals?-CSS Tutorial-php.cn

How to automatically refresh web pages at regular intervals?

王林

Release： 2024-02-21 15:27:18

forward

3256 people have browsed it

How to automatically refresh web pages at regular intervals?

We can automatically refresh the web page by using the "meta" tag with the "http-equiv" attribute, or using the setInterval() browser API. There are certain use cases for automatically refreshing a website, for example, when creating a weather lookup web application, we may want to refresh our website after a set interval in order to show the user nearly accurate weather data for a certain location.

Let’s take a look at the two methods below to learn how to set up an auto-refresh website.

Method 1

In this method we will use the "http-equiv" attribute of the "meta" tag to refresh our web after a specific interval passed in the "content" attribute app. The HTML5 specification provides us with meta tags by default.

Syntax

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

Copy after login

The "n" here is a positive integer, indicating the number of seconds to refresh the page.

Example

In this example, we will use the "http-equiv" attribute of the "meta" tag to refresh our web application every 2 seconds.

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

Copy after login

Method 2

In this method, we will use the "setInterval()" API provided to us by the browser, which allows us to run a piece of code after a certain period of time, Both of these are passed as parameters to the browser API.

Syntax

setInterval(callback_fn, time_in_ms)

Copy after login

"setInterval()" has 2 parameters, the first is the callback function that is triggered after the delay, and the second is the delay provided in milliseconds.

Example

In this example, we will use the "setInterval()" browser API to refresh our web application every 2 seconds.

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

Copy after login

Conclusion

In this article, we learned how to automatically refresh our web application after a fixed time using two different methods, HTML5 and JavaScript. In the first method, we use the "http-equiv" attribute of the "meta" tag, and in the second method, we use the "setInterval" browser API.

The above is the detailed content of How to automatically refresh web pages at regular intervals?. For more information, please follow other related articles on the PHP Chinese website!