Como obter a URL atual com JavaScript

Neste artigo você vai aprender a como obter a URL atual com JavaScript, ou seja, resgatar a URL do navegador e colocar em uma variável

Veja este conteúdo em vídeo:

Fala programador(a), beleza? Bora aprender a como resgatar a URL que o usuário está com JavaScript!

Esta tarefa é muito simples com JavaScript, e ainda temos duas abordagens diferentes para atingir o resultado

Uma é utilizando o objeto window, o mesmo que contém as variáveis da aplicação

Nele vamos ter acesso a location e consequentemente href, que contém a URL

Veja um exemplo prático:

console.log(window.location.href);

Agora você pode encapsular este valor em uma variável ou fazer alguma outra lógica que o seu software precisa

A segunda abordagem seria acessando document, que possui uma propriedade URL

E nesta propriedade a URL atual está inserida!

Formação Recomendada

Formação Claude Code

Domine Claude Code do absoluto zero até o avançado

• 120 aulas
• 4 projetos
• 9h 45min

Conhecer formação

Veja um exemplo utilizando document:

console.log(document.URL);

A primeira abordagem é conhecida por funcionar em mais ambientes do que a segunda, mas utilize a que melhor encaixar na sua necessidade

Perceba que essas propriedades são guardadas pelo próprio JavaScript, que em outras funções as utiliza também

O objeto window tem diversas propriedades interessantes que podemos utilizar no nosso programa, o que é o caso de document também

O document é o objeto que sempre iniciamos ao adicionar um evento ao DOM, com o addEventListener, por exemplo

Conclusão

Neste artigo vimos como obter a URL atual com JavaScript

Utilizamos duas abordagens distintas, que nos dão o mesmo resultado

Na primeira utilizamos o objeto window e na segunda document

Confira também nosso catálogo de cursos gratuitos, com aulas semanais no YouTube

E se eu quiser só um pedaço da URL?

Nem sempre tu quer a URL inteira

Às vezes é só o caminho, só o domínio ou só o que vem depois do "?"

O location já guarda cada pedaço separado, então não precisa sair fatiando string com split na mão

console.log(window.location.protocol) // https:
console.log(window.location.host)     // horadecodar.com.br
console.log(window.location.hostname)
console.log(window.location.pathname) // /como-obter-a-url-atual-com-javascript/
console.log(window.location.search)   // ?utm_source=newsletter
console.log(window.location.hash)     // #conclusao
console.log(window.location.origin)   // https://horadecodar.com.br

Cada uma dessas propriedades é uma string, dá pra jogar direto numa variável igual fizemos com o href

Perceba que o document.URL não te dá isso, ele é só a URL inteira em texto

Como pegar os parâmetros da URL sem gambiarra:

O search te devolve a query string crua, com "?" e tudo

Pra ler um parâmetro específico existe coisa bem melhor que split e replace: o URLSearchParams

const params = new URLSearchParams(window.location.search)

console.log(params.get("utm_source"))
console.log(params.has("pagina"))

E se tu preferir tratar a URL como um objeto inteiro, joga ela dentro de new URL()

const url = new URL(window.location.href)

console.log(url.pathname)
console.log(url.searchParams.get("id"))

Bem mais limpo que quebrar string na mão, né? 🙂

Se você conhece o location, pensa no new URL() como a mesma ideia, só que você escolhe qual URL vai analisar, não precisa ser a da barra de endereço

Cuidado: em SPA a URL muda e a sua variável não

Guardar a URL numa variável assim que a página carrega parece esperto

E era suficiente quando quase toda navegação recarregava a página inteira

Só que hoje muita aplicação troca de tela sem refresh nenhum

A URL na barra muda, e a sua variável continua com o valor velho

Já me ferrei uma vez por causa disso, o log mostrava sempre a primeira rota kkk

A regra é simples: leia a URL na HORA que você precisa dela, dentro da função, não uma vez só lá no topo do arquivo

E se você precisa REAGIR à mudança, dá pra escutar o navegador:

window.addEventListener("popstate", () => {
console.log(window.location.href)
})

window.addEventListener("hashchange", () => {
console.log(window.location.hash)
})

Tome cuidado: o popstate dispara quando o usuário usa voltar e avançar do navegador

Navegação disparada por dentro da própria aplicação não avisa por ele, então nesses casos leia a URL no momento do uso

E quando o código roda no servidor?

Esse é o tropeço clássico de quem escreve JavaScript hoje

window e document são objetos do NAVEGADOR

Em código que é renderizado no servidor antes de chegar no usuário, eles simplesmente não existem

Caso este erro apareça:

ReferenceError: window is not defined

É isso: o seu trecho rodou fora do navegador

A saída é checar antes de usar, ou mover a leitura pra um pedaço que só executa no cliente

if (typeof window !== "undefined") {
console.log(window.location.href)
}

Repare que o mesmo vale pro document.URL, ele também depende do navegador

window.location.href ou document.URL: qual usar?

Os dois te entregam a URL atual, então a escolha é por CONTEXTO

O document.URL é só leitura, ele te devolve a URL em texto e ponto final

O window.location é um objeto: além do href, ele te dá as partes separadas (pathname, search, hash) e ainda serve pra mandar o usuário pra outra página

// só leitura
const atual = document.URL

// leitura e navegação
window.location.href = "https://horadecodar.com.br"

Na dúvida, vai de window.location.href

É o mais versátil e é o que você vai encontrar na maioria dos códigos por aí