正确写法是<meta http-equiv="refresh" content="秒数">刷新当前页或content="秒数;url=目标地址">跳转，需严格遵循格式、同源URL、置于<head>靠前位置，现代浏览器中易被拦截，推荐JS替代方案。
直接在 <head> 里写一行 <meta http-equiv="refresh" content="秒数"> 就能设置自动刷新间隔，比如 content="10" 表示每 10 秒刷新当前页。
但这个标签看似简单，实际用错就失效，尤其在现代浏览器中容易被拦截或行为异常。关键不是“怎么写”，而是“怎么写对”。
必须严格遵守的 content 格式规则
- 只刷新当前页：
content="5"（纯数字，不能带空格、分号、单位） - 跳转到其他页面：
content="5;url=/dashboard"（分号后建议加空格，但部分旧浏览器要求紧贴；url=后不能有空格） - 错误写法示例：
"5 ; url=/dashboard"、"5,url=/dashboard"、"5; URL=/dashboard"——这些在 Safari 移动端 PWA 或 IE 中可能完全不生效
URL 路径和编码必须准确
- 相对路径以 HTML 文件所在目录为基准，不是当前 URL：
- 若
index.html在/app/index.html，写url=./about.html→ 解析为/app/about.html - 写
url=/about.html→ 解析为站点根目录/about.html
- 若
- 中文、空格、特殊符号必须 URL 编码：
- ❌
url=/search?q=你好 world - ✅
url=/search%3Fq%3D%E4%BD%A0%E5%A5%BD%20world
- ❌
浏览器限制和静默行为要提前知道
- Chrome 110+ 和 Firefox 对无用户交互的页面（没点过、没输过）会静默忽略
content="2;url=..."类跳转 -
content="0"或< 1的值在 Firefox 中会被自动提升为 1 秒，在 Chrome 中可能触发延迟约 100ms，还易导致白屏或重定向循环 - 页面在后台标签页时，短间隔刷新（如
< 3 秒）大概率被跳过，不报错也不执行
不推荐单独依赖 meta refresh 的真实原因
- 它从 HTML 开始解析就启动计时，不管 DOM 是否加载完、用户是否正在填表单
- 刷新会销毁整个页面状态：SPA 路由丢失、滚动位置归零、未提交表单清空、WebSocket 连接中断
- 搜索引擎可能降权，且无法被 DevTools 网络面板捕获，调试困难
- Chrome 95+ 已禁用含该标签页面的 bfcache（后退缓存），点「返回」可能出现白屏
真正需要上线时，建议用「meta + JS」双保险：
-
<head>中放兜底<meta http-equiv="refresh" content="30; url=/login">（JS 失效时仍能跳） -
<body>底部加轻量 JS：<script> setTimeout(() => window.location.replace('/login'), 30000); document.addEventListener('visibilitychange', () => { if (document.hidden) clearTimeout(this.timeoutId); }); </script>这样既兼容无 JS 环境，又能响应用户行为、避免后台误跳。
立即学习“前端免费学习笔记（深入）”；
