window.location • URL / Adresse der aktuellen Webseite

URL – Uniform Resource Locator

Formulare und Anwendungen im Allgemeinen 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

URL und Query String

Wenn Daten mit GET 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.

new URL() – URL anlegen und analysieren

window
 ├── URL             (Konstruktor)
 │     ├── searchParams   (Instanz-Eigenschaft)
 │     └── toString()     (serialisiert sauber)
 │
 ├── URLSearchParams (Konstruktor)
 │
 ├── encodeURI()
 ├── decodeURI()
 ├── encodeURIComponent()
 └── decodeURIComponent()

Die moderne Methode, eine URL zu analysieren:

const url = new URL("https://bestcream.de/shop/products?cat=icecream&sort=price");

console.log(url.hostname);     // "bestcream.de"
console.log(url.pathname);     // "/shop/products"
console.log(url.search);       // "?cat=icecream&sort=price"
console.log(url.searchParams); // URLSearchParams Objekt

Und ebenfalls ohne viel Federlesens, ohne in Strings herumzustochern:

const url = new URL("/search", "https://bestcream.de");

url.searchParams.set("q", "Bayerische Creme");
url.searchParams.set("sort", "popular");

console.log(url.toString());

Das liefert einfach

https://bestcream.de/search?q=Bayerische+Creme&sort=popular

URLSearchParams – Query-Parameter

Früher wurde encodeURIComponent() für

• Query-Parameter
• Formularwerte
• Suchbegriffe
• Tags, Kategorien usw.

genutzt. Heute gibt es das elegantere URLSearchParams, das die Query-Parameter (?key=value) ohne String-Parsing liest, ändert und löscht.

const params = new URLSearchParams("?cat=icecream&sort=price");

console.log(params.get("cat"));   // "icecream"
console.log(params.get("sort"));  // "price"

Parameter setzen oder ändern

params.set("sort", "newest");
console.log(params.toString());
// "cat=icecream&sort=newest"

Alles wird korrekt encodiert, und zwar ohne encodeURIComponent():

const url = new URL("https://ivent.de/");
url.searchParams.set("q", "Bayerische Creme & Kuchen");

console.log(url.toString());
// https://ivent.de/?q=Bayerische+Creme+%26+Kuchen

URLSearchParams erspart komplett das manuelle, fehleranfällige Parsen und »Herumfummeln« an Query-Strings. Bis URLSearchParams auftrat, war viel Handarbeit angesagt:

• selbst den ?-Teil abtrennen
• selbst Splitten nach &
• selbst Splitten nach =
• selbst decodeURIComponent auf jeden Wert anwenden
• beim Schreiben selbst korrekt kodieren
• auf Sonderfälle achten (leere Werte, doppelte Parameter, Reihenfolge, Encoding …)

Heute reicht

const params = new URLSearchParams(window.location.search);

console.log(params.get("q"));
params.set("page", 5);

window.history.replaceState({}, "", "?" + params.toString());

URLSearchParams übernimmt

• Parsen
• Kodieren
• Dekodieren
• Re-Stringify
• Handling von mehrfachen Parametern
• Umgang mit leeren Parametern
• Reihenfolge beibehalten
• Korrektes UTF-8 Encoding

const url = new URL("https://www.mediaevent.de/javascript/Javascript-Window-Location.html#URLSearchParams?a=17");

const fragment = url.hash.substring(1);   
const [fragmentId, fragmentQuery] = fragment.split("?");
let arr = [];
if (fragmentQuery) {
  const params = new URLSearchParams(fragmentQuery);
  arr = [...params.entries()]
}

const lastPart = url.pathname.split("/").pop();
const pathname = url.pathname;

const folder = pathname.substring(0, pathname.lastIndexOf("/") + 1);

document.querySelector(".parts").innerHTML = `
Protocol:  ${url.protocol}
Host:      ${url.host} 
Path:      ${url.pathname} 
Hash:      ${url.hash}
fragment:  ${arr}
lastPart:  ${url.pathname.split("/").pop()} 
Ordner:    ${folder}`;

URL, URI und URN

URL (Uniform Resource Location)

Der Speicherort, unter dem eine Ressource erreichbar ist – also mit Protokoll und Pfad.
https://www.mydomain.de/zeichnungen/schmetterling.jpg

URI (Uniform Resource Identifier)

Allgemeiner Begriff für etwas, das eine Ressource im Internet (oder in einem anderen Namensraum) eindeutig identifiziert.
mailto:info@example.com
https://example.com/page.html

URN (Uniform Resource Name)

URI ohne Ort, nur Name
urn:isbn:9783161484100

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.

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)