How to refresh a page in an interval (without JavaScript) (#tilPost)

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…

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.


Reply to Stefan
Print Share Comment Cite Upload Translate
CITATION GOES HERE CITATION GOES HERE
Select a language: