Como posso atualizar uma página com jQuery?

2453

Como posso atualizar uma página com jQuery?

luca
fonte
29
Como o jQuery é uma estrutura de javascript para fácil manipulação do DOM e associação de eventos, eu recomendaria que você solicitasse o javascript em vez do jQuery.
WoIIe
19
Você não precisa do jQuery para isso.
Stardust
13
Mais relevante do que nunca: needsmorejquery.com
Kartik Chugh
@ Stardust Você não precisa do jQuery para qualquer coisa que faça com o jQuery por causa de tudo o que é possível com JavaScript, se você puder fazê-lo.
Eu sou a pessoa mais idiota

Respostas:

3828

Use location.reload():

$('#something').click(function() {
    location.reload();
});

A reload()função usa um parâmetro opcional que pode ser definido truepara forçar uma recarga do servidor em vez do cache. O parâmetro é padronizado como false, portanto, por padrão, a página pode ser recarregada do cache do navegador.

Roy
fonte
29
Isso não funcionou para mim. Isso funcionou: window.location.href = window.location.href;
Yster 8/12/15
5
Isso não funcionou para mim. window.location.href=window.location.href;e location.href=location.href;trabalhou.
Twharmon # 6/16
23
window.location.reload(true);será difícil atualizar, caso contrário, por padrão é falso
Sagar Naliyapara
@ Sagar N, isso também funciona para mim. Obrigado. Eu tentei muito nos últimos dias com uma abordagem diferente, mas sua solução me salvou.
precisa
1
@FaridAbbas location.reload();é javascript padrão. Você não precisa do jQuery para isso.
Mark Baijens 02/01
457

Isso deve funcionar em todos os navegadores, mesmo sem o jQuery:

location.reload();
Thorben
fonte
450

Existem várias maneiras ilimitadas de atualizar uma página com JavaScript:

  1. location.reload()
  2. history.go(0)
  3. location.href = location.href
  4. location.href = location.pathname
  5. location.replace(location.pathname)
  6. location.reload(false)

    Se precisássemos extrair o documento do servidor da Web novamente (como onde o conteúdo do documento muda dinamicamente), passaríamos o argumento como true.

Você pode continuar a lista sendo criativa:

  • window.location = window.location
  • window.self.window.self.window.window.location = window.location
  • ... e outras 534 maneiras

var methods = [
  "location.reload()",
  "history.go(0)",
  "location.href = location.href",
  "location.href = location.pathname",
  "location.replace(location.pathname)",
  "location.reload(false)"
];

var $body = $("body");
for (var i = 0; i < methods.length; ++i) {
  (function(cMethod) {
    $body.append($("<button>", {
      text: cMethod
    }).on("click", function() {
      eval(cMethod); // don't blame me for using eval
    }));
  })(methods[i]);
}
button {
  background: #2ecc71;
  border: 0;
  color: white;
  font-weight: bold;
  font-family: "Monaco", monospace;
  padding: 10px;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.5s ease;
  margin: 2px;
}
button:hover {
  background: #27ae60;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Ionică Bizău
fonte
10
+1 para a lista e jsfiddle. Eu tenho uma pergunta: nos jsfiddle 1 e 6, a página gerada desaparece por um momento enquanto é recarregada, e 2-5, a atualização da página é "imperceptível". Na ferramenta dev no chrome, posso ver a página sendo regenerada, mas você poderia explicar o processo de redesenho sendo defferente? por favor. Agradeço antecipadamente.
Cԃ ա ԃ
@ Cԃ ա ԃ Não vejo diferença ... Talvez o problema seja o cache? Vou dar uma olhada em breve.
Jonic Biz 9/07
2
1 e 6 (reload()/(false))são mais lentos. hmmm. interessante. :) e 1 e 6 são os mesmos que reload()o parâmetro padrão false.
C # ԃ
location.href = location.hrefé o que eu costumo usar, mas obrigado pelos outros. Muito útil! +1
Amal Murali
1
@ Cԃ ա ԃ Finalmente posso reproduzir o que você vê e perguntei aqui .
Jonic Biz
202

De várias maneiras, suponho:

  • window.location.reload();
  • history.go(0);
  • window.location.href=window.location.href;
