WebAPI-Location对象

location 对象是 window 的一个属性，该对象包含了当前 URL 的相关信息。

URL

URL 统一资源定位符（ Uniform Resource Locator 的缩写），是互联网上标准资源的地址；互联网上的每一个资源文件都有属于自己的唯一的 URL。

url 的基本格式：

Protocol://hostName[:port]/Path[?query]#fragment

• Protocol 通信协议；常见的协议有 http、ftp、maito 等
• hostName 主机名（域名）
• [port] 端口，是一个可选参数；省略时会使用默认的端口号
• Path 路径；有零个或多个 “/” 隔开的字符串；一般用来表示主机上的一级目录或文件地址
• [query] 查询参数；是键值对，键名与值之间用 “=” 连接，多个键值对用 “&” 隔开；可选
• fragment 信息片段 “#” 后面的内容；多用于锚点链接

示例：

location 对象的属性

hash

location.hash 设置或返回 URL 中的锚部分（从 “#” 开始的部分）设置时使用赋值的方式即可

host

location.host 设置或返回 URL 中的主机名（域名）和端口部分

hostname

location.hostname 设置或返回 URL 中的主机名（域名）部分

href

location.href 设置或返回当前文档完整的 URL

pathname

location.pathname 设置或返回当前 URL 中的路径部分

port

location.port 设置或返回当前 URL 的端口部分

protocol

location.prot 设置或返回当前 URL 的协议部分

search

location.search 设置或返回当前 URL 的查询部分（问号 “?” 之后的部分）

location 对象的方法

assign()

location.assign(URL) 该方法用于加载一个新的文档，会记录浏览历史所以可以实现后退功能；功能与 a 标签的 href 属性类似。

• URL 资源地址

<button id="btn">跳转</button>
<script>
  var btn = document.querySelector('#btn')
  btn.addEventListener('click', function() {
    // 加载新地址
    location.assign('https://www.csdn.net/')
  })
</script>

replace()

location.replace(URL) 用新的文档替换当前的文档，该方法不会产生历史记录

<button id="btn">跳转</button>
<script>
  var btn = document.querySelector('#btn')
  btn.addEventListener('click', function() {
    // 替换当前文档
    location.replace('https://www.csdn.net/')
  })
</script>

reload()

location.reload(forceGet) 刷新当前文档；类似于浏览器上的刷新页面按钮。

• forceGet 是一个布尔值，为 true 时会绕过缓存，直接从服务器上重新下载当前文档（相当于 ctrl+f5）。