Website-Suche

Die aktuelle URL mit JavaScript abrufen?

Alles, was ich möchte, ist die URL der Website zu erhalten. Nicht die URL, die von einem Link genommen wurde. Beim Laden der Seite muss ich in der Lage sein, die vollständige, aktuelle URL der Website zu erfassen und sie als Variable festzulegen, um damit zu tun, was ich möchte.

Antwort #1

Verwenden :

window.location.href

Wie in den Kommentaren erwähnt, funktioniert die folgende Zeile, aber sie ist in Firefox fehlerhaft.

document.URL

Siehe URL vom Typ DOMString, schreibgeschützt.

Antwort #2

URL-Infozugriff

JavaScript bietet Ihnen viele Methoden, um die aktuelle URL abzurufen und zu ändern, die in der Adressleiste des Browsers angezeigt wird. Alle diese Methoden verwenden das Location-Objekt, das eine Eigenschaft des Window-Objekts ist. Sie können das aktuelle Location-Objekt lesen, indem Sie window.location auslesen:

let currentLocation = window.location;

Grundlegende URL-Struktur

<protocol>//<hostname>:<port>/<pathname><search><hash>

  • Protokoll: Gibt den Namen des Protokolls an, das verwendet werden soll, um auf die Ressource im Internet zuzugreifen. (HTTP (ohne SSL) oder HTTPS (mit SSL))

  • hostname: Der Hostname gibt den Host an, der die Ressource besitzt. Zum Beispiel www.stackoverflow.com. Ein Server stellt Dienste unter Verwendung des Hostnamens bereit.

  • Port: Eine Portnummer, die verwendet wird, um einen bestimmten Prozess zu erkennen, an den eine Internet- oder andere Netzwerknachricht weitergeleitet werden soll, wenn sie bei einem Server ankommt.

  • Pfadname: Der Pfad gibt Informationen über die spezifische Ressource innerhalb des Hosts, auf die der Webclient zugreifen möchte. Zum Beispiel /index.html.

  • Suche: Ein Abfrage-String folgt dem Pfadbestandteil und liefert eine Zeichenfolge 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 Ankerteil einer URL, einschließlich des Hash-Zeichens (#).

Mit diesen Location-Objekteigenschaften können Sie auf all diese URL-Komponenten zugreifen und was sie setzen oder zurückgeben können:

  • href - die vollständige URL - z. B. window.location.href
  • Protokoll - das Protokoll der URL
  • host - der Hostname und der Port der URL
  • hostname - der Hostname der URL
  • Port - die Portnummer, die der Server für die URL verwendet
  • pathname - der Pfadname der URL
  • search - der Abfrageabschnitt der URL
  • hash - der Ankerteil der URL
  • Ursprung - das window.location.protocol + '//' + window.location.host

Antwort #3

Verwenden Sie window.location, um Lese- und Schreibzugriff auf das Standortobjekt zu erhalten, das mit dem aktuellen Frame verbunden ist. Wenn Sie nur die Adresse als schreibgeschützte Zeichenfolge erhalten möchten, können Sie document.URL verwenden, das denselben Wert wie window.location.href enthalten sollte.

Antwort #4

Ruft die aktuelle Seiten-URL ab:

window.location.href

Antwort #5

OK, die volle URL der aktuellen Seite mit reinem JavaScript zu bekommen ist einfach. Zum Beispiel, probiere diesen Code auf dieser Seite:

window.location.href;
// use it in the console of this page will return
// http://stackoverflow.com/questions/1034621/get-current-url-in-web-browser"

Die Eigenschaft window.location.href gibt die URL der aktuellen Seite zurück.

document.getElementById("root").innerHTML = "The full URL of this page is:<br>" + window.location.href;
<!DOCTYPE html>
<html>

<body>
  <h2>JavaScript</h2>
  <h3>The window.location.href</h3>
  <p id="root"></p>
</body>

</html>

Es ist auch nicht schlecht, diese zu erwähnen:

  • Wenn Sie einen relativen Pfad benötigen, verwenden Sie einfach window.location.pathname;

  • Wenn Sie den Hostnamen erhalten möchten, können Sie window.location.hostname verwenden;

  • und wenn Sie das Protokoll separat abrufen müssen, verwenden Sie window.location.protocol

  • also, wenn deine Seite einen hash-Tag hat, kannst du ihn so bekommen: window.location.hash.

Also window.location.href erledigt alles auf einmal... im Grunde:

window.location.protocol + '//' + window.location.hostname + window.location.pathname + window.location.hash === window.location.href;
    //true

Die Verwendung von window ist also nicht erforderlich, wenn man sich bereits im Window-Bereich befindet...

Also kannst du in diesem Fall verwenden:

location.protocol

location.hostname

location.pathname

location.hash

location.href

Antwort #6

Öffnen Sie die Entwicklertools, geben Sie Folgendes in die Konsole ein und drücken Sie Enter.

window.location

Beispiel: Unten ist der Screenshot des Ergebnisses auf der aktuellen Seite.

Antwort #7

Um den Pfad zu erhalten, können Sie Folgendes verwenden:

console.log('document.location', document.location.href);
console.log('location.pathname',  window.location.pathname); // Returns path only
console.log('location.href', window.location.href); // Returns full URL

Antwort #8

Verwendung: window.location.href.

Wie oben erwähnt, document.URL aktualisiert sich nicht, wenn window.location aktualisiert wird. Siehe MDN.

Antwort #9

Um den Pfad zu erhalten, können Sie Folgendes verwenden:

http://www.example.com:8082/index.php#tab2?foo=789

Property                    Result
------------------------------------------
window.location.host        www.example.com:8082
window.location.hostname    www.example.com
window.location.port        8082
window.location.protocol    http:
window.location.pathname    index.php
window.location.href        http://www.example.com:8082/index.php#tab2
window.location.hash        #tab2
window.location.search      ?foo=789
window.location.origin      https://example.com

Antwort #10

  • Verwende window.location.href, um die vollständige URL zu erhalten.
  • Verwenden Sie window.location.pathname, um die URL ohne den Host zu erhalten.

Antwort #11

// http://127.0.0.1:8000/projects/page/2?name=jake&age=34
let url = new URL(window.location.href);
/*
hash: ""

host: "127.0.0.1:8000"

hostname: "127.0.0.1"

href: "http://127.0.0.1:8000/projects/page/2?username=jake&age=34"

origin: "http://127.0.0.1:8000"

password: ""

pathname: "/projects/page/2"

port: "8000"

protocol: "http:"

search: "?name=jake&age=34"

username: ""
*/

url.searchParams.get('name')
// jake

url.searchParams.get('age')
// 34

url.searchParams.get('gender')
// null

Antwort #12

Sie können die aktuelle URL-Adresse mit einem Hash-Tag erhalten, indem Sie Folgendes verwenden:

JavaScript:

// Using href
var URL = window.location.href;

// Using path
var URL = window.location.pathname;

jQuery:

$(location).attr('href');

Antwort #13

Für die vollständige URL mit Abfragezeichenfolgen:

document.location.toString()

Für Host-URL:

window.location

Antwort #14

window.location:

 Location {href: "https://stackoverflow.com/questions/1034621/get-the-current-url-with-javascript",
 ancestorOrigins: DOMStringList,
 origin: "https://stackoverflow.com",
 replace: ƒ, assign: ƒ, …}

dokument.standort:

  Location {href: "https://stackoverflow.com/questions/1034621/get-the-current-url-with-javascript", 
ancestorOrigins: DOMStringList,
 origin: "https://stackoverflow.com",
 replace: ƒ, assign: ƒ
, …}

window.location.pathname:

"/questions/1034621/get-the-current-url-with-javascript"

window.location.href:

"https://stackoverflow.com/questions/1034621/get-the-current-url-with-javascript"

location.hostname:

"stackoverflow.com"

Antwort #15

var currentPageUrlIs = "";
if (typeof this.href != "undefined") {
       currentPageUrlIs = this.href.toString().toLowerCase(); 
}else{ 
       currentPageUrlIs = document.location.toString().toLowerCase();
}

Antwort #16

Die Antwort von Nikhil Agrawal ist großartig, ich füge hier nur ein kleines Beispiel hinzu, das du in der Konsole ausprobieren kannst, um die verschiedenen Komponenten in Aktion zu sehen:

Wenn Sie die Basis-URL ohne Pfad oder Abfrageparameter möchten (zum Beispiel, um AJAX-Anfragen zu stellen, die sowohl auf Entwicklungs-/Staging- als auch auf Produktionsservern funktionieren), ist window.location.origin am besten, da es sowohl das Protokoll als auch den optionalen Port beibehält (in der Django-Entwicklung hat man manchmal einen nicht standardmäßigen Port, der es kaputt macht, wenn man nur den Hostnamen usw. verwendet).

Verwandte Artikel