JS--JavaScript中的location对象概述和API详解

男娘i 2021-08-13 23:47 539阅读 0赞

#### location对象概述 ####

location对象存储当前页面与位置（URL）相关的信息，表示当前显示文档的Web地址。使用window对象的location属性可以访问。

location对象定义了8个属性，其中7个属性分别指向当前URL的各部分信息，另一个属性（href）博阿寒了完整的URL信息，详细说明如下表：

<table> 
 <thead> 
  <tr> 
   <th align="center">属性</th> 
   <th align="center">说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="center">href</td> 
   <td align="center">声明了当前显示文档的完整URL，与其他location属性只声明部分URL不同，把该属性设置为新的URL会使浏览器读取并显示新的URL的内容</td> 
  </tr> 
  <tr> 
   <td align="center">protocol</td> 
   <td align="center">声明了URL的协议部分，包括后缀的冒号。例如：http:</td> 
  </tr> 
  <tr> 
   <td align="center">host</td> 
   <td align="center">声明了当前URL中的主机名和端口部分。例如：www.baidu.com:80</td> 
  </tr> 
  <tr> 
   <td align="center">hostname</td> 
   <td align="center">声明了当前URL中的主机名。例如：www.baidu.com</td> 
  </tr> 
  <tr> 
   <td align="center">port</td> 
   <td align="center">声明了当前URL中的端口部分。例如：80</td> 
  </tr> 
  <tr> 
   <td align="center">pathname</td> 
   <td align="center">声明了当前URL中的路径部分。例如：news/index.jsp</td> 
  </tr> 
  <tr> 
   <td align="center">search</td> 
   <td align="center">声明了当前URL的查询部分，包括前导问号。例如：?id=123&amp;password=xxxx</td> 
  </tr> 
  <tr> 
   <td align="center">hash</td> 
   <td align="center">声明了当前URL中锚的部分，包括前导符（#）。例如：#top,指定在文档中锚点的名称</td> 
  </tr> 
 </tbody> 
</table>

示例：定义一个获取URL查询字符串参数值的通用函数，以键值对存储在对象内返回

![在这里插入图片描述][20190924212607208.png]  
 注 意 ： \\color\{red\}\{注意：\} 注意：location对象的属性都是可读可写的，如果改变了文档的location属性值，则浏览器就会载入新的页面。如果改变了location.hash属性值，则页面会跳转到新的锚点，但此时页面不会重载。

如果把一个含有URL的字符串赋给location对象或它的href属性，浏览器就会把新的URL所指向的文档装载并显示出来。

location = "http://www.baidu.com";
    location.href ="http://www.baidu.com";

如果需要URL的其他信息，只能通过字符串处理的方式截取。  
例如：如果要获取网页的名称，可以使用以下方式

var p = location.pathname;
    var name = p.substring(p.lastIndexOf("/" + 1);

如果要获取文件扩展名，可使用以下方式

var p = location.pathname;
    var c = p.substring(p.lastIndexOf("." + 1);

**location对象还定义了两个方法：reload()和replace()：**

*  reload():  
    可以重写装载当前文档
 *  replace():  
    可以装载一个新文档而无需为它创建一个新的历史记录。也就是说，在浏览器的历史列表中，新的文档将会替换当前文档。这样浏览器中就不能通过【返回】按钮返回当前文档了。

对于那些使用了框架并且显示多个临时页面的网站来说，replace()方法比较有用，这样临时页面不会存储在历史记录中。

注 意 ： w i n d o w . l o c a t i o n 与 d o c u m e n t . l o c a t i o n 不 同 ， 前 者 引 用 l o c a t i o n 对 象 ， \\color\{red\}\{注意：window.location与document.location不同，前者引用location对象，\} 注意：window.location与document.location不同，前者引用location对象， 后 者 只 是 一 个 只 读 字 符 粗 ， 与 d o c u m e n t . U R L 同 义 。 \\color\{red\}\{后者只是一个只读字符粗，与document.URL同义。\} 后者只是一个只读字符粗，与document.URL同义。  
当存在服务重定向时，document.location包含的是已经装载的URL，而location.href包含的则是原始请求的文档的URL。

[20190924212607208.png]: /images/20210813/f156b62e31664bb2b94b865b23c1acbe.png