Aktuelle URL mit jQuery abrufen?


1830

Ich benutze jQuery. Wie erhalte ich den Pfad der aktuellen URL und ordne ihn einer Variablen zu?

Beispiel-URL:

http://localhost/menuname.de?foo=bar&number=0


4
Ich denke, die Frage sollte auf jQuery zurückgesetzt werden, da es eine Antwort darauf gibt, unabhängig davon, ob jQuery erforderlich ist, um die Aufgabe auszuführen.
Goodeye


3
@goodeye Nein, es gibt keine jQuery-Methode, um den Speicherort abzurufen. Stand des jQuery-Bug-Trackers: »Es hat möglicherweise funktioniert, wurde jedoch nie unterstützt oder dokumentiert. Verwenden Sie einfach document.location.href, das schneller, einfacher und verständlicher ist. «Mit anderen Worten, einige Leute verwendeten jQuery, um den Speicherort zu ermitteln, aber sie stützten sich eher auf einen Fehler als auf eine Funktion. Siehe: bugs.jquery.com/ticket/7858
feeela

Antworten:


2520

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

var pathname = window.location.pathname; // Returns path only (/path/example.html)
var url      = window.location.href;     // Returns full URL (https://example.com/path/example.html)
var origin   = window.location.origin;   // Returns base URL (https://example.com)

79
Eigenschaften des Standortobjekts: developer.mozilla.org/en/DOM/window.location
bentford

100
Weit davon entfernt, es zu töten, hat jQuery Javascript ein neues Leben gegeben. Verstehen neue C # / Java-Programmierer Zeiger? Müssen sie? Nicht wirklich, neuere Abstraktionen sind mächtig genug, um keine Rolle zu spielen.
Fleisch

199
"Wie mache ich XYZ in jQuery?" Und die Antwort "einfaches Javascript" ist ziemlich häufig. Sie können wissen, wie man etwas in einfachem Javascript macht; Aufgrund von Browser-Inkonsistenzen können Sie es jedoch vorziehen, dies auf die "jQuery" -Methode zu tun. Ich erinnere mich an Pre-jQuery oder Framework. Ich habe zuerst den Browser überprüft und dann auf eine Handvoll Arten das getan, was ich wollte. Also tötet jQuery einfache js ... ja, Gott sei Dank, aber es macht es auch nutzbar.
Parris

9
Dies funktioniert nicht für die vollständige URL. zum Beispiel. für " mail.google.com/mail/u/0/#mbox/13005b79fe72f448 " wird dies nur / mail / u / 0
dwaynemac

12
Ummm, ... window.location.pathname ruft nur die URL mit dem "?" und erhält die in der Frage gestellten Abfrageparameter nicht.
johntrepreneur

816

Im reinen jQuery-Stil:

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

Das Standortobjekt verfügt auch über andere Eigenschaften wie Host, Hash, Protokoll und Pfadname.


52
Anscheinend wird die Verwendung von $ (Speicherort) in jQuery nicht unterstützt und davon abgeraten: bugs.jquery.com/ticket/7858
Peter

10
@ Peter Bug als ungültig geschlossen.
Kevinji

21
@ mc10: Der "ungültige" Teil gilt für die Anforderung, $ (Speicherort) zu unterstützen. Dies sollte NICHT verwendet werden.
Peter

6
Diese Antwort wird nicht benötigt und Frage und Antwort können aktualisiert werden, um jquery nicht zu verwenden. Gründe finden Sie hier bugs.jquery.com/ticket/7858#comment:4
Vishwanath

8
@ HaralanDobrev: Sie sollten nicht in der Lage sein, .attr()vor Ort zu tun . (1) Es ist kein Element, daher $(location)bestenfalls schattig, und (2) selbst wenn es funktioniert hat, sollten Sie es verwenden .prop(), um Eigenschaften zu erhalten. .attr()ist für HTML-Attribute.
CHao

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

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

var x = $(location).attr('<property>');

Dies funktioniert nur, wenn Sie über jQuery verfügen. Zum Beispiel:

<html>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script>
  $(location).attr('href');      // http://www.refulz.com:8082/index.php#tab2
  $(location).attr('pathname');  // index.php
</script>
</html>

13
Es ist die gleiche Erklärung wie zuvor, aber mit allen Elementen des Objekts. Gute Antwort.
Oskar Calvo

4
Sollte /index.phpstatt index.phpfür den Pfadnamen sein.
Andrea


2
Laut bugs.jquery.com/ticket/7858 funktioniert dies nur aus Versehen. Außerdem attrsoll es nur für DOM-Objekte verwendet werden, für Dinge, die mithilfe von HTML-Attributen festgelegt werden können.
MauganRa

69

Wenn Sie die in der URL window.location.hrefenthaltenen Hash-Parameter benötigen, ist dies möglicherweise die bessere Wahl.

