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&amp;number=0

javascript jquery url Venkatachalam
quelle

1

Sie können auch tech-blog.maddyzone.com/javascript/…

Rituraj ratan

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

1

Mögliches Duplikat von Aktuelle URL mit JavaScript abrufen?

vimal1083

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

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)

Ryan Doherty
quelle

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.

Boris Guéry
quelle

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>

rizon
quelle

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

4

+1 jQuery ist der beste Qualitätscode aller Zeiten, wenn Sie ihn nicht verwenden, sind Sie ein Idiot. jQuery ist definitiv der richtige Weg. </ sarcasm>

Oriol

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

jlfenaux
quelle

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.

clawr
quelle

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.

Neville Bonavia
quelle

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

Gaurav
quelle

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.

Negutron
quelle

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

28

Verwenden Sie nur für den Hostnamen:

window.location.hostname

Mahmoud Farahat
quelle

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

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%[email protected]_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 (-_.!~*')
*/

Yash
quelle

23

Dies wird auch funktionieren:

var currentURL = window.location.href;

Suresh Pattu
quelle

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

Dacopenhagen
quelle

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

Jacek Kolasa

15

Dadurch wird die absolute URL der aktuellen Seite mit JavaScript / jQuery zurückgegeben .

document.URL
$("*").context.baseURI
location.href

Riyaz Hameed
quelle

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;

Nis
quelle

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;

Aram Kocharyan
quelle

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);

Erweitern Sie das Snippet

Mohideen bin Mohammed
quelle

11

 var currenturl = jQuery(location).attr('href');

Hari Maliya
quelle

11

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

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

NB: Funktioniert nur auf derselben Domain

Costa
quelle

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);
});

Peter Mortensen
quelle

10

Im Folgenden finden Sie Beispiele für nützliche Codefragmente, die verwendet werden können. Einige Beispiele verwenden Standard-JavaScript-Funktionen und sind nicht spezifisch für jQuery:

Siehe 8 nützliche jQuery-Snippets für URLs und Querystrings .

Issamovitch
quelle

10

Verwenden Sie window.location.href . Dadurch erhalten Sie die vollständige URL .

Saikumar Anireddy
quelle

9

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

ZMR BINU
quelle

9

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

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

Chuanshi Liu
quelle

8

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

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

vikas mehta
quelle

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

Nitish Kumar Pal
quelle

8

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

Jonathan Lin
quelle

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

Erweitern Sie das Snippet

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>

Erweitern Sie das Snippet

Sumesh TG
quelle

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;

Hema Ganapathy
quelle

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);

Ayan Chakraborty
quelle

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

Maleen Abewardana
quelle

Aktuelle URL mit jQuery abrufen?

Antworten: