CSS, HTML und Javascript mit {stil}

window.location • URL / Adresse der aktuellen Seite

window location

window.location enthält die vollständige aktuelle URL (z.B. http://www.mediaevent.de/javascript/) – die Adresse der Webseite – und kann auf alle Komponenten zugreifen: auf den Query-String von Formularen, den »Hash« eines internen Ankers und den Hostnamen.

Alle Eigenschaften von window.location sind Strings, die Komponenten der URL darstellen. Die URL hat die generelle Form

<protocol>//<host>[:<port>]/<pathname>[<hash>][<search>]
      ^        ^                ^
      |        |                |
    http://www.mediaevent.de/eineseite

document.location / window.location

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 früher 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
var 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

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')) {
      var pre = document.getElementById('f1');
      var 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 = "http://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.