JavaScript页面跳转最直接可靠的方式是操作window.location对象:location.href赋值触发新记录跳转,location.replace()替换当前历史项,location.assign()为冗余方法;需校验URL合法性并编码参数,且跳转后代码仍可能执行。

JavaScript 中实现页面跳转,最直接可靠的方式就是操作 window.location 对象。它不是“可选方案”,而是浏览器原生支持、语义明确、兼容性极佳的核心机制。
location.href 赋值是最常用也最安全的跳转方式
直接给 location.href 赋一个新 URL 字符串,浏览器会立即导航过去,行为等同于用户点击链接。
- 支持相对路径(如
"./about.html")、绝对路径(如"/admin/list")、完整 URL(如"https://example.com") - 会触发完整的页面卸载 → 加载流程,历史记录中新增一条记录,用户可点「后退」返回
- 不会抛错,即使目标地址不存在,也会跳到 404 页面(由服务端决定)
- 注意:不要写成
window.location.href()(带括号是调用函数,会报TypeError: location.href is not a function)
location.href = "./dashboard.html"; // 或 window.location.href = "https://github.com";
location.replace() 适合不希望用户回退的场景
当你要跳转但不想在历史栈中留下当前页(比如登录成功后跳首页、表单提交后跳结果页),用 replace() 更合适。
- 它用新页面“替换”当前页面的历史记录项,用户点击浏览器后退按钮不会回到上一页
- 常用于防止重复提交、避免用户返回登录页再次操作
- 参数和
href赋值完全一致,只是语义和历史行为不同 - 注意:如果跳转失败(如跨域限制或网络问题),当前页会停留在原地,且无任何提示 —— 这是静默失败,需自行加错误兜底逻辑(如超时重试或 fallback 提示)
location.replace("/order/confirmed");
// 等价于
window.location.replace("https://shop.example/order/confirmed");
location.assign() 和 href 赋值几乎没区别,但极少用
assign() 是 href 赋值的函数式等价写法,行为完全一致:新增历史记录、可后退、触发完整加载。
立即学习“Java免费学习笔记(深入)”;
- 实际项目中几乎没人写
location.assign("..."),因为location.href = "..."更简洁直观 - MDN 明确标注它是“冗余方法”,存在只为保持接口完整性
- 唯一可能用到它的场景:动态构造跳转逻辑时统一用函数调用形式(例如封装跳转工具函数),但即便如此,内部仍推荐用赋值更稳妥
跳转前务必校验 URL 合法性,尤其拼接变量时
常见错误是把用户输入或接口数据直接拼进 URL,导致跳转失败或 XSS 漏洞。
- 不要这样写:
location.href = "/user?id=" + userId—— 若userId是"1';alert(1)//",就危险了 - URL 参数必须用
encodeURIComponent()编码:"/user?id=" + encodeURIComponent(userId) - 完整 URL 建议用
URL构造函数校验和拼接:const url = new URL("/search", window.location.origin); url.searchParams.set("q", userInput); location.href = url.toString(); - 跳转前可简单判断:
if (url.protocol === "http:" || url.protocol === "https:") { location.href = url; },避免javascript:或data:伪协议执行
真正容易被忽略的是:location 操作是同步触发但异步生效的。你在 location.href = ... 后面写的代码(比如 log、状态清理)大概率仍会执行,除非你主动用 return 或 throw 阻断。别假设跳转后 JS 就立刻停了。











