用 window.location.href 跳转最直接,立即导航、保留历史;需确保用户手势触发、避免异步调用,优先用绝对url;replace()可替换当前记录,表单提交应优先用原生action。

用 window.location.href 跳转最直接
绝大多数场景下,改写 window.location.href 就是你要的跳转。它会立即导航到新 URL,保留浏览器历史,支持前进/后退。
常见错误现象:写了 window.location.href = "xxx" 却没反应——大概率是脚本执行时机不对(比如 DOM 还没加载完就运行),或被浏览器拦截(比如在非用户手势触发的异步回调里调用)。
- 确保在用户点击、表单提交等明确交互后调用
- 不要在
setTimeout或 Promise resolve 后直接跳转,除非上下文明确由用户动作触发 - 路径写绝对 URL 更稳妥,比如
"https://example.com/page";相对路径如"./about.html"依赖当前页面 URL 结构,容易出错
window.location.replace() 不留返回记录
想跳转后用户点“返回”不回到原页,就用 window.location.replace()。它用新页面替换当前 history 条目,不是新增一条。
使用场景:登录成功后跳首页、表单提交后跳结果页、防止用户重复提交。
立即学习“前端免费学习笔记(深入)”;
- 和
href写法一样,传字符串即可:window.location.replace("success.html") - 不会触发
beforeunload事件,所以别指望靠它弹提示“你有未保存内容” - 服务端重定向(HTTP 302)效果类似,但这是前端控制,无需发请求
表单提交本身就是跳转,别绕路写 JS
如果跳转由表单驱动,优先用原生 <form action="xxx"></form>,而不是监听 submit 事件再手动 location.href。
原因很实在:少写 JS、兼容性好、支持 Ctrl+Enter 提交、移动端键盘“前往”按钮能正确响应。
- 需要带参数?用
<input type="hidden">,比拼接 URL 字符串安全 - 要 POST 跳转?
method="POST"+action就够,不用 fetch + redirect - 想阻止默认行为?只在真有必要时加
event.preventDefault(),比如要做校验或发 API
注意移动端 WebView 和 iframe 的限制
在微信内置浏览器、某些 App 的 WebView 里,window.location 跳转可能被拦截或静默失败;iframe 里跳转还可能被拒绝(X-Frame-Options 或 Content-Security-Policy 限制)。
容易踩的坑:本地开发时一切正常,一放到微信里就卡住——其实是跳转被拦了,控制台也不报错。
- 跳转前加个简单判断:
if (window.top === window.self),避免 iframe 内误跳 - 微信中跳外链必须走
JS-SDK的openLocation或白名单配置,普通href无效 - 不确定环境时,跳转后加个降级提示:
setTimeout(() => { alert("跳转失败,请手动访问…"); }, 1500)










