Aktuelle URL mit JavaScript abrufen?

3003

Ich möchte nur die URL der Website erhalten. Nicht die URL eines Links. Beim Laden der Seite muss ich in der Lage sein, die vollständige, aktuelle URL der Website abzurufen und als Variable festzulegen, die ich nach Belieben verwenden kann.

javascript url Peter Mortensen
quelle

2

Mögliches Duplikat: Protokoll, Domain und Port von URL

abrufen

1

stackoverflow.com/questions/406192/…

Nilesh Botre

3685

Verwenden:

window.location.href

Wie in den Kommentaren erwähnt, funktioniert die folgende Zeile, ist jedoch für Firefox fehlerhaft.

document.URL;

Siehe URL vom Typ DOMString, schreibgeschützt .

Peter Mortensen
quelle

142

In Firefox 12 wird die document.URLEigenschaft nach a nicht window.locationauf einen Anker (#) aktualisiert , während dies der window.location.hrefFall ist. Ich habe hier eine Live-Demo zusammengestellt: jsfiddle.net/PxgKy Ich habe keine anderen Versionen von Firefox getestet. In document.URLChrome 20 und IE9 wurden keine Probleme bei der Verwendung gefunden.

Telmo Marques

88

Sie können auch Gastgeber und klare Lage bekommen: window.location.hostundwindow.location.href.toString().split(window.location.host)[1]

Ali Youhannaei

8

und worum geht es document.baseURIdann? Grundsätzlich gibt es drei Möglichkeiten , um url document.baseURI, document.URL& location.

Muhammad Umer

20

-1: Wenn Sie einen Rahmen, ein Bild oder ein Formular mit haben, name="URL"wird diese Eigenschaft auf dem documentObjekt schattiert und Ihr Code wird unterbrochen. In diesem Fall document.URLwird stattdessen auf den DOM-Knoten verwiesen. Verwenden Sie besser die Eigenschaften des globalen Objekts wie in window.location.href.

Roy Tinker

13

"window.location.href" für den Sieg

GabrielBB

662

URL-Info-Zugriff

JavaScript bietet Ihnen viele Methoden zum Abrufen und Ändern der aktuellen URL, die in der Adressleiste des Browsers angezeigt wird. Alle diese Methoden verwenden das LocationObjekt, das eine Eigenschaft des WindowObjekts ist. Sie können ein neues LocationObjekt mit der aktuellen URL wie folgt erstellen :

var currentLocation = window.location;

Grundlegende URL-Struktur

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

Protokoll: Gibt den Protokollnamen an, mit dem auf die Ressource im Internet zugegriffen werden soll. (HTTP (ohne SSL) oder HTTPS (mit SSL))
Hostname: Der Hostname gibt den Host an, dem die Ressource gehört. 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 auf einem Server ankommt.
Pfadname: Der Pfad enthält Informationen zu der spezifischen Ressource innerhalb des Hosts, auf die der Webclient zugreifen möchte. Zum Beispiel /index.html.
Suche: Eine Abfragezeichenfolge folgt der Pfadkomponente und stellt eine Informationszeichenfolge bereit, die die Ressource für einen bestimmten Zweck verwenden kann (z. B. als Parameter für eine Suche oder als zu verarbeitende Daten).
Hash: Der Ankerteil einer URL enthält das Hash-Zeichen (#).

Mit diesen LocationObjekteigenschaften können Sie auf alle diese URL-Komponenten zugreifen und was sie festlegen oder zurückgeben können:

href - die gesamte URL
Protokoll - das Protokoll der URL
Host - Der Hostname und der Port der URL
Hostname - Der Hostname der URL
Hafen - Die Portnummer, die der Server für die URL verwendet
Pfadname - Der Pfadname der URL
Suche - der Abfrageteil der URL
Hash - der Ankerteil der URL

Ich hoffe du hast deine Antwort bekommen ..

Nikhil Agrawal
quelle

7

Sie sind keine "Methoden" window.location, sondern Eigenschaften, und hier haben wir ein Beispiel : var stringPathName = window.location.pathname.

Peter Krauss

@ FabioC. Sie können es durch entfernen substring. Es kann jedoch nützlich sein, wenn Sie umleiten möchten, um zur document.location = "/page.html";page.html

Stammseite

1

Dies beantwortet mehr als nur die gestellte Frage. Tatsächlich habe ich wahrscheinlich vor ungefähr einem Monat nach einem guten Weg gesucht, um einen oder mehrere bestimmte Teile aus der URL-Zeichenfolge herauszuholen (ich denke, es war wahrscheinlich die aktuelle Seite, die ich zu bekommen versuchte), und obwohl andere Fragen mehr zu beantworten waren -Ziel, ihre Antworten waren für diesen Zweck nicht so nützlich und unkompliziert wie diese.

Panzercrisis

1

Ein kurzer Vorschlag: In der oben beschriebenen grundlegenden URL-Struktur gibt es einen Platz für search, aber in der Liste der Beschreibungen unten heißt es a query. Vielleicht können sie entweder miteinander in Einklang gebracht oder weitere Erklärungen hinzugefügt werden.

Panzercrisis

1

Es heißt "Suche", nicht "Abfrage"

Apollo Data

320

Verwenden Sie diese Option window.locationfür den Lese- und Schreibzugriff auf das Standortobjekt, das dem aktuellen Frame zugeordnet ist. Wenn Sie die Adresse nur als schreibgeschützte Zeichenfolge abrufen möchten, können Sie sie verwenden document.URL, die denselben Wert wie enthalten sollte window.location.href.

Christoph
quelle

19

Siehe auch stackoverflow.com/questions/2430936/…

Christoph

264

Ruft die aktuelle Seiten-URL ab:

window.location.href

Zanoni
quelle

3

Beachten Sie, dass dies der Speicherort des Fensters und nicht der des Dokuments ist.

Gumbo

16

Das ist gleich. Die vollständige aktuelle URL bezieht sich auf den Dokumentpfad (externe Adresse).

Zanoni

2

Ist es standardisiert wie document.url? (Ich meine so etwas wie ein w3c-Dokument)

chendral

documentist das Stammverzeichnis des durch die Spezifikation definierten Dokumentbaums. windowist im Allgemeinen gleichwertig, kann aber unter bestimmten Umständen nicht der Fall sein.

Broinjc

57

OK, das Abrufen der vollständigen URL der aktuellen Seite ist mit reinem JavaScript einfach. Versuchen Sie beispielsweise 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 window.location.hrefEigenschaft 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>

Erweitern Sie das Snippet

Nur nicht schlecht, um auch 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 verwenden window.location.hostname;
und wenn Sie das Protokoll separat erhalten müssen, verwenden Sie window.location.protocol
- Wenn Ihre Seite ein hashTag hat, können Sie es wie folgt erhalten : window.location.hash.

Also window.location.hrefalles auf einmal erledigen ... im Grunde:

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

Auch die Verwendung windowist nicht erforderlich, wenn bereits im Fensterbereich ...

In diesem Fall können Sie also Folgendes verwenden:

location.protocol

location.hostname

location.pathname

location.hash

location.href

Alireza
quelle

window.location.protocol + '//' + window.location.hostname + window.location.pathname + window.location.hash === window.location.href; ist nicht immer wahr! window.location.pathname fehlen GET-Parameter.

Attentat

40

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

Erweitern Sie das Snippet

Sangeet Shah
quelle

35

Öffnen Sie Developer Tools , geben Sie Folgendes in die Konsole ein und drücken Sie die Eingabetaste .

window.location

Beispiel: Unten sehen Sie den Screenshot des Ergebnisses auf der aktuellen Seite.

Holen Sie sich von hier aus, was Sie brauchen. :) :)

