JavaScript中用BOM定时器实现页面延时跳转，核心是setTimeout()配合location.href或location.replace()，支持同域/相对路径跳转，可加取消机制，需注意跨域安全限制。
JavaScript 中用 BOM 的定时器实现页面延时跳转，核心是结合 setTimeout() 和 window.location（或 location.href）完成跳转逻辑。
使用 setTimeout 配合 location.href
这是最常用、最直接的方式：设置一个延迟，到期后修改当前页面的 URL，触发跳转。
- 跳转到同域下的其他页面：
location.href = "https://example.com/page.html"; - 跳转到相对路径：
location.href = "/dashboard"; - 跳转到首页（根路径）：
location.href = "/";
示例：3 秒后跳转到百度首页
setTimeout(() => {
location.href = "https://www.baidu.com";
}, 3000);
用 location.replace() 替代 href 避免后退
如果不想让用户点「返回」回到当前页（比如登录成功跳转），推荐用 location.replace()。它会用目标页面替换当前历史记录，不留下跳转前的入口。
立即学习“Java免费学习笔记（深入）”；
deep-java-review
下载
Java项目代码review工具。分析Git变更+完整调用链路上下文，推断业务需求，进行多维度评分和分类汇总，生成完整PRD文档。包含细粒度Java代码审查清单（Null安全、异常处理、Streams、并发、equals/hashCode、资源管理、API设计、性能、MyBatis/ORM、事务边界、SQL/DD...
-
location.replace("https://example.com/success")—— 不可后退到原页面 - 和
href一样支持绝对/相对路径
示例：2.5 秒后无痕跳转
setTimeout(() => {
location.replace("/success.html");
}, 2500);
跳转前加提示或取消机制
用户可能想中断跳转（比如倒计时提示“X秒后跳转，点击取消”），这时需要保存定时器 ID 并提供清除方法。
- 用
let timerId = setTimeout(...)保存句柄 - 调用
clearTimeout(timerId)可随时取消 - 适合配合按钮、倒计时文案、弹窗等交互场景
示例：带取消功能的 5 秒跳转
const timerId = setTimeout(() => {
location.href = "/next-page";
}, 5000);
// 某个按钮点击时取消跳转
document.getElementById("cancelBtn").addEventListener("click", () => {
clearTimeout(timerId);
});
注意跨域与安全限制
跳转本身不受同源策略限制（可跳任意 URL），但以下情况需留意：
- 若目标页面设置了
X-Frame-Options或Content-Security-Policy，可能无法在 iframe 中打开 - 某些浏览器对自动跳转有干预（如弹出拦截、导航提示），尤其在非用户手势触发时（如页面加载后立即跳转）
- 移动端部分 WebView 对
setTimeout+ 跳转响应较慢，建议延迟不少于 100ms
不复杂但容易忽略
