So erhalten Sie die aktuelle URL mit JavaScript: Ein Blick unter die Haube

So erhalten Sie die aktuelle URL mit JavaScript: Ein Blick unter die Haube

Stellen Sie sich vor: Sie sitzen am Computer, haben den Browser geöffnet, und in der Adresszeile prangt ein langer Link. Sie möchten, dass Ihr JavaScript-Skript diesen Link „liest“, ihn in seine Bestandteile zerlegt und etwas Nützliches damit anstellt. Eine bekannte Situation? Allerdings! Dies ist eine der häufigsten Fragen auf Stack Overflow – „Get the current URL with JavaScript?“ hat Hunderttausende von Aufrufen erhalten. Warum? Weil kein ernsthaftes Projekt ohne diese Aufgabe auskommt: dynamische Navigation, Analytik, Formulare, AJAX-Anfragen – überall muss man wissen, wo man sich befindet.

In diesem Artikel zeige ich Ihnen nicht nur die magische Zeile window.location.href, sondern werfe einen Blick unter die Haube des Browsers. Sie erfahren, wie das Objekt location aufgebaut ist, welche Eigenschaften es speichert, wie Sie URLs sicher parsen und welche Fallstricke auf Sie warten. Los geht's!

Lernen Sie kennen: Das window.location-Objekt

Jedes Mal, wenn Sie eine Webseite öffnen, erstellt der Browser ein spezielles Objekt – window.location. Es lebt im globalen Namensraum und enthält alle Informationen über die aktuelle URL. Sie müssen nur in der Konsole eingeben:

console.log(window.location);

Sie sehen ein Objekt mit vielen Eigenschaften. Die bekanntesten sind:

\n
• href – die vollständige URL-Zeichenkette (z.B. https://pythonlib.ru/blog?page=2#comments).
\n
• protocol – das Protokoll (https: oder http:).
\n
• hostname – der Hostname (pythonlib.ru).
\n
• port – der Port (falls nicht angegeben, eine leere Zeichenkette).
\n
• pathname – der Pfad zur Datei oder Seite (/blog).
\n
• search – die Abfragezeichenfolge (alles nach ?, z.B. ?page=2).
\n
• hash – der Fragmentbezeichner (alles nach #, z.B. #comments).
\n

Der Browser aktualisiert diese Eigenschaften automatisch, wenn Sie einem Link folgen oder die Adresszeile ändern. Sie können sie nicht einfach überschreiben (naja, fast – dazu später mehr), aber Sie können sie beliebig oft lesen.

So erhalten Sie die vollständige URL: Der einfachste Weg

Wenn Sie die gesamte Zeichenkette benötigen, verwenden Sie die Eigenschaft href:

const currentUrl = window.location.href;\nconsole.log(currentUrl);\n// Ausgabe: "https://pythonlib.ru/blog?page=2#comments"

Dies ist der „Goldstandard“. Er funktioniert in allen Browsern, einschließlich Internet Explorer (ja, er ist in einigen Unternehmensnetzwerken noch am Leben). Merken Sie sich dies als universelle Antwort auf die Frage „Wie erhalte ich die aktuelle URL in JavaScript“.

Die URL in ihre Bestandteile zerlegen: Wozu ist das nötig?

Angenommen, Sie programmieren einen Online-Shop. Sie müssen herausfinden, welche Parameter in der Abfragezeichenfolge übergeben wurden: ?category=books&sort=price. Oder Sie möchten die Seite sanft zu einem Element mit dem Anker #reviews scrollen. Einfach href zu nehmen, reicht nicht. Sie müssen sie in ihre Bestandteile zerlegen.

Der zuverlässigste Weg in modernem JavaScript ist die Verwendung des URL-Konstruktors:

const url = new URL(window.location.href);\nconsole.log(url.searchParams.get('category')); // "books"\nconsole.log(url.hash); // "#reviews"

Das URL-Objekt bietet Zugriff auf die praktische Methode searchParams – einen echten Parser für die Abfragezeichenfolge. Sie können Parameter abrufen, hinzufügen und entfernen, ohne die Zeichenkette manuell zerlegen zu müssen. Unter der Haube verwendet es dieselben Eigenschaften von window.location, bietet aber eine sauberere API.

Unter der Haube: Wie der Browser URLs verarbeitet

Wenn Sie eine Adresse in die Adresszeile des Browsers eingeben, läuft eine ganze Kette von Ereignissen ab. Der Browser zerlegt die Zeichenkette mithilfe eines Algorithmus, der im WHATWG URL Standard beschrieben ist, in ihre Komponenten. Es sieht ungefähr so aus: