【前端用法】jquery获取当前页面的URL信息

迷南。 2023-07-18 09:16 1阅读 0赞

**目录**

1、Location的概念

2、Location的属性

3、Location的举例说明

4、Location的方法

5、Location的总结

--------------------

作为一个后端的开发大神，最近在做公司的一个网站，前端有很多页面，而我对于前端来说确是菜鸟，今天就被问了一个问题，如何获取当前页面的url以及如何分析它的每一部分，下面记录一下我的心得。

## **1、Location的概念** ##

**`Location `**接口表示其链接到的对象的位置（URL）。所做的修改反映在与之相关的对象上。 [`Document`][Document] 和 [`Window`][Window] 接口都有这样一个链接的Location，分别通过 [`Document.location`][Document.location]和[`Window.location`][Window.location] 访问。

请注意，docuemnt的location属性也引用的是location对象。**\`window.location === document.location 输出true**

## **2、Location的属性** ##

*`Location `接口**不继承任何属性，但是实现了那些来自 [`URLUtils`][URLUtils] 的属性。*

`Location.href`

设置或获取整个 URL 为字符串。包含整个URL的一个[`DOMString`][DOMString]

`Location.protocol`

设置或获取 URL 的协议部分。包含URL对应协议的一个[`DOMString`][DOMString]，最后有一个":"。

`Location.host`

设置或获取 location 或 URL 的 hostname 和 port 号码。包含了域名的一个[`DOMString`][DOMString]，可能在该串最后带有一个":"并跟上URL的端口号。

`Location.hostname`

包含URL域名的一个[`DOMString`][DOMString]。

`Location.port`

设置或获取与 URL 关联的端口号码。包含端口号的一个[`DOMString`][DOMString]。

`Location.pathname`

设置或获取对象指定的文件名或路径。包含URL中路径部分的一个[`DOMString`][DOMString]，开头有一个“`/"。`

`Location.search`

设置或获取 href 属性中跟在问号后面的部分。包含URL参数的一个[`DOMString`][DOMString]，开头有一个`“?”`。

`Location.hash`

设置或获取 href 属性中在井号“\#”后面的分段。包含块标识符的[`DOMString`][DOMString]，开头有一个`“#”。`

`Location.username`

包含URL中域名前的用户名的一个[`DOMString`][DOMString]。

`Location.password`

包含URL域名前的密码的一个 [`DOMString`][DOMString]。

`Location.origin` 只读

包含页面来源的域名的标准形式[`DOMString`][DOMString]。

## **3、Location的举例说明** ##

var url = document.createElement('a');
    url.href = 'https://developer.mozilla.org/en-US/search?q=URL#search-results-close-container';
    console.log(url.href);      // https://developer.mozilla.org/en-US/search?q=URL#search-results-close-container
    console.log(url.protocol);  // https:
    console.log(url.host);      // developer.mozilla.org
    console.log(url.hostname);  // developer.mozilla.org
    console.log(url.port);      // (blank - https assumes port 443)
    console.log(url.pathname);  // /en-US/search
    console.log(url.search);    // ?q=URL
    console.log(url.hash);      // #search-results-close-container
    console.log(url.origin);    // https://developer.mozilla.org

## **4、Location的方法** ##

*`Location`**没有继承任何方法，但实现了来自[`URLUtils`][URLUtils]的方法。*

[`Location.assign()`][Location.assign]

加载给定URL的内容资源到这个Location对象所关联的对象上。

[`Location.reload()`][Location.reload]

重新加载来自当前 URL的资源。他有一个特殊的可选参数，类型为 `Boolean`，该参数为true时会导致该方法引发的刷新一定会从服务器上加载数据。如果是 `false`或没有制定这个参数，浏览器可能从缓存当中加载页面。

[`Location.replace()`][Location.replace]

用给定的URL替换掉当前的资源。与 `assign()` 方法不同的是用 `replace()`替换的新页面不会被保存在会话的历史 [`History`][History]中，这意味着用户将不能用后退按钮转到该页面。

`Location.toString()`

返回一个[`DOMString`][DOMString]，包含整个URL。 它和读取[`URLUtils.href`][URLUtils.href]的效果相同。但是用它是不能够修改Location的值的。

## **5、Location的总结** ##

<table style="width:500px;"> 
 <tbody> 
  <tr> 
   <td>属性</td> 
   <td>&nbsp;&nbsp; 描述</td> 
  </tr> 
  <tr> 
   <td>hash</td> 
   <td>设置或获取 href 属性中在井号“#”后面的分段。</td> 
  </tr> 
  <tr> 
   <td>host&nbsp;&nbsp;&nbsp;</td> 
   <td>设置或获取 location 或 URL 的 hostname 和 port 号码。</td> 
  </tr> 
  <tr> 
   <td>hostname</td> 
   <td>设置或获取 location 或 URL 的主机名称部分。</td> 
  </tr> 
  <tr> 
   <td>href</td> 
   <td>设置或获取整个 URL 为字符串。</td> 
  </tr> 
  <tr> 
   <td>pathname&nbsp;</td> 
   <td>设置或获取对象指定的文件名或路径。</td> 
  </tr> 
  <tr> 
   <td>port</td> 
   <td>设置或获取与 URL 关联的端口号码。</td> 
  </tr> 
  <tr> 
   <td>protocol&nbsp;</td> 
   <td>设置或获取 URL 的协议部分。</td> 
  </tr> 
  <tr> 
   <td>search&nbsp;&nbsp;</td> 
   <td>设置或获取 href 属性中跟在问号后面的部分。</td> 
  </tr> 
 </tbody> 
</table>

【参考资料】

MDN Web文档Location接口：[https://developer.mozilla.org/zh-CN/docs/Web/API/Location][https_developer.mozilla.org_zh-CN_docs_Web_API_Location]

[Document]: https://developer.mozilla.org/zh-CN/docs/Web/API/Document
[Window]: https://developer.mozilla.org/zh-CN/docs/Web/API/Window
[Document.location]: https://developer.mozilla.org/zh-CN/docs/Web/API/Document/location
[Window.location]: https://developer.mozilla.org/zh-CN/docs/Web/API/Window/location
[URLUtils]: https://developer.mozilla.org/zh-CN/docs/Web/API/URLUtils
[DOMString]: https://developer.mozilla.org/zh-CN/docs/Web/API/DOMString
[Location.assign]: https://developer.mozilla.org/zh-CN/docs/Web/API/Location/assign
[Location.reload]: https://developer.mozilla.org/zh-CN/docs/Web/API/Location/reload
[Location.replace]: https://developer.mozilla.org/zh-CN/docs/Web/API/Location/replace
[History]: https://developer.mozilla.org/zh-CN/docs/Web/API/History
[URLUtils.href]: https://developer.mozilla.org/zh-CN/docs/Web/API/URLUtils/href
[https_developer.mozilla.org_zh-CN_docs_Web_API_Location]: https://developer.mozilla.org/zh-CN/docs/Web/API/Location