javascript如何实现页面跳转_location对象有哪些属性？_技术教程

location.href赋值最直接安全；assign推入历史栈，replace替换当前记录；仅href可写，其他属性只读；跳转前须校验URL合法性防XSS。

页面跳转用 `location.href` 最直接，但别乱改 `location` 其他属性

JavaScript 实现页面跳转，最常用也最安全的方式就是赋值 location.href。它会立即触发导航，且兼容所有浏览器，包括旧版 IE。
不要试图通过拼接字符串手动修改 location.pathname 或 location.search 后再赋回去——这容易出错，也不保证行为一致。
location 是只读对象（大部分属性），但 href、assign、replace、reload 是可写的或可调用的。

`location.assign()` 和 `location.replace()` 有什么区别？

两者都用于跳转，关键差异在浏览器历史记录：

location.assign("https://example.com")：把新地址推入历史栈，用户点「返回」能回到当前页
location.replace("https://example.com")：用新地址替换当前历史记录项，无法返回上一页

常见误用场景：登录后跳转首页，如果用 assign，用户按返回键又回到登录页，可能触发重复提交；此时应优先选 replace。

`location` 对象的可用属性有哪些？哪些真能读，哪些改了也没用？

location 的属性反映当前 URL 的结构，全部可读，但只有 href 赋值和 assign/replace 调用才真正触发跳转。其他属性如 protocol、host、pathname 等，仅用于读取或构造 URL 字符串，直接赋值无效（现代浏览器会静默忽略，不报错）。

立即学习“Java免费学习笔记（深入）”；

典型可读属性包括：

location.href：完整 URL 字符串（可写）
location.protocol：如 "https:"（末尾带冒号）
location.host：域名+端口，如 "example.com:8080"
location.hostname：仅域名，如 "example.com"
location.port：端口号，HTTP 默认是空字符串，HTTPS 也是空字符串（除非显式指定）
location.pathname：路径部分，如 "/user/profile"
location.search：查询参数，如 "?id=123&name=test"（开头带 ?）
location.hash：锚点，如 "#section-2"（开头带 #）

注意：search 和 hash 的值包含前导符号，解析时需手动去除；port 在使用默认端口（80/443）时为空字符串，不能依赖它做端口判断。

跳转前要不要检查 URL 合法性？怎么避免空跳或 XSS？

直接用用户输入或后端传来的 URL 跳转非常危险，尤其当 URL 来自 location.search 或接口响应时。常见风险：

空字符串或 "javascript:alert(1)" 导致执行脚本
"//evil.com" 触发协议相对跳转，可能绕过 HTTPS 限制
未过滤的 data: 或 vbscript: 协议（IE）

实操建议：

跳转前用 URL 构造函数校验：

try {
  const url = new URL(target);
  if (url.protocol === "http:" || url.protocol === "https:") {
    location.href = url.toString();
  }
} catch (e) {
  console.warn("Invalid redirect URL");
}