tmh
quelle

29

Verwenden Sie : window.location.href.

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

Dorian
quelle

21

Verwenden Sie window.location.hrefdiese Option , um die vollständige URL abzurufen.
Verwenden Sie window.location.pathnamediese Option, um die URL zu erhalten, die den Host verlässt.

Kishore
quelle

4

window.location.pathname enthält keine Abfrage und kein Hash-Fragment

OMGPOP

17

Sie können den aktuellen URL-Speicherort mit einem Hash-Tag abrufen, indem Sie Folgendes verwenden:

JavaScript:

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

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

jQuery :

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

Bhaskar Bhatt
quelle

10

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

Der obige Code kann auch jemandem helfen

Rohan Patil
quelle

2

Sie haben .toLowerCase () auf die URL angewendet, die sie tatsächlich ändert. Einige Server unterscheiden zwischen Groß- und Kleinschreibung (Linux usw.)

AnthonyVO

Sie sollten window.href ausführlich verwenden. Dieser Code funktioniert nur in einem Kontext, in dem dieses === Fenster angezeigt wird. Dies ist jedoch möglicherweise nicht immer der Fall, insbesondere wenn jemand diese Lösung eingefügt hat.

Deadboy

Es sind nicht "einige" Server, bei denen zwischen Groß- und Kleinschreibung unterschieden wird. Es sind die meisten Server. Daher stimme ich AnthonyVO zu: Es ist eine sehr schlechte Idee, den Fall der URL zu ändern.

