content="数字"

直接写 content="数字" 就行,但必须确保格式无空格、无多余字符,否则 Chrome/Firefox 可能静默忽略。
content 值必须是纯数字,不能带单位或空格
浏览器对 content 的解析是严格字符串匹配,不宽容:
-
content="5"→ 每 5 秒重载当前页(合法) -
content="5s"或content="5 seconds"→ 完全无效,Chrome 直接跳过 -
content="5;url="(分号后没内容)→ 部分 Safari 版本会白屏,Firefox 可能报错 -
content="5 ; url=/login"(分号后有空格)→ 在 iOS Safari PWA 和旧版 IE 中常失效
小于 1 秒的值会被浏览器强制提升
这不是 bug,而是所有主流浏览器的统一策略,防止高频请求打垮服务端或耗尽用户流量:
-
content="0.5"→ Firefox 自动升为1,Chrome 110+ 升为1并可能后台静默丢弃 -
content="0"→ 不代表“立即”,而是“页面加载完成后立刻跳转”,但若无用户交互(如未点击过页面),Chrome 会打印Refresh: Ignored because the page is not visible or has no user activation. - 实际最小可靠间隔建议 ≥ 3 秒;WCAG 2.2 要求无障碍场景下不得短于 7 秒
刷新间隔 ≠ 请求间隔,缓存会干扰真实行为
写 content="10" 并不保证每 10 秒都发新请求——如果响应头含 Cache-Control: public, max-age=300,浏览器可能直接从内存或磁盘缓存取页,导致“刷新”毫无变化:
- 必须配合
<meta http-equiv="cache-control" content="no-cache">或服务端返回Cache-Control: no-store - 仅靠
no-cache不够:它允许缓存但强制校验,仍可能返回304 Not Modified,页面视觉无变化 - 真要确保每次都是全新响应,服务端需设
Cache-Control: no-store, must-revalidate
多个 meta 标签只生效第一个,且无法动态修改
HTML 解析是单向的,<meta http-equiv="refresh"> 一旦被 parser 读到,后续同类型标签全被忽略:
- 写两个:
<meta http-equiv="refresh" content="5">+<meta http-equiv="refresh" content="30">→ 只有 5 秒那个起作用 - 想“用户点按钮后延长到 60 秒”?做不到。JS 可以删掉旧标签再插入新标签,但部分浏览器(如 Safari)对动态插入的
refresh元素支持不稳定 - 更稳妥的做法:初始不写 meta,用 JS 启动
setTimeout(() => location.reload(), 5000),并把 timer ID 挂在window上供后续 clearTimeout
真正难的不是写对那行 <meta http-equiv="refresh" content="X">,而是判断“这个页面是否真的适合被整页重载”——表单正在输入、视频正在播放、WebSocket 正在收消息,这些状态都会在 reload 瞬间归零。别让一个看似简单的数字,变成用户丢失数据的起点。











