网页跳转window.location

indow.location 是 JavaScript 中用于获取和操作当前页面 URL 的对象。它提供了丰富的属性和方法，允许开发者读取 URL 的各个部分，或者导航到新的页面。以下是关于 window.location 的详细说明：

---

一、常用属性

window.location 的属性用于获取或设置 URL 的特定部分：

属性	描述	示例
href	完整的 URL（可读写）	https://www.example.com/path?query=1#hash
protocol	协议（如 http: 或 https:）	https:
host	主机名和端口号（如 www.example.com:8080）	www.example.com:8080
hostname	主机名（不包括端口号）	www.example.com
port	端口号（默认端口如 80 或 443 会被忽略）	8080
pathname	路径部分（以 / 开头）	/path/to/page
search	查询字符串（以 ? 开头，不包含 ?）	query=string
hash	锚点（以 # 开头，不包含 #）	section1
origin	URL 的源（协议 + 主机名 + 端口，只读）	https://www.example.com

示例代码

// 获取当前 URL 的各个部分
console.log(window.location.href);      // https://www.example.com/path?query=1#hash
console.log(window.location.protocol);  // https:
console.log(window.location.host);      // www.example.com:8080
console.log(window.location.hostname);  // www.example.com
console.log(window.location.port);      // 8080
console.log(window.location.pathname);  // /path
console.log(window.location.search);    // ?query=1
console.log(window.location.hash);      // #hash
console.log(window.location.origin);    // https://www.example.com

---

二、常用方法

window.location 提供了以下方法用于页面导航或刷新：

方法	描述	示例
assign(url)	加载新的 URL（添加到历史记录）	window.location.assign("https://www.new.com");
replace(url)	用新 URL 替换当前页面（不添加历史记录）	window.location.replace("https://www.new.com");
reload()	重新加载当前页面	window.location.reload();
toString()	返回完整的 URL 字符串（等同于 href）	console.log(window.location.toString());

示例代码

// 跳转到新页面（添加历史记录）
window.location.assign("https://www.example.com");

// 替换当前页面（不添加历史记录）
window.location.replace("https://www.example.com");

// 刷新当前页面
window.location.reload();

// 修改 URL 的路径部分
window.location.pathname = "/new-path";

// 修改查询参数
window.location.search = "?new-query=1";

---

三、修改 URL 的部分属性

通过修改 window.location 的属性，可以动态改变当前页面的 URL，例如：

// 修改路径
window.location.pathname = "/new-page";

// 添加查询参数
window.location.search = "?id=123";

// 设置锚点
window.location.hash = "#section2";

// 修改端口
window.location.port = "8080";

⚠️ 注意：origin 属性是只读的，不能直接修改。如果需要修改协议、主机名或端口，需通过 assign()、replace() 或直接设置 href。

---

四、常见使用场景

1. 页面跳转

• 直接赋值 href：

  window.location.href = "https://www.new.com";

• 使用 assign()：

  window.location.assign("https://www.new.com");

2. 刷新页面

// 强制刷新（从服务器重新加载）
window.location.reload(true);

3. 获取 URL 参数

// 获取查询参数
const params = new URLSearchParams(window.location.search);
const id = params.get("id"); // 从 ?id=123 中提取 123

4. 锚点导航

// 跳转到页面内的锚点
window.location.hash = "#section3";

---

五、注意事项与常见问题

1. 安全限制

• 同源策略：通过 location.href 或 assign() 跳转到其他域名时，需确保目标域名符合浏览器的安全策略（如 HTTPS 页面不能跳转到 HTTP 页面，除非目标页面明确允许）。
• 跨域跳转被拦截：某些浏览器（如 360 浏览器）可能因安全策略对跨域跳转进行编码或拦截，导致跳转失败。

2. 脚本执行时机

• 页面未加载完成时跳转：如果在页面未完全加载时修改 window.location.href，可能导致跳转失败。建议在 DOMContentLoaded 事件后执行：

  window.addEventListener("DOMContentLoaded", () => {
    window.location.href = "https://www.new.com";
  });

3. 编码问题

• URL 编码：某些浏览器可能对跳转的 URL 自动编码，导致跳转失败。可通过 decodeURIComponent() 解码：

  window.location.href = decodeURIComponent("https://www.new.com/encoded-path");

4. 历史记录

• assign() vs replace()：
  • assign()：跳转后会在浏览器历史记录中添加新条目（用户可点击“返回”按钮）。
  • replace()：跳转后不会添加历史记录（用户无法返回到原页面）。

---

六、总结

window.location 是 JavaScript 中操作 URL 的核心对象，适用于页面导航、参数解析、动态修改地址等场景。合理使用其属性和方法可以简化前端开发，但需注意浏览器兼容性、安全策略和执行时机等问题。