本文介绍如何使用 javascript 在网页中实现“到达指定日期后自动跳转至另一页面”的功能，重点解决日期格式错误导致重定向失效的问题，并提供健壮、可部署的完整代码示例。
本文介绍如何使用 javascript 在网页中实现“到达指定日期后自动跳转至另一页面”的功能，重点解决日期格式错误导致重定向失效的问题，并提供健壮、可部署的完整代码示例。
在前端开发中，有时需要为活动页、倒计时页或临时维护页设置“过期自动跳转”逻辑——例如：促销页面仅在 2023 年 8 月 5 日 00:00 前有效，之后自动跳转至新版首页或公告页。这看似简单，但一个细微的日期格式错误（如 2023-08-5 缺少补零）就可能导致 new Date() 解析失败，返回 Invalid Date，进而使条件判断 currentdate > dateAfter 恒为 false，重定向完全不生效。
以下是一个修复并优化后的完整实现方案：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>限时页面</title>
<script>
// ✅ 正确的 ISO 8601 格式：年-月-日（月/日必须两位，如 08 而非 8）
const redirectDate = new Date('2023-08-05T00:00:00');
// ⚠️ 安全检查：确保日期有效
if (isNaN(redirectDate.getTime())) {
console.error('重定向日期格式错误，请使用 YYYY-MM-DDTHH:mm:ss 格式');
// 可选：此处可 fallback 到默认行为（如不跳转或显示提示）
exit;
}
const now = new Date();
// ✅ 使用 getTime() 进行毫秒级精确比较（更可靠）
if (now.getTime() > redirectDate.getTime()) {
// ? 添加防循环跳转保护（避免 redirect.html 再次执行相同脚本）
if (window.location.href.indexOf('redirect.html') === -1) {
window.location.replace('redirect.html'); // 推荐使用 replace() 避免用户能回退到原页
}
}
</script>
</head>
<body>
<h1>欢迎访问限时活动页</h1>
<p>本页面将于 2023 年 8 月 5 日 00:00 后自动跳转。</p>
</body>
</html>✅ 关键要点说明：
立即学习“前端免费学习笔记（深入）”；
- 日期格式必须严格：new Date('2023-08-05T00:00:00') 中的月份和日期必须为两位数（08 而非 8），否则部分浏览器（尤其是 Safari 和旧版 IE）会解析失败，返回 Invalid Date；
- 使用 getTime() 比较：避免直接用 > 比较 Date 对象（虽多数情况可行），getTime() 返回毫秒时间戳，语义清晰且兼容性最佳；
- 优先使用 location.replace()：它用新页面替换当前页面历史记录，防止用户点击「返回」按钮重新触发跳转逻辑；
- 添加 isNaN() 校验：防御性编程，避免因配置错误导致脚本静默失败；
- 避免重复执行：通过 indexOf('redirect.html') 判断当前 URL，防止目标页误加载脚本造成无限跳转。
? 进阶建议：
- 若需支持时区敏感场景（如按北京时间而非本地时间跳转），建议使用 new Date('2023-08-05T00:00:00+08:00') 显式声明时区；
- 生产环境推荐将跳转逻辑封装为独立函数，并配合 DOMContentLoaded 或延迟执行（如 setTimeout(..., 0)），确保 DOM 就绪后再运行；
- 对于高可靠性需求（如法律公告页），建议同时在服务端（如 Nginx 或 Node.js）设置重定向规则，实现前后端双重保障。
掌握这一模式，你不仅能快速实现时间驱动的页面跳转，更能建立起对 JavaScript 日期处理与前端导航控制的扎实理解。
