Como recarregar a página com JavaScript (refresh)

Neste artigo você vai aprender a como recarregar a página com JavaScript, ou seja, realizar o refresh na página

Fala programador(a), beleza? Bora aprender mais sobre JavaScript e também a como manipular ações na págima com a linguagem!

Mais uma tarefa super simples de realizar com JS, vamos acessar o objeto location para resolver este problema

Este objeto possui diversas funções para lidarmos com a URL da página e a página em si

No objeto, temos um método chamado reload, que faz exatamente o que seu nome propõe: recarrega a página

Então, veja um exemplo prático da solução do problema:

<button id="refresh">Clique em mim</button>

Formação Recomendada

Formação Vibe Coding

Do Prompt ao Produto: Crie Software Real com IA

• 474 aulas
• 20 projetos
• 39h 27min

Conhecer formação

Neste exemplo, vamos atrelar o reload da página com o click de um botão

Mas você pode inserir em qualquer tipo de evento este método

Veja agora o JavaScript necessário:

var btn = document.querySelector("#refresh");

btn.addEventListener("click", function() {
	
	location.reload();

});

Aqui basicamente mapeamos o botão pelo dom, com o método de querySelector

E depois ativamos um evento de click no mesmo, que executa o método de recarregamento da página

Desta forma, ao clicar neste botão a página será recarregada, simples não é?

Como dito anteriormente, você pode atrelar a qualquer evento desejado!

Conclusão

Neste artigo você aprendeu a como recarregar a página com JavaScript

Utilizamos o objeto location, que lida com a página e a URL da mesma, e o método reload deste objeto

Quando utilizado, o método faz com que a página se recarregue, ou seja, que a ação de refresh aconteça no navegador

No exemplo atrelamos o refresh a um clique, mas você pode colocar em outros eventos também

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

Nem sempre você quer depender de um clique, né?

Às vezes a ideia é a página se recarregar sozinha depois de um tempo, tipo um painel que atualiza os dados de tempos em tempos

Pra isso a gente junta o location.reload com o setTimeout, que dispara uma função depois de um intervalo em milissegundos

Veja na prática:

setTimeout(function() {

location.reload();

}, 5000);

Aqui o 5000 são 5 segundos (1 segundo = 1000 milissegundos)

Quer que recarregue de novo e de novo, em looping? Troca o setTimeout pelo setInterval, que repete no mesmo intervalo

setInterval(function() {

location.reload();

}, 5000);

Só cuidado pra não colocar um tempo muito curto, senão a página fica recarregando sem parar e não dá nem pra usar

Se liga que recarregar não é a mesma coisa que redirecionar, e isso confunde muita gente

location.reload() recarrega a MESMA página que já está aberta

location.href = "outra-pagina.html" leva a pessoa pra uma URL nova e guarda a página anterior no histórico (o botão voltar do navegador funciona)

location.replace("outra-pagina.html") também troca de página, mas NÃO guarda no histórico, então o voltar não retorna pra tela anterior

Ou seja: reload pra atualizar onde você está, href e replace pra ir pra outro lugar

Dá sim, e é bom você conhecer essa alternativa

Com HTML puro tu consegue mandar o navegador recarregar sozinho usando a meta tag refresh dentro do head:

<meta http-equiv="refresh" content="10">

Nesse exemplo a página se recarrega a cada 10 segundos, sem uma linha de JS

É útil pra casos bem simples, tipo um placar ou um painel que só precisa atualizar sozinho

Mas pra qualquer coisa com um pouco mais de controle (recarregar num evento, numa condição, num botão) o JavaScript com location.reload segue sendo a melhor escolha

Junta aqui as dúvidas que mais aparecem:

Precisa escrever window.location.reload ou só location.reload?

Os dois funcionam, o window fica subentendido, então location.reload() já resolve

Tem outro jeito além do reload?

Tem, o history.go(0) também recarrega a página atual, é uma forma alternativa de chegar no mesmo resultado

Como recarregar ao carregar a página?

Basta chamar o location.reload dentro de um evento como o window.onload, mas cuidado pra não criar um looping infinito de recarregamento