Diferença entre window.location.href = window.location.href e window.location.reload ()

196

Qual é a diferença entre JavaScript

window.location.href = window.location.href

e

window.location.reload()

funções?

javascript

— Brian
fonte

247

Se bem me lembro, window.location.reload()recarrega a página atual com dados POST, enquantowindow.location.href=window.location.href não inclui os dados do POST.

Conforme observado por @ W3Max nos comentários abaixo, window.location.href=window.location.hrefnão recarregará a página se houver uma âncora (#) na URL - você deve usarwindow.location.reload() neste caso.

Além disso, conforme observado por @Mic abaixo, window.location.reload()é usado um argumento adicional skipCachepara que, com o uso window.location.reload(true)do navegador, pule o cache e recarregue a página do servidor. window.location.reload(false)fará o oposto e carregará a página do cache, se possível.

— David Johnstone
fonte

11

nota que quando você usa window.location.reload () em um POST o navegador irá perguntar se você quer reenviar os dados para recarregar a página

— wimh

3

@Wimmel, existe uma maneira de desativar esta mensagem?

— Kris-I

40

window.location.href = window.location.href não recarregará a página se houver uma âncora (#) na URL - você deve usar window.location.reload () nesse caso.

— W3Max

5

Observe também que location.reload () também forçará a recarregar todo o conteúdo estático (como uma atualização rápida no estilo ctrl + f5), enquanto a configuração de location.href de volta para href (ou nome do caminho ou URL) não é, o que pode ser um fator significativo (e desnecessário) diferença no tempo de carregamento em algumas páginas.

— Rob Van Dam

2

@Wimmel Chrome: recarrega a página com um GET Firefox: executa novamente a solicitação anterior, ou seja, se era um POST, você receberá um pop-up agradável perguntando se deseja reenviar os dados ou não.

— Juri

51

Se você disser que window.location.reload(true)o navegador ignorará o cache e recarregará a página do servidor.window.location.reload(false)fará o oposto.

Nota: o defaultvalor para window.location.reload()éfalse

— Microfone
fonte

5

@Ismail - O padrão é falso.

— Trevor

2

Google Chrome 32, enquanto usava o webRTC, o verdadeiro / falso não funcionou para mim. Eu tinha um iframe com o webRTC e somente usando window.location.href = window.location.hrefo truque.

Se você fez alterações em um formulário na página, as alterações podem desaparecer (reverter para valores em cache) dependendo do navegador ao usar location.reload()ou location.reload(false). Para fazer uma atualização completa da página, use location.reload(true).

— precisa saber é o seguinte

32

A diferença é que

window.location = document.URL;

não recarregará a página se houver um hash (#) no URL (com ou sem algo após), enquanto

window.location.reload();

recarregará a página.

— Fabien Ménager
fonte

2

Nem todos os navegadores têm esse problema com hases finais. Se os hashes finais forem uma preocupação para você, tente: window.location = document.URL.replace (/ # $ /, '');

— Walter Stabosz

1

Pelo menos o Chrome está preocupado. Eu costumava tomar location.href = location.hrefcomo certo, mas eu apenas notei esse comportamento exato e vim para o SO para espalhar a palavra. Basta usar location.reload().

— Pioul

1

Você também pode usar window.location.pathname em vez de escrever essa expressão regular. Por exemplo:window.location.replace(window.location.pathname);

— Arseny

20

Se você adicionar o valor booleano true ao recarregamento, window.location.reload(true)ele será carregado do servidor.

Não está claro o quão suportado é esse booleano, o W3Org menciona que o NS usou para suportar lo

Pode haver uma diferença entre o conteúdo de window.location.href e document.URL - há, pelo menos, costumava ser uma diferença entre location.href eo não-padrão e obsoleto document.location que tinha a ver com o redirecionamento, mas que é realmente o último milênio.

Para fins de documentação, eu usaria window.location.reload () porque é isso que você deseja fazer.

— mplungjan
fonte

Veja stackoverflow.com/a/5091619/429972, pois isso explica a diferença.

— jontro

14

Como dito, modificar o href quando houver um hash (#) no URL não recarregará a página. Assim, eu uso isso para recarregá-lo em vez de expressões regulares:

if (!window.location.hash) {
    window.location.href = window.location.href;
} else {
    window.location.reload();
}

— minterior
fonte

6

Deparei-me com essa questão pesquisando algum comportamento aberrante no IE, especificamente no IE9, não verificou versões mais antigas. Parece

window.location.reload();

resulta em uma atualização que apaga a tela inteira por um segundo, onde

 window.location = document.URL;

atualiza a página muito mais rapidamente, quase imperceptivelmente.

Fazendo um pouco mais de pesquisa e algumas experiências com o violinista, parece que window.location.reload()ele ignorará o cache e será recarregado do servidor, independentemente de você passar o booleano com ele ou não, isso inclui obter todos os seus ativos (imagens, scripts, folhas de estilo, etc) novamente. Portanto, se você quiser que a página atualize o HTML, window.location = document.URLela retornará muito mais rápido e com menos tráfego.

Uma diferença de comportamento entre os navegadores é que, quando o IE9 usa o método recarregar, ele limpa a página visível e a reconstrói aparentemente do zero, onde o FF e o chrome esperam até que eles obtenham os novos ativos e os reconstruam se forem diferentes.

— invertedSpear
fonte

window.location = document.URL recarrega a página da mesma forma que window.location.reload (). Existe um estado da arte para atualizar sem rolar para cima ou imperceptivelmente, como você disse?

— precisa saber é o seguinte

6

Uma diferença no Firefox (12.0) é que, em uma página renderizada a partir de um POST, reload () exibirá um aviso e fará uma nova publicação, enquanto uma atribuição de URL fará um GET.

O Google Chrome faz um GET para ambos.

— mrj
fonte

1

O Chrome 38 agora parece usar o POST para .reload ().

— Glen Little

3

Usando o JSF, agora estou tendo o problema de atualização após o término da sessão: PrimeFaces ViewExpiredException após o recarregamento da página e, com alguma investigação, encontrei uma diferença no FireFox:

Chamar window.location.reload()funciona como clicar no ícone de atualização no FF, adiciona a linha

Cache-Control max-age=0

enquanto a configuração window.location.hreffunciona como pressionar ENTER na linha da URL, ela não envia essa linha.

Embora ambos sejam enviados como GET, o primeiro (recarregar) está restaurando os dados anteriores e o aplicativo está em estado inconsistente.

— Marinheiro Danubiano
fonte

1

Não, não deveria haver. No entanto, é possível que haja diferenças em alguns navegadores, portanto (ou nenhum) pode não funcionar em alguns casos.

— Olli
fonte

1

da minha experiência de cerca de 3 anos, não encontrei nenhuma diferença ...

edit: sim, como um deles disse aqui, apenas passar um parâmetro booleano para window.location.reload () é a diferença. se você passar true , o navegador carrega uma página nova, mas se false , a versão do cache é carregada ...

— kumarharsh
fonte

0

No nosso caso, queremos apenas recarregar a página na visualização na web e, por alguns motivos, não conseguimos descobrir o porquê! Tentamos quase todas as soluções que estiveram na Web, mas continuamos sem recarregar usando location.reload () ou soluções alternativas como window.location.reload (), location.reload (true), ...!

Aqui está a nossa solução simples:

Basta usar uma tag <a> com o valor de atribuição "href" vazio como este:

< a href="" ...>Click Me</a>

(em alguns casos, você deve usar "return true" no clique do destino para ativar a recarga)

Para mais informações, consulte esta pergunta: Um href vazio é válido?

— Metro Polisue
fonte

-3

window.location.href, isso salvou minha vida na webview do Android 5.1. A página não é recarregada com location.reload () nesta versão do Android.

— Rony Silva
fonte