How to refresh a page in an interval (without JavaScript)
- Published at
- Updated at
- Reading time
- 2min
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. To refresh a page after five minutes, define 300
. If desired you can even lead the user to a different URL after the time passed.
HTTP/1.x 200 OK
...
Refresh: 10;url=https://example.com
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!
Edit: But before using this feature, make sure that an automatic refresh is not making content inaccessible. Julie Moynat pointed out, that it's best to provide a way to disable automatic refreshing. Have a look at the WCAG document "Failure of Success Criterion 2.2.1, 2.2.4, and 3.2.5 due to using meta refresh to reload the page" to learn more.
Join 5.4k readers and learn something new every week with Web Weekly.