位置

Location 接口表示与其关联的对象的位置（URL）。对其进行的更改将反映在与其关联的对象上。Document 和 Window 接口都具有这样的关联 Location，可以通过 Document.location 和 Window.location 分别访问。

位置结构

将鼠标悬停在下面的 URL 部分上，以突出显示其含义

<span id="href" title="href"
  ><span id="origin" title="origin"
    ><span id="protocol" title="protocol">https:</span>//<span
      id="host"
      title="host"
      ><span id="hostname" title="hostname">example.org</span>:<span
        id="port"
        title="port"
        >8080</span
      ></span
    ></span
  ><span id="pathname" title="pathname">/foo/bar</span
  ><span id="search" title="search">?q=baz</span
  ><span id="hash" title="hash">#bang</span></span
>

html {
  display: table;
  width: 100%;
}

body {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
  font-family: Georgia;
  font-size: 175%;
  line-height: 1em;
  white-space: nowrap;
}

[title] {
  position: relative;
  display: inline-block;
  box-sizing: border-box;
  line-height: 2em;
  cursor: pointer;
  color: gray;
}

[title]::before {
  content: attr(title);
  font-family: monospace;
  position: absolute;
  top: 100%;
  width: 100%;
  left: 50%;
  margin-left: -50%;
  font-size: 60%;
  line-height: 1.5;
  background: black;
}

[title]:hover::before,
:target::before {
  background: black;
  color: yellow;
}

[title] [title]::before {
  margin-top: 1.5em;
}

[title] [title] [title]::before {
  margin-top: 3em;
}

[title] [title] [title] [title]::before {
  margin-top: 4.5em;
}

[title]:hover,
:target {
  position: relative;
  z-index: 1;
  outline: 50em solid rgb(255 255 255 / 80%);
}

document.body.addEventListener("click", (event) => {
  event.preventDefault();

  window.location.hash = event.target.hasAttribute("id")
    ? `#${event.target.getAttribute("id")}`
    : "";
});

实例属性

Location.ancestorOrigins 只读: 一个静态 DOMStringList，按反序包含与给定 Location 对象关联的文档的所有祖先浏览上下文来源。
Location.href: 一个字符串化器，返回包含整个 URL 的字符串。如果更改，关联的文档将导航到新页面。它可以从与关联文档不同的来源设置。
Location.protocol: 一个包含 URL 协议方案的字符串，包括最终的 ':'。
Location.host: 一个包含主机的字符串，即主机名、一个 ':' 和 URL 的端口。
Location.hostname: 一个包含 URL 域名的字符串。
Location.port: 一个包含 URL 端口号的字符串。
Location.pathname: 一个包含初始 '/' 的字符串，后跟 URL 的路径，不包括查询字符串或片段。
Location.search: 一个包含 '?' 的字符串，后跟 URL 的参数或“查询字符串”。现代浏览器提供 URLSearchParams 和 URL.searchParams，使解析查询字符串中的参数变得容易。
Location.hash: 一个包含 '#' 的字符串，后跟 URL 的片段标识符。
Location.origin 只读: 返回一个包含特定位置来源的规范形式的字符串。

实例方法

Location.assign(): 加载参数中提供的 URL 中的资源。
Location.reload(): 重新加载当前 URL，就像“刷新”按钮一样。
Location.replace(): 用提供的 URL 中的资源替换当前资源（重定向到提供的 URL）。与 assign() 方法和设置 href 属性的区别在于，使用 replace() 后，当前页面将不会保存在会话 History 中，这意味着用户将无法使用“后退”按钮导航到该页面。
Location.toString(): 返回一个包含整个 URL 的字符串。它是 Location.href 的同义词，但不能用于修改值。

示例

// location: https://mdn.org.cn:8080/en-US/search?q=URL#search-results-close-container
const loc = document.location;
console.log(loc.href); // https://mdn.org.cn:8080/en-US/search?q=URL#search-results-close-container
console.log(loc.protocol); // https:
console.log(loc.host); // developer.mozilla.org:8080
console.log(loc.hostname); // developer.mozilla.org
console.log(loc.port); // 8080
console.log(loc.pathname); // /en-US/search
console.log(loc.search); // ?q=URL
console.log(loc.hash); // #search-results-close-container
console.log(loc.origin); // https://mdn.org.cn:8080

location.assign("http://another.site"); // load another page

规范

规范
HTML 标准 # the-location-interface

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。

另请参见

两个 Location 属性：Window.location 和 Document.location。
URL 操作接口：URL 和 URLSearchParams。