window.location.href的介绍及使用

目录

介绍:

获取当前 URL

设置新的 URL

URL 的组成部分

解析 URL 参数

什么是片段标识符的URL?

使用new URL:

 输出的部分解释:

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


介绍:

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

获取当前 URL

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

console.log(window.location.href);
 // 输出 "https://mp.csdn.net/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)

如下图所示,我们在当前页面输出了:

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

 输出的部分解释:

  1. href:完整的 URL 字符串。这和你传入 new URL() 的 window.location.href 是一样的。
  2. protocol:URL 的协议部分,例如 "http:" 或 "https:"
  3. hostname:URL 的主机名,不包括端口。例如,对于 URL "https://www.example.com:8080/path",hostname 会是 "www.example.com"
  4. port:URL 的端口号。如果没有明确指定端口(例如使用 HTTP 的默认 80 端口或 HTTPS 的默认 443 端口),则这个属性可能是一个空字符串。
  5. pathname:URL 的路径部分,从 "/" 开始。例如,对于 URL "https://www.example.com/path/to/resource",pathname 会是 "/path/to/resource"
  6. search:URL 的查询部分(包括 "?"),如果没有查询部分,则为空字符串。
  7. 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;  
}  

window.location.hrefwindow.opener.location.href都是用于获取或设置当前页面的URL。 window.location.href是获取或设置当前页面的URL。可以通过将一个新的URL赋值给window.location.href来导航到该URL。例如,可以使用window.location.href = "https://www.example.com"将当前页面导航到https://www.example.com。 window.opener.location.href是获取或设置打开当前页面的父页面的URL。它在使用window.open()方法打开一个新窗口后才有值。可以通过将一个新的URL赋值给window.opener.location.href来导航到父页面的URL。例如,可以使用window.opener.location.href = "https://www.parentpage.com"将父页面导航到https://www.parentpage.com。 需要注意的是,window.opener.location.href只能在通过window.open()方法打开的新窗口中使用,而不能在同一窗口或不是通过window.open()方法打开的窗口中使用。而window.location.href可以在任何窗口中使用。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* *3* [window.location.href的用法(动态输出跳转)](https://blog.csdn.net/weixin_31690531/article/details/115238595)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

じòぴé南冸じょうげん

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值