DieLocation-Schnittstelle repräsentiert die Position (URL) des Objekts, mit dem sie verknüpft ist. Änderungen daran spiegeln sich in dem Objekt wider, auf das sie sich bezieht. Sowohl dieDocument- als auch dieWindow-Schnittstelle haben eine solche verknüpfteLocation, die überDocument.location bzw.Window.location zugänglich ist.

Anatomie der Location

Fahren Sie mit der Maus über die URL-Segmente unten, um ihre Bedeutung hervorzuheben:

<span title="href"  ><span title="origin"    ><span title="protocol">https:</span>//<span           title="host"      ><span title="hostname">example.org</span>:<span               title="port"        >8080</span      ></span    ></span  ><span title="pathname">/foo/bar</span  ><span title="search">?q=baz</span  ><span 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.ancestorOriginsSchreibgeschützt

Eine statischeDOMStringList, die in umgekehrter Reihenfolge die Ursprünge aller Vorfahren-Browsing-Kontexten des Dokuments enthält, das mit dem gegebenenLocation-Objekt verknüpft ist.

Location.href

Einstringifier, der einen String zurückgibt, der die gesamte URL enthält. Bei Änderungen navigiert das verknüpfte Dokument zur neuen Seite. Es kann aus einem anderen Ursprung als das verknüpfte Dokument gesetzt werden.

Location.protocol

Ein String, der das Protokollschema der URL enthält, einschließlich des abschließenden':'.

Location.host

Ein String, der den Host enthält, also denhostname, ein':' und denport der URL.

Location.hostname

Ein String, der die Domain der URL enthält.

Location.port

Ein String, der die Portnummer der URL enthält.

Location.pathname

Ein String, der ein anfängliches'/' gefolgt vom Pfad der URL enthält, dabei wird die Abfragezeichenfolge oder Fragment nicht eingeschlossen.

Location.search

Ein String, der ein'?' gefolgt von den Parametern oder der "Abfragezeichenfolge" der URL enthält. Moderne Browser bietenURLSearchParams undURL.searchParams, um das Herausfiltern von Parametern aus der Abfragezeichenfolge zu erleichtern.

Location.hash

Ein String, der ein'#' gefolgt von dem Fragment-Identifier der URL enthält.

Location.originSchreibgeschützt

Gibt einen String zurück, der die kanonische Form des Ursprungs des spezifischen Standorts enthält.

Instanz-Methoden

Location.assign()

Lädt die Ressource an der im Parameter angegebenen URL.

Location.reload()

Lädt die aktuelle URL neu, wie die Aktualisieren-Schaltfläche.

Location.replace()

Ersetzt die aktuelle Ressource durch die an der angegebenen URL (leitet zur angegebenen URL weiter). Der Unterschied zurassign()-Methode und dem Setzen derhref-Eigenschaft besteht darin, dass nach der Verwendung vonreplace() die aktuelle Seite nicht in der SitzungHistory gespeichert wird, was bedeutet, dass der Benutzer nicht dieZurück-Taste verwenden kann, um zu ihr zu navigieren.

Location.toString()

Gibt einen String zurück, der die gesamte URL enthält. Es ist ein Synonym fürLocation.href, kann jedoch nicht zur Änderung des Wertes verwendet werden.

Beispiele

// location: https://developer.mozilla.org:8080/en-US/search?q=URL#search-results-close-containerconst loc = document.location;console.log(loc.href); // https://developer.mozilla.org:8080/en-US/search?q=URL#search-results-close-containerconsole.log(loc.protocol); // https:console.log(loc.host); // developer.mozilla.org:8080console.log(loc.hostname); // developer.mozilla.orgconsole.log(loc.port); // 8080console.log(loc.pathname); // /en-US/searchconsole.log(loc.search); // ?q=URLconsole.log(loc.hash); // #search-results-close-containerconsole.log(loc.origin); // https://developer.mozilla.org:8080location.assign("http://another.site"); // load another page

Spezifikationen

Browser-Kompatibilität

Siehe auch

• ZweiLocation-Eigenschaften:Window.location undDocument.location.
• URL-Manipulationsschnittstellen:URL undURLSearchParams.