Mivk

Sie können eine URL nicht toLowerCase (), um sicherzugehen, dass sie nicht beschädigt wird !!! Wenn url ist http://www.server.com/path/to/Script.php?option=A1B2C3, wenn das Dateisystem zwischen Groß- und Kleinschreibung unterscheidet (Linux / Unix), müssen Script.php und script.php nicht unbedingt identisch sein. Und selbst wenn nicht zwischen Groß- und Kleinschreibung unterschieden wird (Windows, einige Mac-Betriebssysteme), ?option=A1B2C3ist dies nicht dasselbe ?option=a1b2c3oder sogar dasselbe ?Option=A1B2C3. Nur der Server unterscheidet nicht zwischen Groß- und Kleinschreibung: www.server.com oder www.SeRvEr.cOm sind identisch.

FrancescoMM

8

Ergebnis zum schnellen Nachschlagen hinzufügen

window.location;

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

document.location

  Location {href: "/programming/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

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

location.hostname

"stackoverflow.com"

Hitesh Sahu
quelle

7

Für eine vollständige URL mit Abfragezeichenfolgen:

document.location.toString().toLowerCase();

Für die Host-URL:

window.location

Syed Nasir Abbas
quelle

11

Sie haben .toLowerCase () auf die URL angewendet, die sie tatsächlich ändert. Einige Server unterscheiden zwischen Groß- und Kleinschreibung (Linux usw.)

AnthonyVO

Wie gesagt, Sie können toLowerCase () keine URL verwenden, um sicherzugehen, dass sie nicht beschädigt wird !!! Wenn die URL server.com/path/to/Script.php?option=A1B2C3 lautet und das Dateisystem zwischen Groß- und Kleinschreibung unterscheidet (Linux / Unix), müssen Script.php und script.php nicht unbedingt identisch sein. Und selbst wenn nicht zwischen Groß- und Kleinschreibung unterschieden wird (Windows, einige Mac-Betriebssysteme), ist? Option = A1B2C3 nicht dasselbe wie? Option = a1b2c3 oder sogar? Option = A1B2C3. Nur der Server unterscheidet nicht zwischen Groß- und Kleinschreibung: www.server.com oder www.SeRvEr.cOm sind identisch.

FrancescoMM

Vielen Dank an AnthonyVO für diesen Hinweis. Wir können nur document.location.toString () verwenden, um die vollständige URL zu erhalten. toLowerCase () sollte wie indexOf in Ihrem Skript vergleichen.

Syed Nasir Abbas

4

In jstl können wir mit auf den aktuellen URL-Pfad zugreifen pageContext.request.contextPath. Wenn Sie einen Ajax-Anruf tätigen möchten, verwenden Sie die folgende URL.

url = "${pageContext.request.contextPath}" + "/controller/path"

Beispiel: Für die Seite wird http://stackoverflow.com/posts/36577223dies geben http://stackoverflow.com/controller/path.

Maleen Abewardana
quelle

4

Der Weg, um das aktuelle Standortobjekt zu erhalten, ist window.location.

Vergleichen Sie dies mit document.location, das ursprünglich nur die aktuelle URL als Zeichenfolge zurückgegeben hat. Wahrscheinlich um Verwirrung zu vermeiden, document.locationwurde durch ersetzt document.URL.

Und alle modernen Browser Karte document.locationzu window.location.

In Wirklichkeit sollten Sie aus Gründen der browserübergreifenden Sicherheit window.locationeher als verwenden document.location.

Josip Ivic
quelle

3

Für diejenigen, die ein tatsächliches URL-Objekt wünschen, möglicherweise für ein Dienstprogramm, das URLs als Argument verwendet:

const url = new URL(window.location.href)

https://developer.mozilla.org/en-US/docs/Web/API/URL

Seph Reed
quelle

3

Die Antwort von Nikhil Agrawal ist großartig. Fügen Sie hier nur ein kleines Beispiel hinzu, das Sie in der Konsole ausführen können, um die verschiedenen Komponenten in Aktion zu sehen:

Wenn Sie möchten, dass die Basis-URL ohne Pfad- oder Abfrageparameter (z. B. um AJAX-Anforderungen für die Arbeit auf Entwicklungs- / Staging- UND Produktionsservern auszuführen), window.location.originist dies am besten, da das Protokoll sowie der optionale Port beibehalten werden (in der Django-Entwicklung manchmal) einen nicht standardmäßigen Port haben, der ihn kaputt macht, wenn Sie nur den Hostnamen usw. verwenden.)

