访问与重定向 - location 对象

╰+哭是因爲堅強的太久メ 2024-04-17 06:22 43阅读 0赞

`location`接口包含着当前URL上的信息，`Document` 和 `Window` 接口都有这样一个链接的Location，分别通过 `Document.location`和`Window.location` 访问

为了方便本文的描述，假定现有URL：

http://example.com:1234/test.html?user=zfs&hobby=travel#part2

## location对象属性 ##

#### location.href ####

`href`是一个可读可写的字符串。可以通过其设置新的链接地址，也可获取现URL上的信息。

console.log(window.location.href)
    // http://example.com:1234/test.html?user=zfs&hobby=travel#part2

#### location.search ####

`search`是一个可读可写的属性，读取时返回的是当前URL的查询部分，包括`?`号。  
【注意】截取内容不包含锚点信息(**解释：比如`http://example.com:1234/test.html?user=zfs&hobby=travel#part2`后面的`#part2`就是锚点信息**)

// set
    location.href = URL
    // get
    console.log(window.location.search) // '?user=zfs&hobby=travel'

#### location.hash ####

`hash`是一个可读可写的字符串，读取时返回的是 URL 的锚部分，包括`#号`  
\*\*【注意】\*\*对于当前流行的Vue项目，如果使用的hash路由，那么参数（`search`）部分也将被当做hash来看待

// set
    location.hash=anchorname
    // get
    console.log(location.hash) // '#part2'

vue中的hash路由模式，假设url：

https://example:1234/index.html#/personal?user=zfs&hobby=traval

//返回的是#号后面的所有字符串
    console.log(window.location.hash) // '#/personal?user=zfs&hobby=traval'

#### location.host ####

`host`是个可读可写的属性，可设置或返回当前URL的主机名称和端口号

// set
    location.host = host
    // get
    console.log(location.host)  // 'example.com:1234'

#### location.hostname ####

`hostname`是个可读可写的属性，可设置或返回当前URL的主机名称

// set
    location.hostname = hostname
    // get
    console.log(location.hostname) // 'example.com'

#### location.port ####

可读可写，设置或返回当前主机服务端口

// set
    location.port = portnumber
    // get
    console.log(location.port) // '1234'

#### location.pathname ####

可读可写，设置或返回当前URL路径部分

// 完整url是 http://example.com:1234/index.html?user=zfs&hobby=travel#part2
    // set 
    location.pathname = path
    // get
    console.log(location.pathname)  // '/index.html'

#### location.protocol ####

可读可写，设置或返回当前URL中的协议

// set
    location.protocol = path
    // get
    console.log(location.protocol)  // http:

## location 对象方法 ##

#### assign() ####

assign()可以载入一个新的文档页面

window.location.assign("http://example.com")

#### reload() ####

重新载入当前文档页面。该方法可以接受一个可选的`Boolean`类型参数。  
  当为`false`时，它就会用 HTTP 头 If-Modified-Since 来检测服务器上的文档是否已改变。如果已改变，则再次下载，否则将从缓存中装载该文档。  
  当为`true`时，那么无论文档的最后修改日期是什么，它都会绕过缓存，从服务器上重新下载该文档。

window.location.reload(true)

#### replace() ####

用一个新文档取代当前文档，并且不会在History对象中生成一条新的记录，将用新的URL覆盖当前URL

window.location.replace("http://example.com")

# 完整案例 #

var url = document.createElement('a');
    url.href = 'https://developer.mozilla.org/en-US/search?q=URL#search-results';
    console.log(url.href);      // https://developer.mozilla.org/en-US/search?q=URL#search-results
    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

本文转载自：https://www.jianshu.com/p/05da59e875df