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.

Das Location Interface repräsentiert die Position (URL) des Objekts, mit dem es verknüpft ist. Änderungen daran werden auf das betreffende Objekt angewendet. Sowohl das Document als auch das Window Interface haben ein solches verknüpftes Location, das über Document.location bzw. Window.location zugänglich ist.

Aufbau von Location

Bewegen Sie die Maus über die URL-Segmente unten, um ihre Bedeutung hervorzuheben:

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

Instanz-Eigenschaften

Location.ancestorOrigins Nur lesbar: Eine statische DOMStringList, die in umgekehrter Reihenfolge die Ursprünge aller übergeordneten Browsing-Kontexte des Dokuments enthält, das mit dem gegebenen Location Objekt verknüpft ist.
Location.href: Ein stringifier, der eine Zeichenfolge mit der gesamten URL zurückgibt. Bei einer Änderung navigiert das zugehörige Dokument zur neuen Seite. Es kann von einem anderen Ursprung als dem des zugehörigen Dokuments gesetzt werden.
Location.protocol: Eine Zeichenfolge, die das Protokollschema der URL, einschließlich des abschließenden ':', enthält.
Location.host: Eine Zeichenfolge, die den Host, das heißt den hostname, einen ':' und den port der URL, enthält.
Location.hostname: Eine Zeichenfolge, die die Domain der URL enthält.
Location.port: Eine Zeichenfolge, die die Portnummer der URL enthält.
Location.pathname: Eine Zeichenfolge, die ein anfängliches '/' gefolgt vom Pfad der URL enthält, ohne die Query-String oder den Fragment.
Location.search: Eine Zeichenfolge, die ein '?' gefolgt von den Parametern oder dem "Query-String" der URL enthält. Moderne Browser bieten URLSearchParams und URL.searchParams an, um das Herausparsen der Parameter aus dem Query-String zu erleichtern.
Location.hash: Eine Zeichenfolge, die ein '#' gefolgt von der Fragmentkennung der URL enthält.
Location.origin Nur lesbar: Gibt eine Zeichenfolge zurück, die die kanonische Form des Ursprungs des jeweiligen Standorts enthält.

Instanz-Methoden

Location.assign(): Lädt die Ressource unter der im Parameter angegebenen URL.
Location.reload(): Lädt die aktuelle URL neu, ähnlich der Aktualisieren-Schaltfläche.
Location.replace(): Ersetzt die aktuelle Ressource durch die an der angegebenen URL (leitet zur angegebenen URL weiter). Der Unterschied zur Methode assign() und beim Setzen der href-Eigenschaft besteht darin, dass nach der Verwendung von replace() die aktuelle Seite nicht in der Sitzungs-History gespeichert wird, was bedeutet, dass der Benutzer nicht die Zurück-Schaltfläche verwenden kann, um zu ihr zu navigieren.
Location.toString(): Gibt eine Zeichenfolge zurück, die die gesamte URL enthält. Es ist ein Synonym für Location.href, kann jedoch nicht verwendet werden, um den Wert zu ändern.

Beispiele

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

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

Spezifikationen

Specification
HTML Standard # the-location-interface

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch

Zwei Location-Eigenschaften: Window.location und Document.location.
URL-Manipulationsschnittstellen: URL und URLSearchParams.