window.location • URL / Adresse der aktuellen Webseite

URL – Uniform Resource Locator

Formulare senden Daten bei GET-Anfragen über die URL an den Server und Skripte nutzen die URL für die animierte Darstellung des Navigationsmenüs. Die einfachste Methode, an die vollständige URL der aktuellen Webseite zu kommen, ist window.URL.

document.querySelector("#url").textContent = window.URL;

Sowohl window.location als auch document.location liefern die URL. Alle Eigenschaften von window.location sind Strings, die Komponenten der URL darstellen. Die URL hat die generelle Form

<protocol>//<host>[:<port>]/<pathname>[<hash>][<search>]
      ▲        ▲                ▲
      │        │                │
    https://www.mydomain.de/eineseite

document.location / window.location

Früher gehörte die URL nur zum window-Objekt und nicht zum Dokument. location gibt es auch als document.location (readonly). Während window.location in allen Browsern sowohl gelesen also auch geschrieben werden kann, hatte document.location zunächst nur lesenden Zugriff. Heute können die modernen Browser document.location zwar auch neu schreiben, aber der Cross-Browser-Sicherheit zuliebe sollte man window.location vorziehen.

elem.innerHTML = document.location; 

oder 

elem.innerHTML = window.location;

window.location

window.location erreicht jede Komponente einer URL oder URI: den reinen Hostnamen, die Portnummer und bei Formulardaten auch den Query String.

Am Rande: Das Protokoll und der Doppelpunkt können aber heute auch bei URLs zu externen Domains weggelassen werden, damit kein Mix aus http und https entsteht. Dann beginnt die URL mit // und wird zu einer relativen URL.

Das letzte Segment der Adresse / URL

Manchmal braucht man nur das letzte Segment der URL der aktuellen Seite: Den URL-String mit split("/") in ein Array umwandeln und array.pop () liefert das letzte Element des Arrays.

// letzter Teil der vollständigen Adresse
const lastField = window.location.pathname.split('/').pop()

Wenn die URL mit einem Slash "/" endet – wie z.B. die URL von WordPress-Seiten:

const url = "https://www.mediaevent.de/android-ios-emulator/"
const last = url.split("/")
console.log(last[last.length-2]); // "tutorial"

android-ios-emulator

Oder zurück zur document.URL

const url = document.URL;
console.log(url.substring(url.lastIndexOf('/') + 1));

URL mit window.location anzeigen

<button id="loc">location anzeigen</button>

Das Script prüft, ob es das Formular mit dem id-Attribut loc gibt und fängt das Absenden des Formulars ab. Innerhalb der Funktion prüft das Script noch einmal, ob es das PRE-Element mit id="F1" gibt.

Die Ergbnisse des Aufrufs von window.location, window.location.hash usw. werden in einen Textknoten geschrieben, der Textknoten wird in das PRE-Element gesetzt.

if (document.getElementById('loc')) {
document.getElementById('loc').onclick = function() {
   if (document.getElementById('f1')) {
      let pre = document.getElementById('f1');
      let text = document.createTextNode(
      "window.location: " + window.location + "\n" +
      "hash:            " + window.location.hash + "\n" +
      "host:            " + window.location.host + "\n" +
      "href:            " + window.location.href + "\n" +
      "hostname:        " + window.location.hostname + "\n" +
      "origin:          " + window.location.origin + "\n" +
      "pathname:        " + window.location.pathname + "\n" +
      "port:            " + window.location.port + "\n" +
      "protocol:        " + window.location.protocol + "\n" +
      "search:          " + window.location.search + "\n");
      pre.appendChild(text);
   }
}}

location.origin

location.origin spart viel Schreibarbeit, wird aber von Internet Explorer (auch nicht IE10 und IE11) nicht unterstützt. Kleiner Fix:

if (!window.location.origin) {
  window.location.origin = window.location.protocol + "//" + window.location.hostname + (window.location.port ? ':' + window.location.port: '');
}

URL mit window.location umleiten / neu laden

Ein location-Objekt wird einfach durch die Zuweisung einer URL zum location-Objekt erzeugt.

window.location = "file:///Users/horst/Sites/somepage.html";

oder

window.location = "//www.google.de";

Das Zuweisen einer URL veranlasst den Browser, sofort zur angegebenen URL zu navigieren.

Neben location.href = url gibt es auch noch location.assign(url), um mit Javascript auf eine andere Webseite weiterzuleiten. Der Aufruf einer Funktion anstelle der Zuweisung einer neuen Adresse könnte um einen Hauch langsamer sein, aber ansonsten wird location.assign genauso gut funktionieren wie location.href.

window.reload()

erzwingt ein Reload der Seite im aktuellen Browserfenster

window.replace()

ersetzt das aktuelle Dokument mit der angegebenen URL. Nach dem Ersetzen ist der alte URL aus der History getilgt und der Zurück-Button des Browsers führt nicht zum vorangegangenen URI.

window.location.reload(true)

URL und Query String

Wenn Daten über ein Formular mit GET-Parameter an den Server geschickt werden, entsteht ein »Query-String«, der mit einem ? beginnt und die Namen-Wert-Paare der Formulardaten enthält. Query Strings können Leerzeichen und Sonderzeichen enthalten, die in einer URL nicht erlaubt sind und müssen encodiert werden. Wenn URLs mit Query Strings ausgelesen werden, muss der String decodiert werden.

<script>

    window.location.search = 
      'name=Müller Lüdenscheid&titel=Frühling, Frühling wird es nun bald&id=id17';

</script>

window.location.search erzeugt die URL mit dem fertig encodierten Query-String ?name=M%FCller%20L%FCdenscheid&titel=Fr%FChling,%20Fr%FChling%20wird%20es%20nun%20bald&id=id17 und erzwingt ein Neuladen der Seite.