window.location.pathname
=> /search

window.location.href 
 => www.website.com/search#race_type=1

3
Wenn jemand nur ein Hash-Tag benötigt, kann er window.location.href aufrufen
Amit Patel

15
Ich denke, @AmitPatel bedeutetwindow.location.hash
ptim

53

Sie möchten das in JavaScript integrierte window.locationObjekt verwenden.


3
Dies wird keine Artikel nach '?' vor Ort.
Majid

@majidgeek funktioniert für mich in Firefox, Chrome und IE. Können Sie einen Testfall für diesen Bruch liefern?
Barney

3
kann zumindest in der Konsole bestätigen, dass window.location.pathnamenach dem?
worc

45

Fügen Sie diese Funktion einfach in JavaScript hinzu, und der absolute Pfad des aktuellen Pfads wird zurückgegeben.

function getAbsolutePath() {
    var loc = window.location;
    var pathName = loc.pathname.substring(0, loc.pathname.lastIndexOf('/') + 1);
    return loc.href.substring(0, loc.href.length - ((loc.pathname + loc.search + loc.hash).length - pathName.length));
}

Ich hoffe es funktioniert bei dir.


1
Dies half großartig für ein Skript, in dem ich träge einige fest codierte Basis-URLs hatte. Ich bevorzuge es, das nachgestellte '/' nicht auf der Wurzel zu haben und es in den Pfad var pathName = loc.pathname.substring(0, loc.pathname.lastIndexOf('/'));
einzufügen

40

window.location ist ein Objekt in Javascript. Es werden folgende Daten zurückgegeben

window.location.host          #returns host
window.location.hostname      #returns hostname
window.location.path          #return path
window.location.href          #returns full current url
window.location.port          #returns the port
window.location.protocol      #returns the protocol

in jquery können Sie verwenden

$(location).attr('host');        #returns host
$(location).attr('hostname');    #returns hostname
$(location).attr('path');        #returns path
$(location).attr('href');        #returns href
$(location).attr('port');        #returns port
$(location).attr('protocol');    #returns protocol

1
was ist mit windo.location.origin?
Ali Sheikhpour

30

Dies ist ein komplizierteres Problem, als viele vielleicht denken. Mehrere Browser unterstützen integrierte JavaScript-Standortobjekte und zugehörige Parameter / Methoden, auf die über window.locationoder zugegriffen werden kann document.location. Verschiedene Varianten von Internet Explorer (6,7) unterstützen diese Methoden jedoch nicht auf dieselbe Weise ( window.location.href? window.location.replace() Nicht unterstützt), sodass Sie unterschiedlich darauf zugreifen müssen, indem Sie ständig bedingten Code schreiben, um Internet Explorer in der Hand zu halten.

Wenn Sie also jQuery verfügbar und geladen haben, können Sie auch jQuery (Speicherort) verwenden, wie die anderen genannten, da dies diese Probleme behebt. Wenn Sie jedoch beispielsweise eine clientseitige Geolokalisierungsumleitung über JavaScript durchführen (dh mithilfe der Google Maps-API und der Standortobjektmethoden), möchten Sie möglicherweise nicht die gesamte jQuery-Bibliothek laden und Ihren bedingten Code schreiben überprüft jede Version von Internet Explorer / Firefox / etc.

Internet Explorer macht die Front-End-Codierungskatze unglücklich, aber jQuery ist ein Teller Milch.


Zusätzlich: bugs.jquery.com/ticket/8138 . In der jQuery 1.8.0-Quelle gibt es einen Kommentar: // # 8138, IE löst möglicherweise eine Ausnahme aus, wenn // von window.location aus auf ein Feld zugegriffen wird, wenn document.domain festgelegt wurde.
Jan Święcki


24

Java-Skript bietet viele Methoden zum Abrufen der aktuellen URL, die in der Adressleiste des Browsers angezeigt wird.

Test-URL:

http://
stackoverflow.com/questions/5515310/get-current-url-with-jquery/32942762
?
rq=1&page=2&tab=active&answertab=votes
#
32942762
resourceAddress.hash();
console.log('URL Object ', webAddress);
console.log('Parameters ', param_values);

Funktion:

