Obter o URL atual com JavaScript?

Respostas:

3686

Usar:

window.location.href

Conforme observado nos comentários, a linha abaixo funciona, mas está corrigida para o Firefox.

document.URL;

Consulte URL do tipo DOMString, somente leitura .

Peter Mortensen
fonte
142
No Firefox 12, a document.URLpropriedade não é atualizada após a window.locationpara uma âncora (#), enquanto o window.location.hreffaz. Eu montei uma demonstração ao vivo aqui: jsfiddle.net/PxgKy Não testei nenhuma outra versão do Firefox. Não document.URLforam encontrados problemas ao usar no Chrome 20 e IE9.
Telmo Marques
88
você também pode obter o host e a localização clara: window.location.hostewindow.location.href.toString().split(window.location.host)[1]
ali youhannaei
8
e o que acontece document.baseURIentão. Basicamente, existem 3 maneiras de obter url document.baseURI, document.URL, e location.
Muhammad Umer 29/08
20
-1: se você tiver um quadro, imagem ou formulário com name="URL"essa propriedade, estará sombreada no documentobjeto e seu código será interrompido. Nesse caso, document.URLfará referência ao nó DOM. Melhor usar as propriedades do objeto global como em window.location.href.
Roy Tinker
13
"window.location.href" para a vitória
GabrielBB 11/07
662

Acesso a informações de URL

O JavaScript fornece vários métodos para recuperar e alterar o URL atual, exibido na barra de endereços do navegador. Todos esses métodos usam o Locationobjeto, que é uma propriedade do Windowobjeto. Você pode criar um novo Locationobjeto que tenha o URL atual da seguinte maneira:

var currentLocation = window.location;

Estrutura básica de URL

<protocol>//<hostname>:<port>/<pathname><search><hash>

  • protocolo: especifica o nome do protocolo a ser usado para acessar o recurso na Internet. (HTTP (sem SSL) ou HTTPS (com SSL))

  • nome do host: o nome do host especifica o host que possui o recurso. Por exemplo www.stackoverflow.com,. Um servidor fornece serviços usando o nome do host.

  • porta: Um número de porta usado para reconhecer um processo específico para o qual uma Internet ou outra mensagem de rede deve ser encaminhada quando chegar a um servidor.

  • nome do caminho: o caminho fornece informações sobre o recurso específico no host que o cliente da Web deseja acessar. Por exemplo /index.html,.

  • pesquisa: uma sequência de consultas segue o componente do caminho e fornece uma sequência de informações que o recurso pode utilizar para algum propósito (por exemplo, como parâmetros para uma pesquisa ou como dados a serem processados).

  • hash: a parte âncora de um URL, inclui o sinal de hash (#).

Com essas Locationpropriedades do objeto, você pode acessar todos esses componentes de URL e o que eles podem definir ou retornar:

  • href - o URL inteiro
  • protocol - o protocolo da URL
  • host - o nome do host e a porta da URL
  • hostname - o nome do host da URL
  • port - o número da porta que o servidor usa para a URL
  • nome do caminho - o nome do caminho da URL
  • search - a parte da consulta do URL
  • hash - a parte âncora do URL

Espero que você tenha a sua resposta ..

Nikhil Agrawal
fonte
7
Eles não são "métodos" de window.location, mas propriedades, e aqui temos um exemplo : var stringPathName = window.location.pathname.
Peter Krauss
@FabioC. Você pode removê-lo por substring. No entanto, pode ser útil quando você deseja usar document.location = "/page.html";o redirecionamento para a página raizpage.html
FindOut_Quran
1
Isso responde mais do que apenas a pergunta indicada. Na verdade, eu procurei, provavelmente há cerca de um mês, uma boa maneira de obter uma ou mais partes específicas da string do URL (acho que provavelmente era a página atual que eu estava tentando obter) e mesmo que outras perguntas estivessem mais Como objetivo, suas respostas não foram tão úteis e objetivas para esse propósito quanto esta.
Panzercrisis 7/01/19
1
Porém, uma sugestão rápida: na estrutura básica de URL descrita acima, há um local para search, mas na lista de descrições abaixo, chama-se a query. Talvez eles possam ser reconciliados ou outras explicações possam ser adicionadas.
Panzercrisis 7/01/19
1
Chama-se 'pesquisa' e não 'consulta'
Apollo Data
320

Use window.locationpara acesso de leitura e gravação ao objeto de local associado ao quadro atual. Se você quiser apenas obter o endereço como uma seqüência de somente leitura, use o document.URLque deve conter o mesmo valor que window.location.href.

Christoph
fonte
19
veja também stackoverflow.com/questions/2430936/…
Christoph
264

Obtém o URL da página atual:

window.location.href
Zanoni
fonte
3
Observe que esse é o local da janela e não o documento.
Gumbo
16
É a mesma coisa. URL atual completo refere-se ao caminho do documento (endereço externo).
Zanoni
2
É padronizado como document.url? (Quero dizer, algo como um documento do W3C)
chendral
documenté a raiz da árvore de documentos definida pela especificação. windowgeralmente é equivalente, mas pode não ser em algumas circunstâncias estranhas.
broinjc 19/09/14
57

OK, é fácil obter o URL completo da página atual usando JavaScript puro. Por exemplo, tente este código nesta página:

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

A window.location.hrefpropriedade retorna o URL da página atual.

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>
Expandir snippet

Não é ruim mencionar isso também:

  • se você precisar de um caminho relativo, basta usar window.location.pathname;

  • se você deseja obter o nome do host, pode usar window.location.hostname;

  • e se você precisar obter o protocolo separadamente, use window.location.protocol

    • Além disso, se sua página tem hashtag, você pode obtê-lo gosto: window.location.hash.

Então window.location.hreflida com tudo de uma vez ... basicamente:

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

Também windownão é necessário usar se já estiver no escopo da janela ...

Portanto, nesse caso, você pode usar:

location.protocol

location.hostname

location.pathname

location.hash

location.href

Obtenha o URL atual com JavaScript

Alireza
fonte
window.location.protocol + '//' + window.location.hostname + window.location.pathname + window.location.hash === window.location.href; nem sempre é verdade! window.location.pathname está ausente nos parâmetros GET.
AssassiN 31/12/19
40

Para obter o caminho, você pode usar:

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
Expandir snippet

Sangeet Shah
fonte
35

Abra Ferramentas do desenvolvedor , digite o seguinte no console e pressione Enter .

window.location

Ex: Abaixo está a captura de tela do resultado na página atual.

insira a descrição da imagem aqui

Pegue o que você precisa daqui. :)

tmh
fonte
29

Use: window.location.href.

Como observado acima, document.URL não é atualizado durante a atualização window.location. Veja MDN .

Dorian
fonte
21
  • Use window.location.hrefpara obter o URL completo.
  • Use window.location.pathnamepara obter o URL que sai do host.
Kishore
fonte
4
window.location.pathname não inclui consulta e haxixe fragmento
omgpop
17

Você pode obter o local atual do URL com uma tag hash usando:

JavaScript:

 // Using href
 var URL = window.location.href;

 // Using path
 var URL = window.location.pathname;

jQuery :

$(location).attr('href');
Bhaskar Bhatt
fonte
10 
var currentPageUrlIs = "";
if (typeof this.href != "undefined") {
       currentPageUrlIs = this.href.toString().toLowerCase(); 
}else{ 
       currentPageUrlIs = document.location.toString().toLowerCase();
}

O código acima também pode ajudar alguém

Rohan Patil
fonte
2
Você aplicou .toLowerCase () ao URL que realmente o altera. Alguns servidores fazem
distinção
Você deve usar verbalmente o window.href. Esse código funciona apenas em um contexto em que esta janela ===, no entanto, isso nem sempre pode ser o caso, especialmente se alguém colou esta solução.
Deadboy 29/05
Não são "alguns" servidores que diferenciam maiúsculas de minúsculas. É a maioria dos servidores. Então, eu concordo com o AnthonyVO: mudar o caso da URL é uma péssima idéia.
mivk
Você não pode enviar um URL para LowCase (), certificando-se de não quebrá-lo !!! Se url http://www.server.com/path/to/Script.php?option=A1B2C3, se o sistema de arquivos faz distinção entre maiúsculas e minúsculas (Linux / Unix), não é necessário que Script.php e script.php sejam os mesmos. E mesmo se não diferencia maiúsculas de minúsculas (Windows, alguns Mac OS), ?option=A1B2C3não é o mesmo ?option=a1b2c3ou mesmo ?Option=A1B2C3. Somente o servidor não diferencia maiúsculas de minúsculas: www.server.com ou www.SeRvEr.cOm são os mesmos.
FrancescoMM
8

Adicionando resultado para referência rápida

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
fonte
7

Para URL completo com cadeias de consulta:

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

Para URL do host:

window.location
Syed Nasir Abbas
fonte
11
Você aplicou .toLowerCase () ao URL que realmente o altera. Alguns servidores fazem
distinção
Como dito, você não pode acessar um URL mais baixo () de uma URL, certificando-se de não quebrá-lo !!! Se url for server.com/path/to/Script.php?option=A1B2C3 , se o sistema de arquivos faz distinção entre maiúsculas e minúsculas (Linux / Unix), não é necessário que Script.php e script.php sejam os mesmos. E mesmo se não diferencia maiúsculas de minúsculas (Windows, alguns Mac OS),? Option = A1B2C3 não é o mesmo de? Option = a1b2c3 ou mesmo? Option = A1B2C3. Somente o servidor não diferencia maiúsculas de minúsculas: www.server.com ou www.SeRvEr.cOm são os mesmos.
FrancescoMM
Obrigado AnthonyVO por apontar isso. Podemos usar apenas document.location.toString () para obter o URL completo. toLowerCase () era comparar como indexOf no seu script.
Syed Nasir Abbas
4

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

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

Exemplo: Para a página que http://stackoverflow.com/posts/36577223será exibida http://stackoverflow.com/controller/path.

Maleen Abewardana
fonte
4

A maneira de obter o objeto de localização atual é window.location.

Compare isso com document.location, que originalmente retornava apenas o URL atual como uma string. Provavelmente para evitar confusão, document.locationfoi substituído por document.URL.

E todos os navegadores modernos mapeiam document.locationpara window.location.

Na realidade, para segurança entre navegadores, você deve usar em window.locationvez de document.location.

Josip Ivic
fonte
3

A resposta de Nikhil Agrawal é ótima, basta adicionar um pequeno exemplo aqui que você pode fazer no console para ver os diferentes componentes em ação:

insira a descrição da imagem aqui

Se você deseja que a URL base sem o caminho ou o parâmetro de consulta (por exemplo, para fazer solicitações AJAX contra funcione nos servidores de desenvolvimento / preparo e produção), window.location.originé melhor, pois mantém o protocolo e a porta opcional (no desenvolvimento do Django, às vezes tenha uma porta não padrão que a quebre se você apenas usar o nome do host etc.)

Apollo Data
fonte
0 
   location.origin+location.pathname+location.search+location.hash;
زي
fonte
0

Você pode obter o link completo da página atual location.href e, para obter o link do controlador atual, use:

location.href.substring(0, location.href.lastIndexOf('/'));
Khaled Harby
fonte
0

Obtendo o URL atual com JavaScript:

  • window.location.toString ();

  • window.location.href

Hasib Kamal
fonte
0

se você está se referindo a um link específico que possui um ID, esse código pode ajudá-lo.

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

Estou usando o ajax aqui para enviar um ID e redirecionar a página usando window.location.replace . basta adicionar um atributo id=""conforme indicado.

curiosidade
fonte
-2

Em primeiro lugar, verifique se a página está completamente carregada no 

browser,window.location.toString();

window.location.href

em seguida, chame uma função que use URL, variável de URL e imprima no console,

$(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
fonte