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
网友评论