Window.location — Eigenschaft · JavaScript-Referenz

Signatur

Window.location

Beschreibung

Die schreibgeschützte Eigenschaft location des Window-Interfaces gibt ein Location-Objekt mit Informationen über den aktuellen Standort des Dokuments zurück.

Siehe Location für alle verfügbaren Eigenschaften.

Ein Location-Objekt.

Obwohl die Eigenschaft location selbst insofern schreibgeschützt ist, als dass Sie das Location-Objekt nicht ersetzen können, können Sie der Eigenschaft location dennoch direkt einen Wert zuweisen, was einer Zuweisung an deren href-Eigenschaft entspricht. Sie können das Location-Objekt auch mit den Methoden assign() und replace() verändern.

Rückgabewert

Typ

Location

Beschreibung

Ein Location-Objekt.

Beispiele

Grundlegendes Beispiel

alert(location); // alerts "https://developer.mozilla.org/en-US/docs/Web/API/Window/location"

Beispiel 1: Zu einer neuen Seite navigieren

location.assign("https://www.mozilla.org"); // or
location = "https://www.mozilla.org";

Beispiel 2: Die aktuelle Seite neu laden

location.reload();

Beispiel 3

function reloadPageWithHash() {
  location.replace(`https://example.com/#${location.pathname}`);
}

Beispiel 4: Die Eigenschaften der aktuellen URL in einem Alert-Dialog anzeigen

function showLoc() {
  const logLines = [
    "Property (Typeof): Value",
    `location (${typeof location}): ${location}`,
  ];
  for (const prop in location) {
    logLines.push(
      `${prop} (${typeof location[prop]}): ${location[prop] || "n/a"}`,
    );
  }
  alert(logLines.join("\n"));
}

// in html: <button onclick="showLoc();">Show location properties</button>

Beispiel 5: Eine Datenzeichenkette an den Server senden, indem die search-Eigenschaft geändert wird

function sendData(data) {
  location.search = data;
}

// in html: <button onclick="sendData('Some data');">Send data</button>

Beispiel 6: Lesezeichen verwenden, ohne die hash-Eigenschaft zu ändern (JS)

function showNode(node) {
  document.documentElement.scrollTop = node.offsetTop;
  document.documentElement.scrollLeft = node.offsetLeft;
}

function showBookmark(bookmark, useHash) {
  if (arguments.length === 1 || useHash) {
    location.hash = bookmark;
    return;
  }
  const bookmarkElement = document.querySelector(bookmark);
  if (bookmarkElement) {
    showNode(bookmarkElement);
  }
}

document
  .querySelector("#myBookmark1 .intLink")
  .addEventListener("click", () => {
    showBookmark("#myBookmark2");
  });
document
  .querySelector("#myBookmark2 .intLink")
  .addEventListener("click", () => {
    showBookmark("#myBookmark1");
  });
document
  .querySelector("#myBookmark1 .intLink:nth-child(2)")
  .addEventListener("click", () => {
    showBookmark("#myBookmark1", false);
  });
document
  .querySelector("#myBookmark2 .intLink:nth-child(3)")
  .addEventListener("click", () => {
    showBookmark("#myBookmark3");
  });

Dasselbe mit animiertem Seiten-Scrolling

const showBookmark = (() => {
  let _useHash;
  let _scrollX;
  let _scrollY;
  let _nodeX;
  let _nodeY;
  let _itFrame;
  let _scrollId = -1;
  let _bookMark;

  // duration: the duration in milliseconds of each frame
  // frames: number of frames for each scroll
  let duration = 200;
  let frames = 10;

  function _next() {
    if (_itFrame > frames) {
      clearInterval(_scrollId);
      _scrollId = -1;
      return;
    }
    _isBot = true;
    document.documentElement.scrollTop = Math.round(
      _scrollY + ((_nodeY - _scrollY) * _itFrame) / frames,
    );
    document.documentElement.scrollLeft = Math.round(
      _scrollX + ((_nodeX - _scrollX) * _itFrame) / frames,
    );
    if (_useHash && _itFrame === frames) {
      location.hash = _bookMark;
    }
    _itFrame++;
  }

  function _chkOwner() {
    if (_isBot) {
      _isBot = false;
      return;
    }
    if (_scrollId > -1) {
      clearInterval(_scrollId);
      _scrollId = -1;
    }
  }

  window.addEventListener("scroll", _chkOwner);

  return (bookmark, useHash) => {
    const node = document.querySelector(bookmark);
    _scrollY = document.documentElement.scrollTop;
    _scrollX = document.documentElement.scrollLeft;
    _bookMark = bookmark;
    _useHash = useHash === true;
    _nodeX = node.offsetLeft;
    _nodeY = node.offsetTop;
    _itFrame = 1;
    if (_scrollId === -1) {
      _scrollId = setInterval(_next, Math.round(duration / frames));
    }
  };
})();

// Wichtig · Fallstricke

Wann immer dem location-Objekt ein neuer Wert zugewiesen wird, wird ein Dokument geladen, wobei die URL so verwendet wird, als wäre location.assign() mit der geänderten URL aufgerufen worden. Beachten Sie, dass navigationsbezogene Sandbox-Flags dazu führen können, dass eine Exception geworfen wird und die Navigation fehlschlägt. Bei Beispiel 5 wird die aktuelle URL mit angehängtem "?Some%20data" an den Server gesendet (wenn der Server keine Aktion ausführt, wird das aktuelle Dokument mit dem geänderten Suchstring neu geladen).

Siehe auch

Location Document.location hashchange

← Vorheriger Eintrag Window.localStorage Nächster Eintrag → Window.locationbar