最常用的写法:location.href
window.location.href = "https://example.com"; 是最常见的 js 跳转代码。它会在浏览器历史记录中新增一条,用户点后退可以回到原页面。适合普通页面导航、表单提交后的结果页跳转。
简写 location.href = url 效果相同,window 可以省略。
不保留历史记录:location.replace
location.replace("https://example.com"); 同样完成跳转,但会替换当前历史记录。用户点后退不会回到跳转前的页面。适合登录后跳转、防止用户回退到已失效页面的场景。
新窗口打开:window.open
window.open(url, "_blank"); 在新标签页打开目标地址,原页面保持不变。注意它可能被浏览器拦截,通常要求由用户点击等交互事件触发,不能在页面加载时直接调用。
其他两种方式
location.assign(url):与location.href行为一致,语义更明确。- 修改
location本身:location = url,效果等同赋值 href,但可读性较差,不建议在团队代码中使用。
常见坑与注意事项
跳转代码放的位置
脚本要放在目标元素之后,或包裹在 DOMContentLoaded 事件里,否则可能取不到 DOM 节点导致报错。
移动端与微信环境
部分内置浏览器对 window.open 支持不一致,建议优先使用 location.href。涉及支付、授权回调的跳转,要确认目标地址已加入业务域名白名单。
SEO 角度
搜索引擎能够执行 JavaScript,但 js 跳转的收录效果不如 301/302 服务端重定向稳定。做站点迁移或权重传递时,优先使用服务端重定向;js 跳转更适合站内交互。
安全性
跳转地址若来自 URL 参数,务必做校验,避免开放重定向漏洞被用于钓鱼。不要直接把 location.search 里的值拼进跳转代码。
小结
选择哪种 js 跳转代码,关键看两点:是否需要保留浏览器历史记录,以及是否要新开窗口。普通导航用 location.href,登录后跳转用 location.replace,用户主动触发的新窗口用 window.open。涉及 SEO 的永久迁移,交给服务端重定向更稳妥。