window.location • URL / Adresse der aktuellen Webseite

Window Location – Adresse oder URL des aktuellen Browserfenster

window.location, document.location und document.URL geben die vollständige URL (z.B. https://www.mediaevent.de/javascript/) – die Adresse der Webseite – zurück. Javascript kann auf alle Komponenten zugreifen: auf den Query-String von Formularen, den »Hash« eines internen Ankers und den Hostnamen.

23-02-02 SITEMAP CSS HTML JS Basis JS Web Tutorial SVG

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.

hash String für einen Anker, der mit einem Hash-Zeichen beginnt
let anker = window.location.hash;
hostString aus Hostname und Portnummer
wisotop.de:80
hostnameName des Servers, der Subdomaine, Domainname oder IP-Adresse
hrefString mit der vollständigen URL
originKomfort-String mit Protokoll, Hostname and Portnummer der URL (nicht IE)
pathnameTeilstring der URL, Pfadnamen zur einer Resource
portPortnummer für die Kommunikation mit dem Server
protocolProtokoll mitsamt dem ersten Doppelpunkt – z.B. http:, https: oder file: (wenn die Webseite lokal gespeichert ist).
searchQuery-String, der mit einem Fragezeichen beginnt.

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.