Wie kann man die aktuelle URL in JavaScript bekommen

In JavaScript gibt es mehrere Methoden für die Einzeige aktueller URL in der Adressleiste. Alle Methoden verwenden das Objekt Location (enthält Informationen über die aktuelle URL), das eine von den Eigenschaften des Objekts Window ist (liefert die aktuelle Seitenadresse (URL) und leitet den Browser auf eine neue Seite weiter).

Die Eigenschaft Window.location read-only gibt ein Location-Objekt mit Informationen über die aktuelle Position des Dokuments zurück.

Bevor wir verstehen, wie man auf die gesamte URL oder ihre Komponenten zugreift, werfen wir einen Blick auf eine grundlegende URL-Struktur:

<protocol>//<hostname>:<port>/<pathname><search><hash>
  • protocol -der Name des Protokolls wird für den Zugriff auf die Ressource im Internet verwendet. (HTTP, HTTPS, FTP, usw.)
  • hostname - der Hostdem die Ressource gehört.
  • port - eine Portnummer, die verwendet wird, um einen bestimmten Prozess zu erkennen, an den eine Internet- oder andere Netzwerknachricht weitergeleitet werden soll, wenn sie auf einem Server ankommt (die meisten HTTP-URLs lassen die Portnummer weg).
  • pathname - die spezifische Ressource im Host, auf die der Webclient zugreifen will.
  • query - liefert eine Reihe von Informationen, die die Ressource für einen bestimmten Zweck nutzen kann (zum Beispiel als Parameter für eine Suche oder als zu verarbeitende Daten).
  • hash - der Anker-Teil einer URL, enthält das Hash-Zeichen (#).

Verwenden Sie folgende Objekteigenschaften Location, um auf die gesamte URL oder ihre Komponenten zuzugreifen.

  1. window.location.href - um die gesamte URL zu bekommen.
  2. window.location.host - um den Hostnamen und Port der URL zu bekommen
  3. window.location.hostname - um den Hostnamen der URL zu bekommen
  4. window.location.protocol - um das Protokoll der URL in der Adressleiste
  5. window.location.pathname - um den Pfad und Dateinamen der aktuellen Seite zu bekommen
  6. window.location.search - um den Abfrageteil der URL zu bekommen
  7. window.location.hash - um den Ankerteil der URL zu bekommen

Verwenden Sie die Eigenschaft window.location.href, um die komplette URL der aktuellen Seite zu erhalten:

Beispiel

<!DOCTYPE html>
<html>
   <head>
       <title>Title of the document</title>
   </head>
   <body>
      <p id="href"></p>
      <script>
        document.getElementById("href").innerHTML = 
        "The full URL of this page is:<br>" + window.location.href;
     </script>
   </body>
</html>