JavaScript实现网页跳转，实现核心就一句话：window.location.href = '目标地址'。网页这行代码几乎出现在每一个需要页面切换的跳转场景里，但它的实现使用方式远比看上去复杂。

我见过不少新手把跳转写成window.location = 'xxx'，网页这其实也行。跳转但更隐蔽的实现坑在异步环境里。比如你从后端拿数据，网页然后根据返回值决定跳转方向：

fetch('/api/check') .then(res => res.json()) .then(data => {  if (data.valid) {  window.location.href = '/dashboard'; } else {  window.location.replace('/login'); } }); 

这里有个细节——location.href会往浏览器历史记录里塞一条新记录，跳转用户点返回键还能回到当前页。实现location.replace()则直接替换当前记录，网页返回键失效。跳转登录页跳转用replace更合理，实现防止用户退回表单页造成重复提交。网页

还有种情况容易被忽略：表单提交后的跳转跳转。你写了onsubmit处理函数，里面做了跳转，但表单本身的action属性可能又触发一次导航。解决方法是先event.preventDefault()，再手动控制跳转。我调试过线上项目，用户反馈"点了按钮没反应"，最后发现是跳转执行了，但紧接着表单默认行为又把页面刷新回原样。

跳转时机也讲究。页面加载完立刻跳转，用window.onload不够快，因为要等所有图片资源。直接在<head>里放script标签执行跳转，能省几百毫秒。但这样有个副作用——如果目标页面加载失败，用户会看到白屏。稳妥做法是加个超时提示：

setTimeout(() => {  window.location.href = 'https://example.com'; }, 3000); 

这相当于给用户3秒时间阅读"即将跳转"的说明文字。有些广告跳转就是这么做的，虽然体验一般，但至少不会让人莫名其妙。

移动端有个特殊场景：微信内置浏览器。有些链接在微信里打开，你想跳转到外部浏览器，直接改location没用。需要借助WeixinJSBridge或者提示用户右上角打开。这不是纯JS能解决的，但很多业务需求偏偏卡在这。我遇到过活动页要跳转App Store，安卓用户直接下载APK，iOS用户只能引导到Safari——代码里得写两套逻辑判断。

再说说安全。跳转URL如果来自用户输入，必须做白名单校验。我之前接手过一个后台管理系统，搜索框跳转没做过滤，被人拼了个javascript:alert(document.cookie)，所有管理员账号密码全暴露了。现在写跳转，我习惯先检查协议：

function safeRedirect(url) {  const allowed = ['https:', 'http:']; const protocol = new URL(url, window.location.origin).protocol; if (allowed.includes(protocol)) {  window.location.href = url; } } 

这代码看着啰嗦，但能挡掉九成的XSS攻击。

最后提个冷门API——location.assign()。它和href赋值几乎等价，但有个区别：assign()可以配合history.pushState()做无刷新路由切换。单页应用里，你不想整页刷新，但又想改变URL——用history.pushState()改地址，再用location.reload()强制刷新？不，那是老办法。现代框架的路由库内部都是这么干的，只是封装好了而已。

跳转这事儿，说简单是给location赋值，说复杂能牵扯到浏览器机制、安全策略、用户体验。下次写跳转前，先问自己三个问题：需要保留历史记录吗？用户能接受延迟吗？URL来源可信吗？想清楚再动手，比背下所有API都管用。