Uzyskaj aktualny adres URL za pomocą jQuery?


1828

Korzystam z jQuery. Jak uzyskać ścieżkę bieżącego adresu URL i przypisać go do zmiennej?

Przykładowy adres URL:

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


4
Myślę, że pytanie należy przywrócić do pytania o jQuery, ponieważ istnieje na to odpowiedź, niezależnie od tego, czy jQuery jest wymagane do wykonania zadania.
goodeye


3
@goodeye Nie, nie ma sposobu jQuery, aby uzyskać lokalizację; od narzędzia do śledzenia błędów jQuery: »Być może działało, ale nigdy nie było obsługiwane ani dokumentowane. Wystarczy użyć document.location.href, który jest szybszy, prostszy i łatwiejszy do zrozumienia. «Innymi słowy, niektórzy ludzie używali jQuery, aby uzyskać lokalizację, ale polegali raczej na błędzie niż na funkcji. Zobacz: bugs.jquery.com/ticket/7858
chargeela

Odpowiedzi:


2518

Aby uzyskać ścieżkę, możesz użyć:

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
Właściwości obiektu lokalizacji: developer.mozilla.org/en/DOM/window.location
bentford

100
JQuery daleki od zabicia go, dał Javascript nowe życie. Czy nowi programiści C # / Java rozumieją wskaźniki? Nie. Czy muszą? Niezupełnie, nowsze abstrakcje są wystarczająco potężne, aby nie miało to znaczenia ...
ciało

199
„Jak XYZ w jQuery”, a odpowiedź jest prosta: javascript jest dość powszechny. Możesz wiedzieć, jak zrobić coś w zwykłym javascript; jednak ze względu na niespójności przeglądarki możesz to zrobić w sposób „jQuery”. Pamiętam pre-jQuery lub framework Najpierw sprawdziłem przeglądarkę, a następnie robiłem to, co chciałem na kilka sposobów. Podobnie jak jQuery zabija zwykłego js ... tak, dzięki Bogu, ale także czyni go użytecznym.
Parris,

9
to nie działa dla pełnego adresu URL. na przykład. dla „ mail.google.com/mail/u/0/#mbox/13005b79fe72f448 ” zwróci to tylko / mail / u / 0
dwaynemac

12
Ummm, ... window.location.pathname pobiera adres URL tylko do „?” i nie otrzymuje parametrów zapytania, jak zadano w pytaniu.
johntrepreneur

816

W czystym stylu jQuery:

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

Obiekt lokalizacji ma również inne właściwości, takie jak host, skrót, protokół i nazwa ścieżki.


52
Najwyraźniej użycie $ (lokalizacja) w jQuery jest nieobsługiwane i odradzane: bugs.jquery.com/ticket/7858
Peter

10
@Peter Błąd zamknięty jako nieprawidłowy.
kevinji,

21
@ mc10: Część „niepoprawna” dotyczy prośby o wsparcie $ (lokalizacja); NIE należy tego używać.
Peter

6
Ta odpowiedź nie jest potrzebna, a pytanie i odpowiedź można zaktualizować, aby nie używać jquery. Powody można znaleźć tutaj bugs.jquery.com/ticket/7858#comment:4
Vishwanath,

8
@HaralanDobrev: Powinieneś nie być w stanie zrobić .attr()na miejscu. (1) To nie jest element, więc $(location)jest co najwyżej zacieniony, i (2) nawet jeśli zadziałało, powinieneś użyć, .prop()aby uzyskać właściwości. .attr()dotyczy atrybutów 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>');

Działa to tylko wtedy, gdy masz jQuery. Na przykład:

<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
To samo wytłumaczenie, co poprzednie, ale z całym elementem obiektu. Świetna odpowiedź.
Oskar Calvo

4
Powinien być /index.phpzamiast index.phpnazwy ścieżki.
Andrea


2
Według bugs.jquery.com/ticket/7858 działa to tylko przez przypadek. Ponadto, attrma być wykorzystywane wyłącznie na DOM obiektów, za rzeczy, które można ustawić za pomocą atrybutów HTML.
MauganRa

