Location

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

* Some parts of this feature may have varying levels of support.

Giao diện Location đại diện cho vị trí (URL) của đối tượng mà nó được liên kết. Các thay đổi được thực hiện trên nó sẽ phản ánh lên đối tượng mà nó liên quan. Cả giao diện Document và Window đều có một Location được liên kết như vậy, có thể truy cập lần lượt qua Document.location và Window.location.

Cấu trúc của Location

Di chuột lên các phân đoạn URL bên dưới để làm nổi bật ý nghĩa của chúng:

<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")}`
    : "";
});

Thuộc tính thể hiện

Location.ancestorOrigins Read only: Một DOMStringList tĩnh chứa, theo thứ tự ngược, các origin của mọi ngữ cảnh duyệt web tổ tiên của tài liệu liên kết với đối tượng Location đã cho.
Location.href: Một stringifier trả về một chuỗi chứa toàn bộ URL. Nếu thay đổi, tài liệu liên quan sẽ điều hướng đến trang mới. Nó có thể được đặt từ một origin khác với tài liệu liên quan.
Location.protocol: Một chuỗi chứa scheme giao thức của URL, bao gồm dấu ':' cuối cùng.
Location.host: Một chuỗi chứa host, tức là hostname, một ':', và port của URL.
Location.hostname: Một chuỗi chứa miền của URL.
Location.port: Một chuỗi chứa số cổng của URL.
Location.pathname: Một chuỗi chứa một '/' ở đầu, theo sau là đường dẫn của URL, không bao gồm chuỗi truy vấn hoặc fragment.
Location.search: Một chuỗi chứa '?' theo sau là các tham số hoặc "query string" của URL. Các trình duyệt hiện đại cung cấp URLSearchParams và URL.searchParams để dễ dàng phân tích các tham số từ query string.
Location.hash: Một chuỗi chứa '#' theo sau là mã định danh fragment của URL.
Location.origin Read only: Trả về một chuỗi chứa dạng chuẩn tắc của origin của vị trí cụ thể.

Phương thức thể hiện

Location.assign(): Tải tài nguyên tại URL được cung cấp trong tham số.
Location.reload(): Tải lại URL hiện tại, giống nút Refresh.
Location.replace(): Thay thế tài nguyên hiện tại bằng tài nguyên tại URL được cung cấp (chuyển hướng đến URL được cung cấp). Điểm khác với phương thức assign() và việc đặt thuộc tính href là sau khi dùng replace(), trang hiện tại sẽ không được lưu trong phiên History, nghĩa là người dùng sẽ không thể dùng nút back để quay lại nó.
Location.toString(): Trả về một chuỗi chứa toàn bộ URL. Nó là đồng nghĩa với Location.href, dù không thể dùng để sửa đổi giá trị.

Ví dụ

// location: https://mdn.go-mizu.dev:8080/vi/search?q=URL#search-results-close-container
const loc = document.location;
console.log(loc.href); // https://mdn.go-mizu.dev:8080/vi/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); // /vi/search
console.log(loc.search); // ?q=URL
console.log(loc.hash); // #search-results-close-container
console.log(loc.origin); // https://mdn.go-mizu.dev:8080

location.assign("http://another.site"); // tải trang khác

Thông số kỹ thuật

Specification
HTML # the-location-interface

Tương thích trình duyệt

Xem thêm

Hai thuộc tính Location: Window.location và Document.location.
Các giao diện thao tác URL: URL và URLSearchParams.

Help improve MDN

Learn how to contribute

This page was last modified on Jan 1, 1970 by MDN contributors.

View this page on GitHub • Report a problem with this content