17370845950

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 赋值的函数式等价写法，行为完全一致：新增历史记录、可后退、触发完整加载。

• 实际项目中几乎没人写 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 就立刻停了。