window.location.href的介绍及使用

原创已于 2024-05-11 18:01:47 修改 · 2w 阅读

33 ·

CC 4.0 BY-SA版权

文章标签：

#chrome #前端

于 2024-05-11 17:52:52 首次发布

该文章已生成可运行项目，

假如我们需要获取路径上的最后一级的路径名：

介绍：

window.location.href 是 JavaScript 中一个非常常用的属性，它用于获取或设置当前窗口或标签页的 URL。这个属性返回的是完整的 URL。

获取当前 URL

简单地使用获取当前页面的 URL：

console.log(window.location.href);
 // 输出 "https://mp.youkuaiyun.com/mp_blog/creation/editor?param=value#section"

设置新的 URL

赋值一个新的 URL 字符串，浏览器会立即跳转到那个新的页面，比如下面的跳转到谷歌了

window.location.href = "https://www.google.com"; 
// 浏览器会跳转到 Google 的主页

URL 的组成部分

一个 URL 通常由以下几个部分组成：

协议（例如 http:、https:）
域名（例如 www.example.com）
端口（可选，例如 :8080）
路径（例如 /page/subpage）
查询参数（可选，例如 ?param1=value1&param2=value2）
片段标识符（可选，例如 #section）

如果想清楚的了解，可以控制台输出这个看看：（下面有简单的讲到）
console.log(new URL(window.location.href));

解析 URL 参数

他本身不直接提供解析查询参数的功能，但你可以使用 JavaScript 来手动解析它们，可以使用 URLSearchParams 接口来解析查询字符串：

const queryParamsString = "param1=value1&param2=value2";  
const queryParams = new URLSearchParams(queryParamsString);  
  
console.log(queryParams.get('param1')); // 输出 "value1"  
console.log(queryParams.get('param2')); // 输出 "value2"

在实际中，其实你也可以使用 window.location.search（它包含从问号（?）开始的 URL 部分）中获取查询参数，而不是直接提供一个字符串。例如：

const queryParams = new URLSearchParams(window.location.search);  
console.log(queryParams.get('param1')); // 输出查询参数 param1 的值（如果有的话）

什么是片段标识符的URL？

在URL的末尾使用#符号后跟一个标识符来指定的。这个片段标识符通常用于标识文档（如HTML页面）内的某个位置，如特定的段落、标题或锚点（anchor）。

通俗的讲就是一个在当前页面的跳转到一个具体的位置，就如上面的目录点击跳转到n级标题，其实就是一个更加简便的操作

当用户点击或浏览器导航到带有片段标识符的URL时，浏览器会自动滚动到该标识符所指向的文档位置。这对于创建指向页面内特定部分的链接非常有用，而无需使用额外的导航或滚动。

例如，在HTML页面中，你点击了下面的a标签：

<a href="https://example.com/page#yourCase">跳转到 yourCase </a>

浏览器会导航到https://example.com/page页面，并自动滚动到页面上ID为yourCase的元素（如果页面上存在这样的元素）。这个ID通常是通过HTML元素的id属性来设置的，如：

<div id="yourCase">  yourCase 的内容   </div>

需要注意的是，片段标识符并不会被发送到服务器，它们只在客户端（即用户的浏览器）中使用。因此，它们不会影响服务器端的页面加载或处理。

使用new URL：

创建一个新的 URL 对象，该对象基于当前浏览器窗口的 URL（window.location.href）。这个 URL 对象提供了很多方法和属性，用于解析、查询和操作 URL。

new URL(window.location.href）

如下图所示，我们在当前页面输出了：

其实你只要知道输出的是啥就可以了，并不需要具体的去了解他

输出的部分解释：

href：完整的 URL 字符串。这和你传入 new URL() 的 window.location.href 是一样的。
protocol：URL 的协议部分，例如 "http:" 或 "https:"。
hostname：URL 的主机名，不包括端口。例如，对于 URL "https://www.example.com:8080/path"，hostname 会是 "www.example.com"。
port：URL 的端口号。如果没有明确指定端口（例如使用 HTTP 的默认 80 端口或 HTTPS 的默认 443 端口），则这个属性可能是一个空字符串。
pathname：URL 的路径部分，从 "/" 开始。例如，对于 URL "https://www.example.com/path/to/resource"，pathname 会是 "/path/to/resource"。
search：URL 的查询部分（包括 "?"），如果没有查询部分，则为空字符串。
hash：URL 的 "fragment" 部分（从 "#" 开始的部分），如果没有这部分，则为空字符串

假如我们需要获取路径上的最后一级的路径名：

这个的话我们可以设置一些条件，当我们获取到的最后一级的路径达到要求时（存在xx时），进行某些操作，

比如下方，在请求中进行强制的退出登录操作，设置了不会进行退出的页面。

function getLastPath() {  

  const fullUrl = window.location.href;  
  // 创建URL对象  
  const url = new URL(fullUrl);
  // 去除查询参数  
  const pathWithoutQuery = url.pathname;  
  // 获取路径的最后一级（最后一个'/'之后的部分）  
  const lastSegment = pathWithoutQuery.substring(pathWithoutQuery.lastIndexOf('/') + 1);  

  return lastSegment;  
}