访问与重定向 - location 对象

2019-07-30 本文已影响11人果汁凉茶丶

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的查询部分，包括?号。
【注意】截取内容不包含锚点信息

// set
location.href = URL
// get
console.log(window.location.href) // '?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路径部分

// 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