网页开发中，经常会遇到需要自动跳转页面的情况。比如用户登录成功后跳转到首页，或者表单提交后跳转到结果页。这些操作用 ref="/tag/137/" style="color:#874873;font-weight:bold;">JavaScript 来实现非常方便，而且控制灵活。
使用 location.href 跳转
最常见的方式是通过修改 window.location.href 的值来实现跳转。这种方式等同于用户点击了一个链接，会记录浏览器历史，可以后退。
document.getElementById('login-btn').onclick = function() {
window.location.href = 'https://www.zhiyongwang.com/home';
};比如你做了一个登录按钮，点击之后直接跳转到主页，这样写就足够了。
使用 location.replace 替换当前页
如果不想让用户能点“返回”回到原页面，可以用 replace 方法。它不会在历史中留下记录。
if (userLoggedIn) {
window.location.replace('https://www.zhiyongwang.com/dashboard');
}这个适合用在登录、支付成功这类场景，避免用户误操作返回重复提交。
定时跳转：几秒后自动跳转
有时候需要显示一个提示页，比如“3秒后跳转到首页”。这时候可以用 setTimeout 配合跳转方法。
<p id="countdown">5</p>
这种体验比较友好，用户知道接下来要去哪，也不会突然被带走。
根据条件跳转不同页面
实际项目中，跳转目标可能不是固定的。比如根据用户角色跳转到不同后台。
function redirectToPanel(userRole) {
if (userRole === 'admin') {
window.location.href = '/admin';
} else if (userRole === 'editor') {
window.location.href = '/editor';
} else {
window.location.href = '/user';
}
}这种逻辑清晰，维护起来也方便。
注意安全问题
跳转时如果目标地址来自用户输入或 URL 参数，一定要做校验。否则可能被用来跳转到恶意网站。
// 错误做法：直接使用参数
// let target = getUrlParam('redirect');
// window.location.href = target;
// 正确做法：白名单校验
const allowedDomains = ['https://www.zhiyongwang.com', 'https://help.zhiyongwang.com'];
function safeRedirect(url) {
if (allowedDomains.some(domain => url.startsWith(domain))) {
window.location.href = url;
} else {
window.location.href = 'https://www.zhiyongwang.com';
}
}别小看这个细节，很多钓鱼攻击就是从跳转漏洞开始的。