David
fonte
41
Isso window.location.href=window.location.href;vai fazer nada se o seu URL tem um # / hashbang na extremidade example.com/something#blah:
AaronLS
18
Caso alguém esteja se perguntando qual é a diferença entre location.reload()e history.go(0)é: não há. A seção relevante da especificação do HTML 5 em w3.org/TR/html5/browsers.html#dom-history-go determina explicitamente que são equivalentes: "Quando o go(delta)método é chamado, se o argumento para o método foi omitido ou foi o valor zero, o agente do usuário deve agir como se o location.reload()método tivesse sido chamado. "
Mark # Amery #
O único que funcionou para mim foi este: window.location.href = window.location.href;
Yster 8/12/15
123

Para recarregar uma página com jQuery, faça:

$.ajax({
    url: "",
    context: document.body,
    success: function(s,x){
        $(this).html(s);
    }
});

A abordagem aqui que eu usei foi o Ajax jQuery. Eu testei no Chrome 13. Em seguida, coloquei o código no manipulador que acionará a recarga. O URL é "", o que significa esta página .

Pedro
fonte
68
Downvoting. Isso realmente não responde à pergunta, mas mostra como substituir o HTML da página por uma resposta do Ajax. Isso é diferente de recarregar a página: por exemplo, estou trabalhando com uma situação no momento em que isso não funcionaria para resolver o problema original.
Marnen Laibow-Koser
5
Um problema ao recarregar todo o HTML como esse é ter que chamar manualmente eventos onload / ready e mitigar a substituição de variáveis ​​declaradas anteriormente cujo estado você deseja manter após a atualização.
PassKit 14/03
3
A menos que você seja muito cuidadoso com seu código, isso causará vazamentos de memória nos locais em que você anexou os manipuladores de eventos e sem desanexá-los antes de substituir o código ao qual estão anexados.
Daniel Llewellyn
Estou usando isso para recarregar nosso painel a cada segundo, sem piscar! É o cometa / json api do pobre homem. Obrigado a @DanielLlewellyn et al. para avisos.
William Entriken
3
Algumas pessoas comentaram que essa abordagem é útil para atualizar apenas uma parte da página. Não é. Acho que essas pessoas estão entendendo mal o contextparâmetro $.ajaxe esperando que, de alguma forma, realize algum tipo de mágica. Tudo o que faz é definir o thisvalor das funções de retorno de chamada . O Ajax em um URL ""atingirá o URL em que você está atualmente, carregando normalmente o HTML completo (incluindo <html>e <head>e <body>), e nada nesta resposta filtra o que você não deseja.
Mark Amery
107

Se a página atual foi carregada por uma solicitação POST, convém usar

window.location = window.location.pathname;

ao invés de

window.location.reload();

porque window.location.reload()solicitará confirmação se chamado em uma página que foi carregada por uma solicitação POST.

SumairIrshad
fonte
12
Isto irá perder a querystring no entanto, enquanto window.location = window.location não vai
mrmillsy
@mrmillsy window.location = window.locationtambém é imperfeito, no entanto; não faz nada se houver um fragmento (hashbang) no URL atual.
Mark Amery
64

A questão deve ser,

Como atualizar uma página com JavaScript

window.location.href = window.location.href; //This is a possibility
window.location.reload(); //Another possiblity
history.go(0); //And another

Você é mimado pela escolha.

JohnP
fonte
55

Você pode querer usar

location.reload(forceGet)

forceGet é um booleano e opcional.

O padrão é false, que recarrega a página do cache.

Defina esse parâmetro como true se desejar forçar o navegador a obter a página do servidor e a se livrar do cache também.

Ou apenas

location.reload()

se você quiser rápido e fácil com o cache.

Pitada
fonte
41