var webAddress = {};
var param_values = {};
var protocol = '';
var resourceAddress = {

    fullAddress : function () {
        var addressBar = window.location.href;
        if ( addressBar != '' && addressBar != 'undefined') {
            webAddress[ 'href' ] = addressBar;
        }
    },
    protocol_identifier : function () { resourceAddress.fullAddress();

        protocol = window.location.protocol.replace(':', '');
        if ( protocol != '' && protocol != 'undefined') {
            webAddress[ 'protocol' ] = protocol;
        }
    },
    domain : function () {      resourceAddress.protocol_identifier();

        var domain = window.location.hostname;
        if ( domain != '' && domain != 'undefined' && typeOfVar(domain) === 'string') {
            webAddress[ 'domain' ] = domain;
            var port = window.location.port;
            if ( (port == '' || port == 'undefined') && typeOfVar(port) === 'string') {
                if(protocol == 'http') port = '80';
                if(protocol == 'https') port = '443';           
            }
            webAddress[ 'port' ] = port;
        }
    },
    pathname : function () {        resourceAddress.domain();

        var resourcePath = window.location.pathname;
        if ( resourcePath != '' && resourcePath != 'undefined') {
            webAddress[ 'resourcePath' ] = resourcePath;
        }
    },
    params : function () {      resourceAddress.pathname();

        var v_args = location.search.substring(1).split("&");

        if ( v_args != '' && v_args != 'undefined')
        for (var i = 0; i < v_args.length; i++) {
            var pair = v_args[i].split("=");

            if ( typeOfVar( pair ) === 'array' ) {
                param_values[ decodeURIComponent( pair[0] ) ] = decodeURIComponent( pair[1] );
            }
        }
        webAddress[ 'params' ] = param_values;
    },
    hash : function () {        resourceAddress.params();

        var fragment = window.location.hash.substring(1);
        if ( fragment != '' && fragment != 'undefined')
            webAddress[ 'hash' ] = fragment;        
    }
};
function typeOfVar (obj) {
      return {}.toString.call(obj).split(' ')[1].slice(0, -1).toLowerCase();
}
  • Protokoll « Webbrowser verwenden das Internetprotokoll, indem sie einige Regeln für die Kommunikation zwischen WebHosted Applications und Web Client (Browser) befolgen. (http = 80 , https (SSL) = 443 , ftp = 21 usw.)

EX: Mit Standardportnummern

