Ricevi l'URL corrente con jQuery?


1830

Sto usando jQuery. Come posso ottenere il percorso dell'URL corrente e assegnarlo a una variabile?

URL di esempio:

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


4
Penso che la domanda dovrebbe essere ripristinata nel chiedere jQuery, poiché esiste una risposta, indipendentemente dal fatto che jQuery sia necessario per eseguire l'operazione.
arrivederci,


3
@goodeye No, non esiste un modo jQuery per ottenere la posizione; a partire dal bug tracker jQuery: »Potrebbe aver funzionato ma non è mai stato supportato o documentato. Usa semplicemente document.location.href che è più veloce, più semplice e più facile da capire. «In altre parole, alcune persone hanno usato jQuery per ottenere la posizione, ma hanno fatto affidamento su un bug, piuttosto che sulla funzione. Vedi: bugs.jquery.com/ticket/7858
feeela,

Risposte:


2520

Per ottenere il percorso, è possibile utilizzare:

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
Proprietà dell'oggetto posizione: developer.mozilla.org/en/DOM/window.location
bentford,

100
Lungi dall'essere ucciso, jQuery ha dato a Javascript una nuova vita. I nuovi programmatori C # / Java comprendono i puntatori? No. Devono farlo? Non proprio, le astrazioni più recenti sono abbastanza potenti da non importare ...
carne

199
"Come posso XYZ in jQuery" e la risposta essendo javascript semplice è abbastanza comune. Potresti sapere come fare qualcosa in javascript semplice; tuttavia, a causa delle incoerenze del browser, potresti preferire farlo nel modo "jQuery". Ricordo che pre-jQuery o framework prima controllavo il browser e poi facevo quello che volevo in una manciata di modi. Quindi jQuery sta uccidendo semplicemente js ... sì, grazie a dio, ma lo sta anche rendendo utilizzabile.
Parris,

9
questo non funziona per l'URL completo. per esempio. per " mail.google.com/mail/u/0/#mbox/13005b79fe72f448 " restituirà solo / mail / u / 0
dwaynemac,

12
Ummm, ... window.location.pathname ottiene solo l'URL su "?" e non ottiene i parametri della query come richiesto nella domanda.
johntrepreneur,

816

In puro stile jQuery:

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

L'oggetto location ha anche altre proprietà, come host, hash, protocollo e nome percorso.


52
Apparentemente, l'utilizzo di $ (posizione) in jQuery non è supportato e sconsigliato: bugs.jquery.com/ticket/7858
Peter

10
@Peter Bug chiuso come non valido.
kevinji,

21
@ mc10: la parte "non valida" si applica alla richiesta di supporto $ (posizione); questo NON dovrebbe essere usato.
Peter,

6
Questa risposta non è necessaria e domande e risposte possono essere aggiornate per non utilizzare jquery. I motivi possono essere trovati qui bugs.jquery.com/ticket/7858#comment:4
Vishwanath

8
@HaralanDobrev: non dovresti essere in grado di fare .attr()sul posto. (1) Non è un elemento, quindi $(location)nella migliore delle ipotesi è ombreggiato e (2) anche se ha funzionato, dovresti usare .prop()per ottenere proprietà. .attr()è per gli attributi HTML.
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>');

Funzionerà solo se hai jQuery. Per esempio:

<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
È la stessa spiegazione di quella precedente, ma con tutto l'elemento dell'oggetto. Bella risposta.
Oskar Calvo,

4
Dovrebbe essere /index.phpinvece che index.phpper il nome percorso.
Andrea


2
Secondo bugs.jquery.com/ticket/7858 questo funziona solo per caso. Inoltre, attrdovrebbe essere usato solo su oggetti DOM, per cose che possono essere impostate usando gli attributi HTML.
MauganRa

69

Se hai bisogno dei parametri hash presenti nell'URL, window.location.hrefpotrebbe essere una scelta migliore.