Três abordagens com diferentes comportamentos relacionados ao cache:

  • location.reload(true)

    Nos navegadores que implementam o forcedReloadparâmetro de location.reload(), recarrega buscando uma nova cópia da página e de todos os seus recursos (scripts, folhas de estilo, imagens etc.). Não servirá nenhum recurso do cache - obtém novas cópias do servidor sem enviar nenhum if-modified-sinceouif-none-match cabeçalho cabeçalho na solicitação.

    Equivalente ao usuário fazer uma "recarga forçada" nos navegadores, sempre que possível.

    Observe que a passagem truepara location.reload()é suportada no Firefox (consulte MDN ) e Internet Explorer (consulte MSDN ), mas não é universalmente suportada e não faz parte da especificação W3 HTML 5 , nem da especificação preliminar do W3 HTML 5.1 , nem do WHATWG HTML Living Standard .

    Em navegadores não compatíveis, como o Google Chrome, location.reload(true)se comporta da mesma forma que location.reload().

  • location.reload() ou location.reload(false)

    Recarrega a página, buscando uma cópia nova e sem cache do próprio HTML da página e executando solicitações de revalidação da RFC 7234 para quaisquer recursos (como scripts) que o navegador armazenou em cache, mesmo que sejam recentes, caso a RFC 7234 permita que o navegador seja veiculado sem revalidação.

    Exatamente como o navegador deve utilizar seu cache ao realizar uma location.reload()chamada não está especificado ou documentado, tanto quanto eu sei; Eu determinei o comportamento acima por experimentação.

    Isso é equivalente ao usuário simplesmente pressionar o botão "atualizar" no navegador.

  • location = location (ou infinitamente muitas outras técnicas possíveis que envolvem a atribuição de location ou a suas propriedades)

    Funciona apenas se o URL da página não contiver um fragmento / hashbang!

    Recarrega a página sem buscar ou revalidar quaisquer novos recursos do cache. Se o próprio HTML da página for novo, isso recarregará a página sem executar nenhuma solicitação HTTP.

    Isso é equivalente (de uma perspectiva de armazenamento em cache) ao usuário que abre a página em uma nova guia.

    No entanto, se o URL da página contiver um hash, isso não terá efeito.

    Novamente, o comportamento do cache aqui não é especificado, tanto quanto eu sei; Eu determinei isso testando.

Então, em resumo, você deseja usar:

  • location = locationpara uso máximo do cache, desde que a página não tenha um hash em seu URL; nesse caso, isso não funcionará
  • location.reload(true)buscar novas cópias de todos os recursos sem revalidar (embora não seja universalmente suportado e não se comporte de maneira diferente location.reload()em alguns navegadores, como o Chrome)
  • location.reload() reproduzir fielmente o efeito do usuário clicando no botão 'atualizar'.
Mark Amery
fonte
+1 para localização = localização; muitas pessoas não parecem sugerir que embora seja mais curto do que a maioria das respostas fornecidas, a única desvantagem é a sua legibilidade Eu acho que enquanto location.reload () é um pouco mais semântica
Brandito
@Brandito Mais importante, location = locationnão funciona se houver um hash no URL. Para qualquer site que use fragmentos - ou mesmo para qualquer site em que alguém vinculando a uma página possa adicionar um fragmento ao URL - isso o torna quebrado.
Mark Amery
26

window.location.reload() será recarregado do servidor e carregará todos os seus dados, scripts, imagens etc. novamente.

