javascript - recarregar - reload pagina jquery




Como posso atualizar uma página com jQuery? (15)

Como posso atualizar uma página com jQuery?


É o mais curto em JavaScript.

location = '';

A função jQuery Load também pode executar uma atualização de página:

$('body').load('views/file.html', function () {
    $(this).fadeIn(5000);
});

Aqui está uma solução que recarrega de forma assíncrona uma página usando jQuery. Evita o flicker causado por window.location = window.location . Este exemplo mostra uma página que é recarregada continuamente, como em um painel. Ele é 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 $.ajax diretamente como $.get('',function(data){$(document.body).html(data)}) faz com que os arquivos css / js sejam danificados pelo cache , mesmo se você usar cache: true , é por isso que usamos parseHTML
  • parseHTML NÃO encontrará uma marca body para que todo o seu corpo precise ir em uma div extra, espero que essa pepita de conhecimento o ajude um dia, você pode adivinhar como escolhemos a identificação para essa div
  • Use http-equiv="refresh" apenas no caso de algo dar errado com javascript / servidor hiccup, então a página ainda recarregará sem você receber uma chamada telefônica
  • Esta abordagem provavelmente vaza memória de alguma forma, a atualização http-equiv corrige

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

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

Use isso se você quiser apenas um sentimento jQuery em seu código e não se importar com a velocidade / desempenho do código.

Basta escolher de 1 a 10 que se adapte às suas necessidades ou adicione um pouco mais com base no padrão e respostas antes disso.

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

Há muitas maneiras 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 (por exemplo, quando o conteúdo do documento fosse alterado 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>


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

location.reload();

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 usei foi o Ajax jQuery. Eu testei no Chrome 13. Então eu coloquei o código no manipulador que irá acionar o recarregamento. O URL é "" , o que significa esta página .


Se a página atual foi carregada por uma solicitação POST, você pode querer 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.


Todas as respostas aqui são boas. Desde que a pergunta especifica sobre recarregar a página com jquery , eu pensei em adicionar algo mais para os futuros leitores.

jQuery é uma biblioteca JavaScript multi-plataforma projetada para simplificar o script do lado do cliente do HTML.

~ Wikipedia ~

Então você vai entender que a base do jquery ou jquery é baseada em javascript . Então, ir com o javascript puro é muito melhor quando se trata de coisas simples.

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

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

Três abordagens com diferentes comportamentos relacionados ao cache:

  • location.reload(true)

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

    Equivalente ao usuário fazer um "hard reload" nos navegadores, onde isso é possível.

    Observe que a passagem true para location.reload() é suportada no Firefox (consulte location.reload() ) e Internet Explorer (consulte MSDN ), mas não é suportada universalmente e não faz parte da especificação W3 HTML 5 , nem da especificação HTML 5.1 do rascunho W3 , nem o Padrão de Vida HTML do WHATWG .

    Em navegadores sem suporte, como o Google Chrome, o location.reload(true) se comporta da mesma forma que o location.reload() .

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

    Recarrega a página, buscando uma cópia nova e não armazenada em cache do próprio HTML da página e realizando solicitações de revalidação do RFC 7234 para quaisquer recursos (como scripts) que o navegador armazenou em cache, mesmo se eles forem fresh pois fresh RFC 7234 permite que o navegador atenda sem revalidação.

    Exatamente como o navegador deve utilizar seu cache ao executar uma chamada location.reload() não é especificada ou documentada, tanto quanto eu posso dizer; Eu determinei o comportamento acima por experimentação.

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

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

    Só funciona se o URL da página não contiver um fragmento / hashbang!

    Recarrega a página sem refazer ou revalidar fresh recursos do cache. Se o próprio HTML da página estiver atualizado, 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.

    Mais uma vez, o comportamento de cache aqui não é especificado, tanto quanto eu sei; Eu determinei isso testando.

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

  • location = location para uso máximo do cache, contanto que a página não tenha um hash em seu URL. Nesse caso, isso não funcionará
  • location.reload(true) para buscar novas cópias de todos os recursos sem revalidar (embora não seja universalmente suportado e não se comportará de maneira diferente em location.reload() em alguns navegadores, como o Chrome)
  • location.reload() para reproduzir fielmente o efeito do usuário clicar no botão 'atualizar'.

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

window.location.reload();

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

Se você quiser forçar recarregar a página, apenas passe 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 , você pode se livrar da janela e fazer:

location.reload();

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 você quiser forçar o navegador a obter a página do servidor para se livrar do cache também.

Ou apenas

location.reload()

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


eu encontrei

window.location.href = "";

ou

window.location.href = null;

também faz uma atualização de página.

Isso torna muito mais fácil recarregar a página, removendo qualquer hash. Isso é muito bom quando estou usando o AngularJS no simulador do iOS, para que não precise executar novamente o aplicativo.


window.location.reload() irá recarregar a partir do servidor e irá carregar todos os seus dados, scripts, imagens, etc. novamente.

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


Use location.reload() :

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

A função reload() usa um parâmetro opcional que pode ser definido como true para forçar o recarregamento do servidor em vez do cache. O parâmetro padrão é false , portanto, por padrão, a página pode recarregar a partir do cache do navegador.







reload