This content originally appeared on Stefan Judis Web Development and was authored by Stefan Judis
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
HTTP headers and the meta
element
Section titled 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!
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
This content originally appeared on Stefan Judis Web Development and was authored by Stefan Judis
Stefan Judis | Sciencx (2020-12-24T23:00:00+00:00) How to refresh a page in an interval (without JavaScript) (#tilPost). Retrieved from https://www.scien.cx/2020/12/24/how-to-refresh-a-page-in-an-interval-without-javascript-tilpost/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.