Today I saw a tweet by the FrontEnd Dude, and it was a real gem.
How often did you build a page that had to refresh itself after a given amount of time? Yeah, okay... maybe not that often, but I went for a JavaScript solution when I did.
It turns out that the web has built-in "refresh functionality"!
The refresh
HTTP response header tells the browser to refresh a page after a defined time.
HTTP/1.x 200 OK
...
Refresh: 10
You define the time interval in seconds and can even lead the user to a different URL after the time passed.
HTTP/1.x 200 OK
...
Refresh: 10;url=https://example.com
HTTP headers and the meta
element
If you can't (or don't want to) set HTTP headers in your environment, you can use a meta
element, too. The http-equiv
attribute allows to define values that are define via HTTP headers like content-security-policy
, content-type
, default-style
, x-ua-compatible
and refresh
right in your HTML.
<!-- refresh page after 60 seconds -->
<meta http-equiv="Refresh" content="60">
<!-- refresh and redirect to https://example.com after 60 seconds -->
<meta http-equiv="Refresh" content="60;https://example.com">
If you want to learn more about the refresh
header and meta element, I recommend giving Daniel Steinberg's article (the maintainer of curl
) a read. His post includes the mind-boggling statistic that 4% of page loads include the refresh meta element. Wow!
Top comments (1)
Thanks :)