window.location – die URL im Zugriff mit JavaScript

Mit window.location haben wir einen kompletten Zugriff auf die URL der Website. Die URL (sprich Adresse einer Website) hat verschiedene Komponenten wie im folgender https://www.html-seminar.de/javascript.htm?q=suchwort#anfang zu sehen ist.

Die URL und alle Ihre Komponenten kann ausgewertet und verändert werden. Ein erneutes Laden der Website oder einer anderen kann einfach über JavaScript veranlasst werden.

In der Konsole können wir bei einer Website direkt angeben:

window.location

Es funktioniert auch genauso die Angabe ohne window.!

location

Wir können also auf eine ganze Anzahl an Einzelinformationen zugreifen, die unsere URL uns bietet. Eine Auflösung unserer Beispiel-URL:
https://www.html-seminar.de/javascript.htm?q=suchwort#anfang

  • hash: "#anfang"
  • host: "www.html-seminar.de"
  • hostname: "www.html-seminar.de"
  • href: "https://www.html-seminar.de/javascript.htm#anfang"
  • origin: "https://www.html-seminar.de"
  • pathname: "/javascript.htm"
  • port: ""
  • protocol: "https:"

Erklärung zu den einzelnen Werten: was steckt also hinter den Werten (sofern diese nicht selbsterklärend sind):

  • hash: hier sehen wir alles, was mit einem Hash-Zeichen in der URL angehängt ist. Somit sehen wir die typischen Sprungmarken
  • host: Name des Hosts und gegebenenfalls die Portnummer. Wenn keine Postnummer vorhanden ist, ist der folgende „hostname“ identisch
  • hostname: der Name des Severs mit Subdomain. Hier wird man oft das gewohnte www. – aber anderes ist möglich. Auch eine IP-Adresse kann hier auftauchen
  • href: die vollständige URL als String
  • origin: Die „Basis“-URL – also alles vor dem Pfadnamen siehe nächste Angabe
  • pathname: der Pfadname
  • port: die Portnummer, falls vorhanden
  • protocol: das Protokoll mit Doppelpunkt! Hier kann http: oder https: oder file: zum Beispiel stehen
  • search: alles nach dem Fragezeichen (mit dem Fragezeichen)

Auf diese einzelnen Werte kann auch direkt zugegriffen werden, wenn location entsprechend erweitert wird:

window.location.hostname

Liefert dann mit unserer obigen Beispiel-URL als Ergebnis:

"www.html-seminar.de"

Wir können also auf Informationen der URL über JavaScript zugreifen und diese in unserem Programm dann je nach Bedarf verwenden. Manchmal ist auch das Laden einer URL sinnvoll. Wie zeigt der folgende Absatz.

JavaScript zwingt Browser sofort neue URL zu laden

Zwingen hört sich wild an – der Browser wird liebevoll aufgefordert und kommt dann umgehend der Bitte nach, eine neue URL anzuzeigen um den Nutzer mit neuen Inhalten zu beglücken. Wird der JavaScript-Anweisung window.location ein Wert zugewiesen, lädt der Browser sofort die neue Website (egal ob auf derselben URL oder einem komplett anderem Server.

window.location = "https://www.php-kurs.com/erstes-php-programm.htm";

Dabei kann auch auf „https:“ bzw. „http:“ verzichtet werden und die komplette URL startet mit „//“

window.location = "//www.php-kurs.com/erstes-php-programm.htm";

Weitere JavaScript-Anweisungen rund um Laden der URL

Es gibt weitere JavaScript-Befehle für diesen Bereich:

location.assign("https://www.javascript-kurs.de");
location.replace("https://www.javascript-kurs.de");
window.reload()

Die Anweisung location und location.assign macht wenig Unterschied. Allerdings bei location.replace wird die aktuelle Seite geladen und die alte URL aus der Browser-Historie gelöscht. Das hat Auswirkungen auf den Zurück-Button im Browser und auf die Auswertmöglichkeit von history.length (siehe nächstes Kapitel).

Die Anweisung window.reload() erzwingt das neue Laden der aktuellen URL. Daher benötigt diese Anweisungen keine Informationen zwischen den runden Klammern.

„window.location“ versus „document.location“

Am Rande: es ist sowohl ist sowohl mit window.location wie auch mit document.location möglich, die URL auszulesen – allerdings sollte immer window.location verwendet werden, da document.location nach der alten Festlegung nur Auslesbar aber nicht änderbar ist (was bei alten Browserversionen dann ein Problem gibt).

weitere eigene Projekte: