Obter URL atual com jQuery?


1830

Estou usando jQuery. Como obtenho o caminho do URL atual e o atribuo a uma variável?

URL de exemplo:

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


4
Eu acho que a pergunta deve ser restaurada para solicitar o jQuery, já que existe uma resposta para isso, independentemente de o jQuery ser necessário para realizar a tarefa.
goodeye

1
possível duplicata de Obter URL atual com JavaScript?
vimal1083

3
@ goodeye Não, não há uma maneira jQuery para obter a localização; como no rastreador de erros do jQuery: »Pode ter funcionado, mas nunca foi suportado ou documentado. Simplesmente use document.location.href, que é mais rápido, mais simples e mais fácil de entender. «Em outras palavras, algumas pessoas usaram o jQuery para obter a localização, mas confiaram em um bug, e não em um recurso. Veja: bugs.jquery.com/ticket/7858
feeela

Respostas:


2520

Para obter o caminho, você pode usar:

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
Propriedades do objeto local: developer.mozilla.org/en/DOM/window.location
bentford

100
Longe de matá-lo, o jQuery deu ao Javascript uma nova vida. Os novos programadores de C # / Java entendem ponteiros? Não. Eles precisam? Na verdade, as abstrações mais recentes são poderosas o suficiente para que isso não importe ..
flesh

199
"Como faço para XYZ no jQuery" e a resposta como javascript simples é bastante comum. Você pode saber como fazer algo em javascript simples; no entanto, devido a inconsistências no navegador, você pode preferir fazê-lo da maneira "jQuery". Lembro-me de pré-jQuery ou framework. Primeiro, eu checava o navegador e depois fazia o que queria de várias maneiras. O jQuery também está matando o js simples ... sim, graças a Deus, mas também o está tornando utilizável.
Parris

9
isso não funciona para o URL completo. por exemplo. para " mail.google.com/mail/u/0/#mbox/13005b79fe72f448 ", isso retornará apenas / mail / u / 0
dwaynemac

12
Ummm, ... window.location.pathname apenas obtém o URL no "?" e não obtém os parâmetros de consulta conforme solicitado na pergunta.
johntrepreneur

816

No estilo jQuery puro:

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

O objeto de localização também possui outras propriedades, como host, hash, protocolo e nome do caminho.


52
Aparentemente, usando $ (local) em jQuery não é suportada e desaconselhadas: bugs.jquery.com/ticket/7858
Peter

10
@ Peter Bug fechado como inválido.
kevinji

21
@ mc10: a parte "inválida" se aplica à solicitação de suporte a $ (local); isso NÃO deve ser usado.
31511 Peter

6
Esta resposta não é necessária e a pergunta e a resposta podem ser atualizadas para não usar o jquery. Os motivos podem ser encontrados aqui bugs.jquery.com/ticket/7858#comment:4
Vishwanath

8
@HaralanDobrev: Você não deve poder fazer .attr()no local. (1) Não é um elemento, por isso $(location)é obscuro, na melhor das hipóteses, e (2) mesmo que funcionasse, você deveria estar usando .prop()para obter propriedades. .attr()é para atributos HTML.
cHao 20/05

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

Isso funcionará apenas se você tiver jQuery. Por exemplo:

<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
É a mesma explicação que a anterior, mas com todo o elemento do objeto. Ótima resposta.
Oskar Calvo

4
Deve ser em /index.phpvez do index.phpnome do caminho.
Andrea Andrea


2
De acordo com bugs.jquery.com/ticket/7858, isso está funcionando apenas por acidente. Além disso, attrdeve ser usado apenas em objetos DOM, para coisas que podem ser definidas usando atributos HTML.
precisa saber é o seguinte

69

Se você precisar dos parâmetros de hash presentes no URL, window.location.hrefpode ser uma escolha melhor.

window.location.pathname
=> /search

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

3
Se alguém precisa apenas de hash tag que pode chamar window.location.href
Amit Patel

15
Acho que @AmitPatel significawindow.location.hash
ptim

53

Você deseja usar o window.locationobjeto interno do JavaScript .


3
isso não retornará itens após '?' no local.
Majid

O @majidgeek funciona para mim no Firefox, Chrome e IE. Você pode fornecer um caso de teste dessa quebra?
Barney

3
pode confirmar pelo menos no console que window.location.pathnamenão recupera nada depois do?
WORC

45

Basta adicionar esta função no JavaScript e ela retornará o caminho absoluto do caminho atual.

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

Espero que funcione para você.


1
Isso ajudou muito para um script em que eu tinha preguiçosamente alguns URLs básicos codificados. Eu prefiro não ter o '/' à direita na raiz e inseri-lo no caminho, então fiz apenas a segunda linhavar pathName = loc.pathname.substring(0, loc.pathname.lastIndexOf('/'));
cogdog

40

window.location é um objeto em javascript. retorna os seguintes dados

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

em jquery você pode usar

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

30

Esta é uma questão mais complicada do que muitos podem pensar. Vários navegadores suportam objetos de localização JavaScript embutidos e parâmetros / métodos associados acessíveis através de window.locationou document.location. No entanto, diferentes tipos de Internet Explorer (6,7) não oferecem suporte a esses métodos da mesma maneira, ( window.location.href? window.location.replace()Não suportado); portanto, você deve acessá-los de maneira diferente, escrevendo código condicional o tempo todo para segurar o Internet Explorer manualmente.

