window.location.href 是 JavaScript 中用来获取或设置浏览器当前页面的 URL（地址）的属性。它属于 window.location 对象的一部分。

基本用途：

  1. 获取当前页面的 URL：
    当你访问 window.location.href 时，它会返回浏览器当前的 URL。console.log(window.location.href); // 输出当前页面的 URL 例如，如果当前页面的 URL 是 https://www.example.com/index.html，那么 window.location.href 的返回值将是 "https://www.example.com/index.html"。
  2. 设置页面的 URL：
    当你为 window.location.href 赋值时，它会改变浏览器的地址栏并加载新的页面。window.location.href = 'https://www.example.com'; // 跳转到新的页面 在上面的例子中，页面会跳转到 "https://www.example.com"。

常见的操作：

1. 跳转到新的页面

window.location.href = 'https://www.example.com';

这将使浏览器跳转到 "https://www.example.com"，类似于用户在地址栏中输入一个新的 URL。

2. 重新加载当前页面

window.location.href = window.location.href;

这将导致页面重新加载，相当于按下浏览器的刷新按钮。

3. 跳转到页面的锚点（Hash）

如果你想跳转到页面的某个锚点（例如，<a id="section1">），可以通过修改 URL 中的 # 部分：

window.location.href = '#section1';  // 跳转到页面中的 section1

4. 获取当前 URL 的各个部分

window.location 对象不仅可以通过 href 访问整个 URL，还提供了很多其他属性，允许你获取 URL 的不同部分：

  • window.location.protocol：协议部分（例如，http: 或 https:）
  • window.location.hostname：主机名部分（例如，www.example.com）
  • window.location.port：端口号（如果有的话）
  • window.location.pathname：路径部分（例如，/index.html）
  • window.location.search：查询字符串（例如，?q=search）
  • window.location.hash：URL 的锚点部分（例如，#section1）

例如：

console.log(window.location.protocol);  // https:
console.log(window.location.hostname);  // www.example.com
console.log(window.location.pathname);  // /index.html
console.log(window.location.search);    // ?q=search
console.log(window.location.hash);      // #section1

5. 重定向到一个新页面并替换历史记录

如果你想重定向到一个新的页面并替换当前的浏览历史记录（即不允许用户点击浏览器的“返回”按钮回到前一个页面），可以使用 window.location.replace()：

window.location.replace('https://www.example.com');

这个方法会将当前页面替换为新的页面，而不会保留原页面在浏览历史中的记录。

6. 打开新页面而不影响当前页面

如果你希望打开一个新的页面，但不影响当前页面的加载（类似于在新标签页打开链接），可以使用 window.location.href 或者 window.open()：

// 在当前页面跳转
window.location.href = 'https://www.example.com';  // 当前页跳转

// 在新标签页打开链接
window.open('https://www.example.com', '_blank');  // 新标签页打开

总结：

  • window.location.href 用于获取和设置浏览器当前的 URL。
  • 可以通过设置 window.location.href 来实现页面跳转。
  • 通过 window.location.replace() 可以实现不保留历史记录的跳转。
  • 通过 window.open() 可以在新标签页打开新页面。

如果你有其他关于 window.location 的问题，或想了解更详细的用法，随时告诉我！