JavaScript代码实现页面跳转的几种实用方法

在日常浏览网页时，你可能遇到过点击按钮后自动跳转到另一个页面的情况。比如登录成功后自动进入个人中心，或者倒计时结束后跳转到活动页。这些效果很多都是通过 ref="/tag/137/" style="color:#B2A89E;font-weight:bold;">JavaScript 实现的，而不是简单的链接跳转。

使用 location.href 跳转页面

最常见的方式是修改 window.location.href 的值。这种方式就像手动在浏览器地址栏输入新网址一样自然。

document.getElementById('btn').onclick = function() {
    window.location.href = 'https://www.example.com';
};

上面这段代码的意思是：当用户点击 ID 为 btn 的按钮时，页面就会跳转到指定网址。

用 assign 方法加载新页面

除了直接改 href，还可以调用 location.assign() 方法，效果基本一样，但写法更清晰一点。

function goToPage() {
    window.location.assign('/dashboard.html');
}

这个方法的好处是语义明确，一看就知道是要“分配”一个新页面。

替换当前页面不留下历史记录

有时候你不希望用户点“返回”键又回到原页面，比如登出后跳转到登录页。这时候可以用 replace() 方法。

window.location.replace('login.html');

这样跳转后，浏览器历史中就不会保留原来的页面，用户无法通过返回按钮回到上一页。

定时跳转的实现方式

像一些提示页，显示“3秒后自动跳转”，就是用了 setTimeout 配合跳转代码。

setTimeout(function() {
    window.location.href = 'home.html';
}, 3000);

这里的 3000 表示等待 3000 毫秒（即 3 秒）后执行跳转。

打开新窗口跳转

如果不想在当前页面跳转，而是想弹出一个新窗口，可以使用 window.open()。

window.open('https://www.example.com', '_blank');

第二个参数 '_blank' 表示在新标签页中打开，这也是模拟超链接 target="_blank" 的行为。

这些方法各有用途，选择哪一种取决于具体场景。比如表单提交后跳转用 href 或 assign 就行；登出操作更适合 replace；广告引导则常用 open 打开新页。掌握这些小技巧，做网页交互会更得心应手。