<protocol>//<hostname>:<port>/<pathname><search><hash>
https://en.wikipedia.org:443/wiki/Pretty_Good_Privacy
http://stackoverflow.com:80/
  • (//) «Host ist der Name eines Endpunkts (Computer, auf dem sich die Ressource befindet) im Internet. www.stackoverflow.com - DNS- IP-Adresse eines Application (OR) localhost: 8080 - localhost

Domain-Namen werden nach den Regeln und Verfahren des DNS-Baums (Domain Name System) registriert. DNS-Server von jemandem, der Ihre Domain mit IP-Adresse für Adressierungszwecke verwaltet. In der DNS-Serverhierarchie lautet der Stammname eines stackoverlfow.com com.

gTLDs      - com « stackoverflow (OR) in « co « google

Lokales System Sie müssen Domänen verwalten, die in Host-Dateien nicht ÖFFENTLICH sind. localhost.yash.com « localhsot - subdomain(web-server), yash.com - maindomain(Proxy-Server). myLocalApplication.com 172.89.23.777

  • (/) «Der Pfad enthält Informationen zu der spezifischen Ressource innerhalb des Hosts, auf die der Webclient zugreifen möchte
  • (?) «Eine optionale Abfrage besteht darin, eine Folge von Attribut-Wert-Paaren zu übergeben, die durch ein Trennzeichen (&) getrennt sind.
  • (#) «Ein optionales Fragment ist häufig ein ID-Attribut eines bestimmten Elements, und Webbrowser scrollen dieses Element in die Ansicht.

Wenn der Parameter eine Epoche ?date=1467708674 hat, verwenden Sie.

var epochDate = 1467708674; var date = new Date( epochDate );

URL Geben Sie hier die Bildbeschreibung ein


Authentifizierungs-URL mit Benutzername: Passwort, Wenn Benutzername / Passwort ein @ -Symbol enthält
wie:

Username = `my_email@gmail`
Password = `Yash@777`

dann müssen Sie URL kodieren die @wie %40. Verweisen...

http://my_email%40gmail.com:Yash%40777@www.my_site.com

encodeURI()(vs) encodeURIComponent()Beispiel

var testURL = "http:my_email@gmail:Yash777@//stackoverflow.com?tab=active&page=1#32942762";

var Uri = "/:@?&=,#", UriComponent = "$;+", Unescaped = "(-_.!~*')"; // Fixed
var encodeURI_Str = encodeURI(Uri) +' '+ encodeURI( UriComponent ) +' '+ encodeURI(Unescaped);
var encodeURIComponent_Str =  encodeURIComponent( Uri ) +' '+ encodeURIComponent( UriComponent ) +' '+ encodeURIComponent( Unescaped );
console.log(encodeURI_Str, '\n', encodeURIComponent_Str);
/*
 /:@?&=,# +$; (-_.!~*') 
 %2F%3A%40%3F%26%3D%2C%23 %2B%24%3B (-_.!~*')
*/

23

Dies wird auch funktionieren:

var currentURL = window.location.href;

Dies gibt die vollständige URL an, nach der die meisten Leute suchen.
Kemal

19

Sie können window.location protokollieren und alle Optionen anzeigen, nur für die verwendete URL:

window.location.origin

Verwenden Sie für den gesamten Pfad:

window.location.href

Es gibt auch Lage. _ _

.host
.hostname
.protocol
.pathname

Sollte nicht verwendet werden, da location.origin im Internet Explorer nicht funktioniert
Jacek Kolasa


13

Wenn es jemanden gibt, der die URL und das Hash-Tag verketten möchte , kombinieren Sie zwei Funktionen:

var pathname = window.location.pathname + document.location.hash;

Zur Verdeutlichung: Sie müssen jQuery überhaupt nicht verwenden. Die obige Javascript-Funktion gibt zurück, wonach das OP gefragt hat.
GHC

12

Ich habe dies, um die GET-Variablen zu entfernen.

var loc = window.location;
var currentURL = loc.protocol + '//' + loc.host + loc.pathname;

12

Sie können Ihren Pfad einfach mit js selbst abrufen window.locationoder erhalten locationdas Objekt der aktuellen URL

console.log("Origin - ",location.origin);
console.log("Entire URL - ",location.href);
console.log("Path Beyond URL - ",location.pathname);



11

So rufen Sie die URL des übergeordneten Fensters in einem Iframe ab:

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

NB: Funktioniert nur auf derselben Domain


11

Hier ist ein Beispiel, um die aktuelle URL mit jQuery und JavaScript abzurufen:

$(document).ready(function() {

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

    //Pure JavaScript
    var pathname = window.location.pathname;

    // To show it in an alert window
    alert(window.location);
});


$.getJSON("idcheck.php?callback=?", { url:$(location).attr('href')}, function(json){
    //alert(json.message);
});



9

window.location gibt Ihnen die aktuelle URL und Sie können daraus extrahieren, was Sie wollen ...


9

Siehe purl.js . Dies wird wirklich helfen und kann je nach jQuery auch verwendet werden. Verwenden Sie es so:

$.url().param("yourparam");

8

Wenn Sie den Pfad der Stammwebsite abrufen möchten, verwenden Sie Folgendes:

$(location).attr('href').replace($(location).attr('pathname'),'');

1
würde das nicht sein .replace('#.*', '')? Nicht nur das Rautezeichen entfernen, sondern auch alles danach?
Jonas Kölker

8

Sehr häufig verwendete Top 3 sind

1. window.location.hostname 
2. window.location.href
3. window.location.pathname

8

var path = location.pathnameGibt den Pfad der aktuellen URL zurück (jQuery wird nicht benötigt). Die Verwendung von window.locationist optional.


8

Alle Browser unterstützen Javascript-Fensterobjekte. Es definiert das Fenster des Browsers.

Die globalen Objekte und Funktionen werden automatisch Teil des Fensterobjekts.

Alle globalen Variablen sind Eigenschaften von Fensterobjekten und alle globalen Funktionen sind ihre Methoden.

Das gesamte HTML-Dokument ist ebenfalls eine Fenstereigenschaft.

Sie können also das window.location-Objekt verwenden, um alle URL-bezogenen Attribute abzurufen.

Javascript

console.log(window.location.host);     //returns host
console.log(window.location.hostname);    //returns hostname
console.log(window.location.pathname);         //return path
console.log(window.location.href);       //returns full current url
console.log(window.location.port);         //returns the port
console.log(window.location.protocol)     //returns the protocol

JQuery

console.log("host = "+$(location).attr('host'));
console.log("hostname = "+$(location).attr('hostname'));
console.log("pathname = "+$(location).attr('pathname')); 
console.log("href = "+$(location).attr('href'));   
console.log("port = "+$(location).attr('port'));   
console.log("protocol = "+$(location).attr('protocol'));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>


1
Ich sehe, location.pathnamewo Sie verwenden location.path- muss diese Antwort aktualisiert werden?
Edward

@ Edward aktualisiert
Sumesh TG

7
var newURL = window.location.protocol + "//" + window.location.host + "/" + window.location.pathname;

2
Sie sollten Ihrer Antwort eine Erklärung hinzufügen.
Raptor

5
// get current URL

$(location).attr('href');
var pathname = window.location.pathname;
alert(window.location);

4

In jstl können wir auf den aktuellen URL-Pfad zugreifen, indem pageContext.request.contextPathSie Folgendes verwenden : Wenn Sie einen Ajax-Aufruf ausführen möchten,

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

Beispiel: Auf der Seite wird http://stackoverflow.com/questions/406192dies angegebenhttp://stackoverflow.com/controller/path

Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.