Apollo-Daten
quelle

0

   location.origin+location.pathname+location.search+location.hash;

زياد
quelle

0

Sie können den vollständigen Link der aktuellen Seite über abrufen location.href und den Link des aktuellen Controllers abrufen, indem Sie Folgendes verwenden:

location.href.substring(0, location.href.lastIndexOf('/'));

Khaled Harby
quelle

0

Abrufen der aktuellen URL mit JavaScript:

window.location.toString ();

window.location.href

Hasib Kamal
quelle

0

Wenn Sie auf einen bestimmten Link mit einer ID verweisen, kann Ihnen dieser Code helfen.

$(".disapprove").click(function(){
    var id = $(this).attr("id");

    $.ajax({
        url: "<?php echo base_url('index.php/sample/page/"+id+"')?>",
        type: "post",
        success:function()
        {
            alert("The Request has been Disapproved");
            window.location.replace("http://localhost/sample/page/"+id+"");
        }
    });
});

Ich verwende Ajax hier, um eine ID einzureichen und die Seite mit window.location.replace umzuleiten . Fügen Sie einfach ein Attribut id=""wie angegeben hinzu.

Neugierde
quelle

0

Versuchen

location+''

Code-Snippet anzeigen

let url = location+'';

console.log(url);

Erweitern Sie das Snippet

Kamil Kiełczewski
quelle

-2

Überprüfen Sie zunächst, ob die Seite vollständig geladen ist

browser,window.location.toString();

window.location.href

Rufen Sie dann eine Funktion auf, die URL, URL-Variable und Druck auf der Konsole verwendet.

$(window).load(function(){
   var url = window.location.href.toString();
   var URL = document.URL;
   var wayThreeUsingJQuery = $(location).attr('href');
   console.log(url);
   console.log(URL);
   console.log(wayThreeUsingJQuery );
});

Ashish Kamble
quelle

Aktuelle URL mit JavaScript abrufen?

Antworten: