Czy masz aktualny adres URL z JavaScript?

Odpowiedzi:

3681

Posługiwać się:

window.location.href 

Jak zauważono w komentarzach, poniższy wiersz działa, ale jest on nieprawidłowy dla przeglądarki Firefox.

document.URL;

Zobacz adres URL typu DOMString, tylko do odczytu .

Peter Mortensen
źródło
142
W przeglądarce Firefox 12 document.URLwłaściwość nie aktualizuje się po window.locationzakotwiczeniu (#), a window.location.hrefrobi to. Przygotowałem tutaj demo na żywo: jsfiddle.net/PxgKy Nie testowałem żadnych innych wersji Firefoksa. document.URLW Chrome 20 i IE9 nie znaleziono problemów z używaniem .
Telmo Marques,
88
możesz także uzyskać hosta i wyczyścić lokalizację: window.location.hostiwindow.location.href.toString().split(window.location.host)[1]
Ali Youhannaei
8
a co document.baseURIwtedy. Zasadniczo istnieją 3 sposoby, aby uzyskać adres URL document.baseURI, document.URL, i location.
Muhammad Umer
20
-1: Jeśli masz ramkę, obraz lub formularz, name="URL"ta właściwość zostanie zacieniona na documentobiekcie, a kod się zepsuje. W takim przypadku document.URLbędzie odwoływał się do węzła DOM. Lepiej używać właściwości obiektu globalnego jak w window.location.href.
Roy Tinker,
13
„window.location.href” dla zwycięstwa
GabrielBB
663

Dostęp do informacji o adresie URL

JavaScript zapewnia wiele metod pobierania i zmiany bieżącego adresu URL, który jest wyświetlany w pasku adresu przeglądarki. Wszystkie te metody wykorzystują Locationobiekt, który jest własnością Windowobiektu. Możesz utworzyć nowy Locationobiekt, który ma bieżący adres URL w następujący sposób:

var currentLocation = window.location;

Podstawowa struktura adresów URL

<protocol>//<hostname>:<port>/<pathname><search><hash>
  • protokół: Określa nazwę protokołu używaną do uzyskania dostępu do zasobu w Internecie. (HTTP (bez SSL) lub HTTPS (z SSL))

  • nazwa hosta: nazwa hosta określa hosta, który jest właścicielem zasobu. Na przykład www.stackoverflow.com. Serwer świadczy usługi przy użyciu nazwy hosta.

  • port: numer portu używany do rozpoznania określonego procesu, do którego ma zostać przekazany Internet lub inna wiadomość sieciowa, gdy dotrze na serwer.

  • nazwa ścieżki: ścieżka zawiera informacje o konkretnym zasobie na hoście, do którego klient sieciowy chce uzyskać dostęp. Na przykład /index.html.

  • wyszukiwanie: ciąg zapytania odpowiada komponentowi ścieżki i zawiera ciąg informacji, które zasób może wykorzystać do określonego celu (na przykład jako parametry wyszukiwania lub dane do przetworzenia).

  • hash: zakotwiczona część adresu URL zawiera znak skrótu (#).

Dzięki tym Locationwłaściwościom obiektu możesz uzyskać dostęp do wszystkich tych składników URL oraz tego, co mogą ustawić lub zwrócić:

  • href - cały adres URL
  • protokół - protokół adresu URL
  • host - nazwa hosta i port adresu URL
  • nazwa hosta - nazwa hosta adresu URL
  • Port - numer portu, którego serwer używa dla adresu URL
  • nazwa ścieżki - nazwa ścieżki adresu URL
  • Szukaj - część zapytania dotycząca adresu URL
  • haszysz - zakotwiczona część adresu URL

Mam nadzieję, że dostałeś swoją odpowiedź ..

Nikhil Agrawal
źródło
7
Oni nie są „metody” o window.location, ale właściwości, a tutaj mamy przykład : var stringPathName = window.location.pathname.
Peter Krauss
@FabioC. Możesz go usunąć przez substring. Może się jednak przydać, gdy chcesz użyć przekierowania, document.location = "/page.html";aby przekierować na stronę głównąpage.html
FindOut_Quran,
1
To więcej niż tylko postawione pytanie. Prawdę mówiąc, szukałem prawdopodobnie około miesiąca temu, aby znaleźć dobry sposób na wydobycie jednej lub więcej określonych części z ciągu adresu URL (myślę, że prawdopodobnie była to bieżąca strona, którą próbowałem uzyskać), i chociaż inne pytania dotyczyły bardziej - cel, ich odpowiedzi nie były tak użyteczne i proste w tym celu jak ten.
Panzercrisis
1
Jedna szybka sugestia: w podstawowej strukturze adresu URL opisanej powyżej jest miejsce na search, ale na poniższej liście opisów nazywa się to query. Być może można je pogodzić lub dodać dodatkowe wyjaśnienia.
Panzercrisis
1
Nazywa się to „wyszukiwanie”, a nie „zapytanie”
Apollo Data
320

Służy window.locationdo dostępu do odczytu i zapisu do obiektu lokalizacji powiązanego z bieżącą ramką. Jeśli chcesz tylko uzyskać adres jako ciąg tylko do odczytu, możesz użyć document.URL, który powinien zawierać taką samą wartość jak window.location.href.

Christoph
źródło
19
patrz także stackoverflow.com/questions/2430936/…
Christoph
264

Pobiera bieżący adres URL strony:

window.location.href
Zanoni
źródło
3
Zauważ, że to lokalizacja okna, a nie dokumentu.
Gumbo
16
To jest to samo. Pełny aktualny adres URL odnosi się do ścieżki dokumentu (adres zewnętrzny).
Zanoni
2
Czy jest znormalizowany jak document.url? (Mam na myśli coś w rodzaju dokumentu w3c)
chendral
documentjest korzeniem drzewa dokumentu zdefiniowanego przez specyfikację. windowjest ogólnie równoważny, ale może nie być w dziwnych okolicznościach.
broinjc,
57

OK, uzyskanie pełnego adresu URL bieżącej strony jest łatwe przy użyciu czystego JavaScript. Na przykład wypróbuj ten kod na tej stronie:

window.location.href;
// use it in the console of this page will return
// http://stackoverflow.com/questions/1034621/get-current-url-in-web-browser"

window.location.hrefWłaściwość zwraca adres URL bieżącej strony.

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>

Nie wspominając o nich również:

  • jeśli potrzebujesz ścieżki względnej, po prostu użyj window.location.pathname;

  • jeśli chcesz uzyskać nazwę hosta, możesz użyć window.location.hostname;

  • a jeśli potrzebujesz uzyskać protokół osobno, użyj window.location.protocol

    • również, jeśli strona ma hashznacznik, można uzyskać to lubią: window.location.hash.

Więc window.location.hrefobsługuje wszystko naraz ... w zasadzie:

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

Również za pomocą window nie jest potrzebne, jeśli jest już w zakresie okna ...

W takim przypadku możesz użyć:

location.protocol

location.hostname

location.pathname

location.hash

location.href

Uzyskaj bieżący adres URL za pomocą JavaScript

Alireza
źródło
window.location.protocol + '//' + window.location.hostname + window.location.pathname + window.location.hash === window.location.href; nie zawsze jest prawdą! window.location.pathname brakuje parametrów GET.
AssassiN
40

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

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

Sangeet Shah
źródło
35

Otwórz Narzędzia programistyczne , wpisz następujące polecenie w konsoli i naciśnij klawisz Enter .

window.location

Np .: poniżej zrzut ekranu wyniku na bieżącej stronie.

wprowadź opis zdjęcia tutaj

Chwyć to, czego potrzebujesz stąd. :)

thh
źródło
29

Zastosowanie: window.location.href.

Jak wspomniano powyżej, document.URL nie aktualizuje się podczas aktualizacji window.location. Zobacz MDN .

dorycki
źródło
21
  • Użyj, window.location.hrefaby uzyskać pełny adres URL.
  • Służy window.location.pathnamedo tego, aby adres URL opuszczał hosta.
Kishore
źródło
4
window.location.pathname nie obejmuje zapytania ani fragmentu skrótu
OMGPOP,
10
var currentPageUrlIs = "";
if (typeof this.href != "undefined") {
       currentPageUrlIs = this.href.toString().toLowerCase(); 
}else{ 
       currentPageUrlIs = document.location.toString().toLowerCase();
}

Powyższy kod może również komuś pomóc

Rohan Patil
źródło
2
Zastosowałeś metodę .toLowerCase () do adresu URL, który faktycznie ją zmienia. W niektórych serwerach rozróżniana jest
wielkość
Powinieneś używać słowa window.href. Ten kod działa tylko w kontekście, w którym to okno ===, ale nie zawsze tak może być, szczególnie jeśli ktoś wkleił to rozwiązanie.
deadboy
W przypadku niektórych „serwerów” rozróżniana jest wielkość liter. To NAJBARDZIEJ serwery. Zgadzam się więc z AnthonyVO: zmiana wielkości liter w adresie URL jest bardzo złym pomysłem.
mivk
Nie możesz toLowerCase () adresu URL, upewniając się, że go nie złamie !!! Jeśli URL jest http://www.server.com/path/to/Script.php?option=A1B2C3, jeśli w systemie plików rozróżniana jest wielkość liter (Linux / Unix), niekoniecznie muszą być takie same Script.php i script.php. I nawet jeśli nie rozróżnia wielkości liter (Windows, niektóre Mac OS), ?option=A1B2C3to nie to samo ?option=a1b2c3, a nawet ?Option=A1B2C3. Tylko serwer nie rozróżnia wielkości liter: www.server.com lub www.SeRvEr.cOm są takie same.
FrancescoMM,
8

Dodanie wyniku do szybkiego odniesienia

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
źródło
7

Aby uzyskać pełny adres URL z ciągami zapytań:

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

W przypadku adresu URL hosta:

window.location
Syed Nasir Abbas
źródło
11
Zastosowałeś metodę .toLowerCase () do adresu URL, który faktycznie ją zmienia. W niektórych serwerach rozróżniana jest
wielkość
Jak już powiedziano, nie można toLowerCase () adresu URL, upewniając się, że go nie złamie !!! Jeśli adres URL to server.com/path/to/Script.php?option=A1B2C3 , jeśli w systemie plików rozróżniana jest wielkość liter (Linux / Unix) niekoniecznie są takie same Script.php i script.php. I nawet jeśli nie rozróżnia wielkości liter (Windows, niektóre Mac OS), opcja? = A1B2C3 nie jest tym samym co opcja? = A1b2c3, a nawet? Opcja = A1B2C3. Tylko serwer nie rozróżnia wielkości liter: www.server.com lub www.SeRvEr.cOm są takie same.
FrancescoMM,
Dziękuję AnthonyVO za wskazanie tego. Możemy użyć tylko document.location.toString (), aby uzyskać pełny adres URL. toLowerCase () miał porównać jak skrypt w skrypcie indexOf.
Syed Nasir Abbas
4

W jstl możemy uzyskać dostęp do bieżącej ścieżki URL za pomocą pageContext.request.contextPath. Jeśli chcesz wykonać połączenie Ajax, użyj następującego adresu URL.

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

Przykład: dla strony http://stackoverflow.com/posts/36577223to da http://stackoverflow.com/controller/path.

Maleen Abewardana
źródło
4

Sposób uzyskania bieżącego obiektu lokalizacji to window.location .

Porównaj to document.location, co pierwotnie zwróciło tylko bieżący adres URL jako ciąg. Prawdopodobnie, aby uniknąć zamieszania, document.locationzostał zastąpiony przezdocument.URL .

I wszystkie nowoczesne przeglądarki map document.locationdowindow.location .

W rzeczywistości dla bezpieczeństwa w różnych przeglądarkach powinieneś używać window.locationzamiast document.location.

Josip Ivic
źródło
3

Odpowiedź Nikhila Agrawala jest świetna, wystarczy dodać tutaj mały przykład, który możesz zrobić w konsoli, aby zobaczyć różne komponenty w akcji:

wprowadź opis zdjęcia tutaj

Jeśli chcesz, aby podstawowy adres URL bez ścieżki lub parametru zapytania (na przykład do wykonywania żądań AJAX przeciwko działał zarówno na serwerach programistycznych / testowych ORAZ, jak i serwerach produkcyjnych), window.location.originnajlepiej jest zachować protokół i opcjonalny port (w rozwoju Django czasami mieć niestandardowy port, który go zepsuje, jeśli użyjesz nazwy hosta itp.)

Dane Apollo
źródło
0
   location.origin+location.pathname+location.search+location.hash;
زياد
źródło
0

Możesz uzyskać pełny link bieżącej strony, location.href a aby uzyskać link do bieżącego kontrolera, użyj:

location.href.substring(0, location.href.lastIndexOf('/'));
Khaled Harby
źródło
0

Uzyskiwanie bieżącego adresu URL za pomocą JavaScript:

  • window.location.toString ();

  • window.location.href

Hasib Kamal
źródło
0

jeśli odwołujesz się do konkretnego linku, który ma identyfikator, ten kod może ci pomóc.

$(".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+"");
        }
    });
});

Korzystam z ajax tutaj, aby przesłać identyfikator i przekierować stronę za pomocą window.location.replace . po prostu dodaj atrybut, id=""jak podano.

ciekawość
źródło
-2

Najpierw sprawdź, czy strona jest całkowicie załadowana

browser,window.location.toString();

window.location.href

następnie wywołaj funkcję, która pobiera adres URL, zmienną URL i drukuje na konsoli,

$(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
źródło