Location

Baseline 廣泛可用 *

此特性已相當成熟，可在許多裝置和瀏覽器版本上使用。自 ⁨2015 年 7 月⁩以來，各瀏覽器均已提供此特性。

* 此特性的某些部分可能存在不同級別的支援。

Location 介面代表其連結物件的 URL（即其位置）。對它的修改會反映在其關聯物件上。Document 和 Window 介面都有一個連結的 Location 物件，分別可透過 Document.location 和 Window.location 訪問。

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: 200%;
  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: 50%;
  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 物件關聯的文件的所有祖先瀏覽上下文的源（origin），順序相反。
Location.href: 一個 stringifier，返回一個包含整個 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 只讀: 返回一個字串，包含特定位置的源（origin）的規範形式。

例項方法

Location.assign(): 載入引數中提供的 URL 資源。
Location.reload(): 重新載入當前 URL，類似於重新整理按鈕。
Location.replace(): 用提供的 URL 替換當前資源（重定向到提供的 URL）。與 assign() 方法和設定 href 屬性的區別在於，使用 replace() 後，當前頁面將不會儲存在會話 History 中，這意味著使用者將無法使用“後退”按鈕導航回它。
Location.toString(): 返回一個包含整個 URL 的字串。它是 Location.href 的同義詞，但不能用於修改該值。

示例

// location: https://mdn.club.tw:8080/en-US/search?q=URL#search-results-close-container
const loc = document.location;
console.log(loc.href); // https://mdn.club.tw: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.club.tw:8080

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

規範

規範
HTML # the-location-interface

瀏覽器相容性

另見

兩個 Location 屬性：Window.location 和 Document.location。
URL 操作介面：URL 和 URLSearchParams。

幫助改進 MDN

瞭解如何貢獻

此頁面最後修改於 2025年10月13日，由 MDN 貢獻者進行修改。

在 GitHub 上檢視此頁面 • 報告此內容的問題