最轻量方案是meta http-equiv="refresh"，content值为“秒数;url=地址”，如“3;url=/”；js方案用settimeout+window.location.href更灵活，支持条件判断、清理操作和精确时间点跳转。
用 meta http-equiv="refresh" 实现定时跳转
这是最轻量、无需 JavaScript 的方案，适合静态页面或对 JS 有兼容性顾虑的场景。浏览器原生支持，所有现代浏览器都认。
关键在于 meta 标签的 content 属性：前半部分是秒数（支持小数），后半部分是跳转地址，用分号隔开。
- 3 秒后跳到首页：
<meta http-equiv="refresh" content="3;url=/"> - 5.5 秒后跳到外部链接：
<meta http-equiv="refresh" content="5.5;url=https://example.com"> - 0 秒即刻跳转（常用于 URL 重定向页）：
<meta http-equiv="refresh" content="0;url=/new-page.html">
注意：content 中不能加空格（如 "3 ; url=/" 会失效），也不能漏掉 url= 前缀。
setTimeout + window.location.href 更灵活控制
当需要判断条件、延迟逻辑、或跳转前执行清理操作（比如关闭弹窗、上报埋点）时，JS 方案更可靠。
核心是用 setTimeout 设定延时，再赋值 window.location.href 触发跳转：
<script>
setTimeout(() => {
window.location.href = '/dashboard';
}, 4000); // 4000 毫秒 = 4 秒
</script>
常见坑：
- 脚本放在
里但没加defer，可能因 DOM 未就绪导致报错（虽然跳转本身不受影响） - 用户手动刷新或前进/后退时，
setTimeout不会自动清除，可能在不该触发时跳转 —— 如果页面有交互逻辑，建议加clearTimeout配合事件监听 - 想跳转到新标签页？改用
window.open('https://xxx', '_blank')，但注意多数浏览器会拦截非用户手势触发的弹窗
按具体时间点跳转（比如每天 22:00 跳转）
单纯“几秒后”不够用，得靠 JS 计算当前时间与目标时间的毫秒差。
例如：每天晚上 10 点跳转到维护页：
<script>
function scheduleDailyRedirect() {
const now = new Date();
const target = new Date();
target.setHours(22, 0, 0, 0); // 22:00:00.000
if (now > target) target.setDate(target.getDate() + 1);
<p>const delay = target - now;
setTimeout(() => {
window.location.href = '/maintenance.html';
}, delay);
}
scheduleDailyRedirect();
</script>
要点：
- 必须用
target - now计算毫秒差，不能直接写死setTimeout(..., 86400000)，否则跨天不准 - 服务器时间 ≠ 用户本地时间，这个方案依赖用户设备时钟准确；若需强一致性，得由后端返回目标时间戳
- 页面长期不刷新（比如单页应用停留一整天），需要额外轮询或用
setInterval重新校准，否则只执行一次
跳转前提示用户并允许取消
强制跳转体验差，尤其在表单未保存时。加个倒计时提示 + 取消按钮更稳妥。
示例结构：
<div id="redirect-banner" style="display:none; background:#fff; padding:12px; border:1px solid #ccc;"> 页面将在 <span id="countdown">5</span> 秒后跳转。 <button onclick="cancelRedirect()">取消跳转</button> </div>
配合 JS 控制：
- 用
let redirectTimer存储setTimeout返回值，便于clearTimeout - 倒计时用
setInterval更新<span></span>文本，别用递归setTimeout否则难以同步取消 - 用户点击取消后，除了清除定时器，最好也隐藏 banner 并重置状态变量，避免重复调用出错
这种交互式跳转，meta refresh 完全做不到，只能靠 JS。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