69

Jeśli potrzebujesz parametrów skrótu obecnych w adresie URL, window.location.hrefmoże być lepszym wyborem.

window.location.pathname
=> /search

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

3
Jeśli ktoś potrzebuje tylko skrótu, może wywołać window.location.href
Amit Patel

15
Myślę, że @AmitPatel oznaczawindow.location.hash
ptim

53

Będziesz chciał użyć wbudowanego window.locationobiektu JavaScript .


3
to nie zwróci pozycji po „?” w miejscu.
Majid

@majidgeek działa dla mnie w Firefox, Chrome i IE. Czy możesz podać przypadek testowy tego zerwania?
Barney,

3
może potwierdzić przynajmniej w konsoli, window.location.pathnamektóra niczego nie odzyskuje po?
worc

45

Wystarczy dodać tę funkcję w JavaScript, a zwróci bezwzględną ścieżkę bieżącej ścieżki.

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

Mam nadzieję, że to zadziała dla ciebie.


1
Pomogło to doskonale w przypadku skryptu, w którym leniwie miałem podstawowe zakodowane adresy URL. Wolę nie mieć końcowego „/” w katalogu głównym i wstawiać go do ścieżki, więc właśnie zrobiłem drugą linięvar pathName = loc.pathname.substring(0, loc.pathname.lastIndexOf('/'));
cogdog

40

window.location to obiekt w javascript. zwraca następujące dane

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

w jquery możesz użyć

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

30

Jest to bardziej skomplikowana kwestia, niż wielu może myśleć. Kilka przeglądarek obsługuje wbudowane obiekty lokalizacji JavaScript i powiązane parametry / metody dostępne za pośrednictwem window.locationlub document.location. Jednak różne wersje Internet Explorera (6,7) nie obsługują tych metod w ten sam sposób, ( window.location.href? window.location.replace() Nieobsługiwany), więc musisz mieć do nich różny dostęp, pisząc cały czas kod warunkowy, aby trzymać Internet Explorera.

Tak więc, jeśli masz dostępne i załadowane jQuery, równie dobrze możesz użyć jQuery (lokalizacja), jak inni wspomniani, ponieważ rozwiązuje te problemy. Jeśli jednak przykładowo przekierowujesz geolokalizację po stronie klienta za pomocą JavaScript (to znaczy, używając interfejsu API Map Google i metod obiektu lokalizacji), możesz nie chcieć załadować całej biblioteki jQuery i napisać kod warunkowy, który sprawdza każdą wersję przeglądarki Internet Explorer / Firefox / itp.

Internet Explorer sprawia, że ​​front-end kot jest niezadowolony, ale jQuery to talerz mleka.


Dodatkowo: bugs.jquery.com/ticket/8138 . W źródle jQuery 1.8.0 znajduje się komentarz: // # 8138, IE może zgłosić wyjątek podczas uzyskiwania dostępu do // pola z window.location, jeśli ustawiono document.domain.
Jan Święcki


24

Skrypt java udostępnia wiele metod pobierania bieżącego adresu URL wyświetlanego w pasku adresu przeglądarki.

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

Funkcjonować:

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();
}
  • protokół « Przeglądarki internetowe używają protokołu internetowego, przestrzegając niektórych zasad komunikacji między aplikacjami WebHosted a klientem WWW (przeglądarką). (http = 80 , https (SSL) = 443 , ftp = 21 itd.)

EX: Z domyślnymi numerami portów