Portanto, se você quiser apenas atualizar o HTML, o window.location = document.URLretorno será muito mais rápido e com menos tráfego. Mas não recarregará a página se houver um hash (#) no URL.

Peter Mortensen
fonte
Esse comportamento é verdadeiro no Chrome, pelo menos - location.reload()força a revalidação de recursos em cache, mesmo sem argumentos, enquanto window.location = document.URLfica feliz em servir recursos em cache sem atingir o servidor, desde que estejam atualizados.
Mark Amery
17

A Loadfunção jQuery também pode executar uma atualização da página:

$('body').load('views/file.html', function () {
    $(this).fadeIn(5000);
});
Suleman Mirza
fonte
4
Não, isso não é uma atualização de página.
Mark Amery
16

Como a pergunta é genérica, vamos tentar resumir possíveis soluções para a resposta:

Solução JavaScript simples e simples :

A maneira mais fácil é uma solução de uma linha, colocada de maneira apropriada:

location.reload();

O que muitas pessoas estão faltando aqui, porque esperam obter alguns "pontos", é que a própria função reload () oferece um booleano como parâmetro (detalhes: https://developer.mozilla.org/en-US/docs/Web / API / Location / recarregar ).

O método Location.reload () recarrega o recurso da URL atual. Seu parâmetro exclusivo opcional é um booleano que, quando verdadeiro, faz com que a página seja sempre recarregada do servidor. Se for falso ou não especificado, o navegador pode recarregar a página do cache.

Isso significa que existem duas maneiras:

Solução 1: forçar o recarregamento da página atual do servidor

location.reload(true);

Solution2: Recarregando do cache ou servidor (com base no navegador e na sua configuração)

location.reload(false);
location.reload();

E se você quiser combiná-lo com o jQuery e ouvir um evento, eu recomendaria usar o método ".on ()" em vez de ".click" ou outros wrappers de eventos, por exemplo, uma solução mais adequada seria:

$('#reloadIt').on('eventXyZ', function() {
    location.reload(true);
});
Fer para
fonte
15

Aqui está uma solução que recarrega assincronamente uma página usando jQuery. Evita a cintilação causada por window.location = window.location. Este exemplo mostra uma página que é recarregada continuamente, como em um painel. É testado em batalha e está sendo executado em uma TV de exibição de informações na Times Square.

<!DOCTYPE html>
<html lang="en">
  <head>
    ...
    <meta http-equiv="refresh" content="300">
    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
    <script>
    function refresh() {
      $.ajax({
        url: "",
        dataType: "text",
        success: function(html) {
          $('#fu').replaceWith($.parseHTML(html));
          setTimeout(refresh,2000);
        }
      });
    }
    refresh();
    </script>
  </head>
  <body>
    <div id="fu">
      ...
    </div>
  </body>
</html>

Notas:

  • Usar $.ajaxdiretamente como $.get('',function(data){$(document.body).html(data)}) faz com que os arquivos css / js sejam bloqueados pelo cache , mesmo se você usar cache: true, é por isso que usamosparseHTML
  • parseHTMLNÃO encontrará uma bodytag para que todo o seu corpo precise participar de uma div extra. Espero que essa pepita de conhecimento o ajude um dia, você pode adivinhar como escolhemos o ID para essediv
  • Use http-equiv="refresh"apenas no caso de algo dar errado com o soluço javascript / servidor, a página AINDA será recarregada sem que você receba uma ligação.
  • Essa abordagem provavelmente vaza memória de alguma forma, a http-equivatualização corrige
William Entriken
fonte
14

eu encontrei

window.location.href = "";

ou

window.location.href = null;

também atualiza a página.

Isso facilita muito o recarregamento da página, removendo qualquer hash. Isso é muito bom quando estou usando o AngularJS no simulador do iOS, para não precisar executar o aplicativo novamente.

Mujah Maskey
fonte
bom tiro, eu não estava ciente disso.
Junaid Atari
9

Você pode usar o método JavaScript location.reload() . Este método aceita um parâmetro booleano. trueou false. Se o parâmetro for true; a página sempre recarregada do servidor. Se for false; qual é o padrão ou, com o navegador de parâmetros vazio, recarregue a página do cache.

Com trueparâmetro

<button type="button" onclick="location.reload(true);">Reload page</button>

Com default/ falseparâmetro

 <button type="button" onclick="location.reload();">Reload page</button>

Usando jquery

<button id="Reloadpage">Reload page</button>
<script type="text/javascript">
    $('#Reloadpage').click(function() {
        location.reload();
    }); 
</script>
Poorna Senani Gamage
fonte
8

Você não precisa de nada do jQuery, para recarregar uma página usando JavaScript puro , basta usar a função reload na propriedade location como esta:

window.location.reload();

Por padrão, isso recarregará a página usando o cache do navegador (se existir) ...

Se você deseja forçar o recarregamento da página, basta passar um valor verdadeiro para recarregar o método como abaixo ...

window.location.reload(true);

Além disso, se você já está no escopo da janela , pode se livrar da janela e fazer:

location.reload();
Alireza
fonte
8

usar

location.reload();

ou

window.location.reload();
H.Ostwal
fonte
OP mencionado especificamente "com jQuery" (mesmo que como já foi notado por muitos, este talvez devem não ser uma questão jQuery)
RomainValeri
3

Use onclick="return location.reload();"dentro da etiqueta do botão.

<button id="refersh-page" name="refersh-page" type="button" onclick="return location.reload();">Refesh Page</button>
Frank
fonte
3

Se você estiver usando jQuery e quiser atualizar, tente adicionar seu jQuery em uma função javascript:

Eu queria ocultar um iframe de uma página ao clicar em ah h3, para mim funcionou, mas não consegui clicar no item que me permitia visualizar oiframe início, a menos que eu atualizasse o navegador manualmente ... não é o ideal.

Eu tentei o seguinte:

var hide = () => {
    $("#frame").hide();//jQuery
    location.reload(true);//javascript
};

A mistura de javascript simples com o jQuery deve funcionar.

// code where hide (where location.reload was used)function was integrated, below    
    iFrameInsert = () => {
        var file = `Fe1FVoW0Nt4`;
        $("#frame").html(`<iframe width=\"560\" height=\"315\" src=\"https://www.youtube.com/embed/${file}\" frameborder=\"0\" allow=\"autoplay; encrypted-media\" allowfullscreen></iframe><h3>Close Player</h3>`);
        $("h3").enter code hereclick(hide);
}

// View Player 
$("#id-to-be-clicked").click(iFrameInsert);
J. Moreno
fonte
3

Todas as respostas aqui são boas. Como a pergunta especifica sobre recarregar a página com, Pensei em adicionar algo mais para futuros leitores.

O jQuery é uma biblioteca JavaScript multiplataformaprojetada para simplificar o script de HTML do lado do cliente.

~ Wikipedia ~

Então você entenderá que o fundamento de ou é baseado em . Então, indo com pura é muito melhor quando se trata de coisas simples.

Mas se você precisar de um solução, aqui está uma.

$(location).attr('href', '');
Roshana Pitigala
fonte
2

Existem várias maneiras de recarregar as páginas atuais, mas, de alguma forma, usando essas abordagens, você pode ver a página atualizada, mas com poucos valores de cache, por isso supere esse problema ou, se desejar fazer solicitações difíceis, use o código abaixo.

    location.reload(true);
    //Here, it will make a hard request or reload the current page and clear the cache as well.


    location.reload(false); OR location.reload();
    //It can be reload the page with cache
ankitkanojia
fonte
2
<i id="refresh" class="fa fa-refresh" aria-hidden="true"></i>

<script>
$(document).on('click','#refresh',function(){
   location.reload(true);
});
</script>
ankit singh
fonte
Já existem poucas respostas sugerindo isso.
Dharman
Impressionante isso também atualizar do servidor
Alemoh Rapheal Baja
1

Solução Javascript Simples:

 location = location; 

<button onClick="location = location;">Reload</button>

hev1
fonte
1

Provavelmente o mais curto (12 caracteres) - histórico de uso

history.go()
Kamil Kiełczewski
fonte
1

Você pode escrever de duas maneiras. 1º é a maneira padrão de recarregar a página, também chamada de atualização simples

location.reload(); //simple refresh

E outro é chamado de atualização completa . Aqui você passa a expressão booleana e a define como verdadeira. Isso recarregará a página destruindo o cache antigo e exibindo o conteúdo do zero.

location.reload(true);//hard refresh
infomasud
fonte
1
As respostas somente de código geralmente são desaprovadas neste site. Você poderia editar sua resposta para incluir alguns comentários ou explicações sobre seu código? As explicações devem responder a perguntas como: O que faz? Como isso acontece? Onde isso vai? Como ele resolve o problema do OP? Veja: Como responder . Obrigado!
Eduardo Baitello 8/11/19
0

É o mais curto em JavaScript.

window.location = '';
Na Nonthasen
fonte
0
$(document).on("click", "#refresh_btn", function(event) 
{
     window.location.replace(window.location.href);
});
Ankush Kumar
fonte
-1

Aqui estão algumas linhas de código que você pode usar para recarregar a página usando o jQuery .

Ele usa o wrapper jQuery e extrai o elemento dom nativo.

Use isso se você quiser apenas uma sensação de jQuery no seu código e não se importar com velocidade / desempenho do código.

Basta escolher de 1 a 10 que atenda às suas necessidades ou adicionar um pouco mais com base no padrão e nas respostas anteriores.

<script>
  $(location)[0].reload(); //1
  $(location).get(0).reload(); //2
  $(window)[0].location.reload(); //3
  $(window).get(0).location.reload(); //4
  $(window)[0].$(location)[0].reload(); //5
  $(window).get(0).$(location)[0].reload(); //6
  $(window)[0].$(location).get(0).reload(); //7
  $(window).get(0).$(location).get(0).reload(); //8
  $(location)[0].href = ''; //9
  $(location).get(0).href = ''; //10
  //... and many other more just follow the pattern.
</script>
dcangulo
fonte