Portanto, se você tiver o jQuery disponível e carregado, poderá usar o jQuery (local), como os outros mencionados, porque resolve esses problemas. Se, no entanto, você estiver fazendo, por exemplo, um redirecionamento de geolocalização do lado do cliente via JavaScript (ou seja, usando a API do Google Maps e os métodos de objeto de localização), não convém carregar a biblioteca jQuery inteira e escrever seu código condicional que verifica todas as versões do Internet Explorer / Firefox / etc.

O Internet Explorer deixa o gato de codificação front-end infeliz, mas o jQuery é um prato de leite.


Adicionalmente: bugs.jquery.com/ticket/8138 . Na fonte do jQuery 1.8.0, há um comentário: // # 8138, o IE pode lançar uma exceção ao acessar // um campo de window.location se document.domain tiver sido definido.
Jan Święcki 30/11/2012


24

O java-script fornece muitos métodos para recuperar o URL atual que é exibido na barra de endereços do navegador.

URL de teste:

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

Função:

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();
}
  • protocolo « Os navegadores da Web usam o Protocolo da Internet seguindo algumas regras de comunicação entre os Aplicativos Hospedados na Web e o Cliente da Web (Navegador). (http = 80 , https (SSL) = 443 , ftp = 21 etc.)

EX: com números de porta padrão

<protocol>//<hostname>:<port>/<pathname><search><hash>
https://en.wikipedia.org:443/wiki/Pretty_Good_Privacy
http://stackoverflow.com:80/
  • (//) «Host é o nome dado a um ponto final (máquina na qual o recurso vive) na Internet. www.stackoverflow.com - Endereço IP DNS de um aplicativo (OR) localhost: 8080 - localhost

Os nomes de domínio são registrados pelas regras e procedimentos da árvore do sistema de nomes de domínio (DNS). Servidores DNS de alguém que gerencia seu domínio com endereço IP para fins de endereçamento. Na hierarquia do servidor DNS, o nome raiz de um stackoverlfow.com é com.

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

Sistema local que você precisa para manter domínios que não são PÚBLICOS nos Arquivos do Host. localhost.yash.com « localhsot - subdomain(web-server), yash.com - maindomain(Proxy-Server). myLocalApplication.com 172.89.23.777

  • (/) «O caminho fornece informações sobre o recurso específico no host que o cliente da Web deseja acessar
  • (?) «Uma consulta opcional é passar uma sequência de pares atributo-valor separados por um delimitador (&).
  • (#) «Um fragmento opcional geralmente é um atributo de id de um elemento específico, e os navegadores da web rolarão esse elemento para exibição.

Se o parâmetro tiver uma época ?date=1467708674 , use.

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

URL insira a descrição da imagem aqui


URL de autenticação com nome de usuário: senha, se usernaem / password contiver @ símbolo
como:

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

Você precisa codificar o URL @como %40. Referir...

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

encodeURI()(vs) encodeURIComponent()exemplo

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

Isso também funcionará:

var currentURL = window.location.href;

Isso fornece o URL completo que a maioria das pessoas procura.
31513 Kemal

19

Você pode registrar window.location e ver todas as opções, apenas para o URL:

window.location.origin

para todo o caminho, use:

window.location.href

também há localização. _ _

.host
.hostname
.protocol
.pathname

Não deve usá-lo porque location.origin não funciona no Internet Explorer
Jacek Kolasa

15

Isso retornará o URL absoluto da página atual usando JavaScript / jQuery .

  • document.URL

  • $("*").context.baseURI

  • location.href


13

Se houver alguém que queira concatenar a URL e a tag hash, combine duas funções:

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

Para esclarecer: você não precisa usar o jQuery, a função javascript acima retornará o que o OP estava pedindo?
GHC

12

Eu tenho isso para retirar as variáveis ​​GET.

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

12

Você pode simplesmente pegar seu caminho usando o próprio js window.locationou locationfornecer o objeto do URL atual

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



11

Para obter o URL da janela pai dentro de um iframe:

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

Nota: só funciona no mesmo domínio


11

Aqui está um exemplo para obter o URL atual usando 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 fornecerá a URL atuale você poderá extrair o que quiser dela ...


9

Veja purl.js . Isso realmente ajudará e também pode ser usado, dependendo do jQuery. Use-o assim:

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

8

Se você deseja obter o caminho do site raiz, use o seguinte:

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

1
não seria .replace('#.*', '')? Remova não apenas a marca de hash, mas também tudo o que está depois dela?
Jonas Kölker

8

Os 3 principais itens mais usados ​​são:

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

8

var path = location.pathnameretorna o caminho da URL atual (o jQuery não é necessário). O uso de window.locationé opcional.


8

Todos os navegadores suportam o objeto da janela Javascript. Ele define a janela do navegador.

Os objetos e funções globais se tornam parte do objeto de janela automaticamente.

Todas as variáveis ​​globais são propriedades de objetos de janela e todas as funções globais são seus métodos.

O documento HTML inteiro também é uma propriedade da janela.

Portanto, você pode usar o objeto window.location para obter todos os atributos relacionados à 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
Estou vendo location.pathnameonde você está usando location.path- esta resposta precisa ser atualizada?
Edward

@Edward Updated
Sumesh TG

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

2
você deve adicionar algumas explicações à sua resposta.
Raptor

5
// get current URL

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

4

No jstl, podemos acessar o caminho da URL atual usando pageContext.request.contextPath: Se você deseja fazer uma chamada ajax,

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

Ex: na página http://stackoverflow.com/questions/406192isso daráhttp://stackoverflow.com/controller/path

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.