window.location.pathname
=> /search

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

3
Se qualcuno ha bisogno solo di un tag hash che può chiamare window.location.href
Amit Patel,

15
Penso che @AmitPatel significhiwindow.location.hash
ptim

53

Ti consigliamo di utilizzare l' window.locationoggetto incorporato di JavaScript .


3
questo non restituirà gli articoli dopo '?' in posizione.
Majid

@majidgeek funziona per me su Firefox, Chrome e IE. Potete fornire un caso di prova di questa rottura?
Barney,

3
posso confermare almeno nella console che window.location.pathnamenon recupera nulla dopo il?
worc

45

Basta aggiungere questa funzione in JavaScript e restituirà il percorso assoluto del percorso corrente.

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

Spero che funzioni per te.


1
Questo mi è stato di grande aiuto per uno script in cui pigramente avevo alcuni URL di base codificati. Preferisco non avere il "/" finale sulla radice e inserirlo nel percorso, quindi ho appena fatto la seconda rigavar pathName = loc.pathname.substring(0, loc.pathname.lastIndexOf('/'));
cane da guardia

40

window.location è un oggetto in javascript. restituisce i seguenti dati

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 puoi usare

$(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
che dire windo.location.origin?
Ali Sheikhpour,

30

Questo è un problema più complicato di quanto molti possano pensare. Diversi browser supportano oggetti di posizione JavaScript integrati e parametri / metodi associati accessibili tramite window.locationo document.location. Tuttavia, diverse versioni di Internet Explorer (6,7) non supportano questi metodi allo stesso modo ( window.location.href? window.location.replace()Non supportato), quindi è necessario accedervi in ​​modo diverso scrivendo continuamente il codice condizionale per tenere in mano Internet Explorer.

Quindi, se hai jQuery disponibile e caricato, puoi anche usare jQuery (posizione), come indicato dagli altri perché risolve questi problemi. Se tuttavia, ad esempio, stai eseguendo un reindirizzamento della geolocalizzazione sul lato client tramite JavaScript (ovvero utilizzando l'API di Google Maps e i metodi degli oggetti posizione), potresti non voler caricare l'intera libreria jQuery e scrivere il tuo codice condizionale che controlla ogni versione di Internet Explorer / Firefox / ecc.

Internet Explorer rende il gatto codificante front-end infelice, ma jQuery è un piatto di latte.


Inoltre: bugs.jquery.com/ticket/8138 . Nella fonte jQuery 1.8.0 c'è un commento: // # 8138, IE può generare un'eccezione quando si accede a // un campo da window.location se è stato impostato document.domain.
Jan Święcki,


24

java-script fornisce molti metodi per recuperare l'URL corrente che viene visualizzato nella barra degli indirizzi del browser.

URL di prova:

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

Funzione:

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();
}
  • protocollo « I browser Web utilizzano il protocollo Internet seguendo alcune regole per la comunicazione tra le applicazioni WebHosted e il client Web (browser). (http = 80 , https (SSL) = 443 , ftp = 21, ecc.)

ES: con numeri di porta predefiniti

<protocol>//<hostname>:<port>/<pathname><search><hash>
https://en.wikipedia.org:443/wiki/Pretty_Good_Privacy
http://stackoverflow.com:80/
  • (//) «Host è il nome assegnato a un end-point (macchina su cui risiede la risorsa) su Internet. www.stackoverflow.com - Indirizzo IP DNS di un'applicazione (OR) localhost: 8080 - localhost

I nomi di dominio sono quelli registrati dalle regole e dalle procedure dell'albero DNS (Domain Name System). Server DNS di qualcuno che gestisce il tuo dominio con indirizzo IP a fini di indirizzamento. Nella gerarchia del server DNS il nome root di uno stackoverlfow.com è com.

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

Sistema locale è necessario mantenere i domini che non sono PUBBLICI nei file host. localhost.yash.com « localhsot - subdomain(web-server), yash.com - maindomain(Proxy-Server). myLocalApplication.com 172.89.23.777

  • (/) «Il percorso fornisce informazioni sulla risorsa specifica all'interno dell'host a cui il client Web desidera accedere
  • (?) «Una query facoltativa è passare una sequenza di coppie attributo-valore separate da un delimitatore (&).
  • (#) «Un frammento facoltativo è spesso un attributo id di un elemento specifico e i browser Web scorreranno questo elemento in vista.

Se il parametro ha un Epoch ?date=1467708674 quindi utilizzare.

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

URL inserisci qui la descrizione dell'immagine


URL di autenticazione con nome utente: password, se usernaem / password contiene il simbolo @
come:

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

quindi è necessario codificare l'URL @come %40. Fare riferimento...

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

encodeURI()(vs) encodeURIComponent()esempio

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

Questo funzionerà anche:

var currentURL = window.location.href;

Questo fornisce l'URL completo che la maggior parte delle persone cerca.
Kemal,

19

Puoi registrare window.location e vedere tutte le opzioni, solo per l'uso dell'URL:

window.location.origin

per l'intero percorso utilizzare:

window.location.href

c'è anche posizione. _ _

.host
.hostname
.protocol
.pathname

Non dovresti usarlo perché location.origin non funziona in Internet Explorer
Jacek Kolasa,

15

Ciò restituirà l' URL assoluto della pagina corrente utilizzando JavaScript / jQuery .

  • document.URL

  • $("*").context.baseURI

  • location.href


13

Se c'è qualcuno che vuole concatenare l' URL e il tag hash, combina due funzioni:

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

Per chiarire: non è necessario utilizzare jQuery, la funzione javascript sopra restituirà ciò che l'OP stava chiedendo?
GHC,

12

Ho questo per eliminare le variabili GET.

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

12

Puoi semplicemente ottenere il tuo percorso usando js stesso window.locationo locationti darà l'oggetto dell'URL corrente

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



11

Per ottenere l'URL della finestra principale all'interno di un iframe:

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

NB: funziona solo sullo stesso dominio


11

Ecco un esempio per ottenere l'URL corrente utilizzando jQuery e JavaScript:

$(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 ti darà l' URL correntee puoi estrarre tutto ciò che vuoi da esso ...


9

Vedere purl.js . Ciò sarà di grande aiuto e può anche essere utilizzato, a seconda di jQuery. Usalo in questo modo:

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

8

Se vuoi ottenere il percorso del sito principale, usa questo:

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

1
non sarebbe .replace('#.*', '')? Rimuovere non solo il segno di hash ma anche tutto dopo?
Jonas Kölker,

8

I primi 3 usati molto comunemente sono

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

8

var path = location.pathnamerestituisce il percorso dell'URL corrente (non è necessario jQuery). L'uso di window.locationè facoltativo.


8

Tutti i browser supportano l'oggetto finestra Javascript. Definisce la finestra del browser.

Gli oggetti e le funzioni globali diventano automaticamente parte dell'oggetto finestra.

Tutte le variabili globali sono proprietà degli oggetti finestra e tutte le funzioni globali sono i suoi metodi.

L'intero documento HTML è anche una proprietà di finestra.

Quindi puoi usare l'oggetto window.location per ottenere tutti gli attributi relativi all'URL.

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
Sto vedendo location.pathnamedove stai usando location.path- questa risposta deve essere aggiornata?
Edward

@Edward Aggiornato
Sumesh TG

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

2
dovresti aggiungere qualche spiegazione alla tua risposta.
Raptor,

5
// get current URL

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

4

In jstl possiamo accedere al percorso url corrente usando pageContext.request.contextPath, Se vuoi fare una chiamata Ajax,

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

Es: nella pagina http://stackoverflow.com/questions/406192questo daràhttp://stackoverflow.com/controller/path

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.