<protocol>//<hostname>:<port>/<pathname><search><hash>
https://en.wikipedia.org:443/wiki/Pretty_Good_Privacy
http://stackoverflow.com:80/
  • (//) «Host to nazwa nadana punktowi końcowemu (maszynie, na której znajduje się zasób) w Internecie. www.stackoverflow.com - DNS Adres IP aplikacji (OR) localhost: 8080 - localhost

Nazwy domen są rejestrowane zgodnie z zasadami i procedurami drzewa systemu nazw domen (DNS). Serwery DNS osoby, która zarządza Twoją domeną za pomocą adresu IP do celów adresowania. W hierarchii serwerów DNS nazwą roota stackoverlfow.com jest com.

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

System lokalny musisz utrzymywać domeny, które nie są PUBLICZNE w plikach hosta. localhost.yash.com « localhsot - subdomain(web-server), yash.com - maindomain(Proxy-Server). myLocalApplication.com 172.89.23.777

  • (/) «Ścieżka zawiera informacje o konkretnym zasobie w hoście, do którego klient sieciowy chce uzyskać dostęp
  • (?) «Opcjonalnym zapytaniem jest przekazanie sekwencji par atrybut-wartość oddzielonych separatorem (&).
  • (#) «Opcjonalny fragment jest często atrybutem id określonego elementu, a przeglądarki internetowe przewijają ten element do widoku.

Jeśli parametr ma epokę, ?date=1467708674 użyj.

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

URL wprowadź opis zdjęcia tutaj


Adres URL uwierzytelnienia z nazwą użytkownika: hasło, Jeśli nazwa użytkownika / hasło zawiera symbol @,
taki jak:

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

następnie musisz zakodować adres URL @jako %40. Odnosić się...

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

encodeURI()(vs) encodeURIComponent()przykład

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

Będzie to również działać:

var currentURL = window.location.href;

Daje to pełny adres URL, którego szuka większość osób.
Kemal

19

Możesz zalogować window.location i zobaczyć wszystkie opcje, używając tylko adresu URL:

window.location.origin

dla całej ścieżki użyj:

window.location.href

jest też lokalizacja. _ _

.host
.hostname
.protocol
.pathname

Nie należy go używać, ponieważ location.origin nie działa w Internet Explorerze
Jacek Kolasa


13

Jeśli jest ktoś, kto chce połączyć URL i tag skrótu, połącz dwie funkcje:

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

Aby wyjaśnić: w ogóle nie musisz używać jQuery, powyższa funkcja javascript zwróci to, o co prosił OP?
GHC

12

Mam to, aby usunąć zmienne GET.

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

12

Możesz po prostu pobrać swoją ścieżkę, używając samego js, window.locationlub locationda ci obiekt bieżącego adresu URL

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



11

Aby uzyskać adres URL okna nadrzędnego z poziomu elementu iframe:

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

Uwaga: działa tylko w tej samej domenie


11

Oto przykład, aby uzyskać bieżący adres URL za pomocą jQuery i 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

Zobacz purl.js . To naprawdę pomoże i może być również użyte, w zależności od jQuery. Użyj tego w ten sposób:

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

8

Jeśli chcesz uzyskać ścieżkę do strony głównej, użyj tego:

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

1
nie byłoby to .replace('#.*', '')? Usunąć nie tylko znak skrótu, ale wszystko po nim?
Jonas Kölker,

8

Bardzo często używane 3 najlepsze

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

8

var path = location.pathnamezwraca ścieżkę bieżącego adresu URL (jQuery nie jest potrzebne). Zastosowanie window.locationjest opcjonalne.


8

Wszystkie przeglądarki obsługują obiekt okna JavaScript. Określa okno przeglądarki.

Globalne obiekty i funkcje stają się automatycznie częścią obiektu okna.

Wszystkie zmienne globalne są właściwościami obiektów okien, a wszystkie funkcje globalne są jego metodami.

Cały dokument HTML jest również własnością okna.

Możesz więc użyć obiektu window.location, aby uzyskać wszystkie atrybuty związane z adresem 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
Rozumiem, location.pathnamegdzie używasz location.path- czy ta odpowiedź wymaga aktualizacji?
Edward

@ Edward Zaktualizowano
Sumesh TG

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

2
powinieneś dodać wyjaśnienie do swojej odpowiedzi.
Raptor

5
// get current URL

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

4

W jstl możemy uzyskać dostęp do bieżącej ścieżki URL za pomocą pageContext.request.contextPath, jeśli chcesz wykonać wywołanie ajax,

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

Np .: na stronie http://stackoverflow.com/questions/406192to dahttp://stackoverflow.com/controller/path

Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.