Verifique se a página é recarregada ou atualizada em JavaScript

186

Quero verificar quando alguém tenta atualizar uma página.

Por exemplo, quando abro uma página, nada acontece, mas quando atualizo a página, ele deve exibir um alerta.

javascript  page-refresh 
— Ahmed
fonte
1
Não é realmente possível sem o código do lado do servidor. Para que você precisa disto? Talvez se você der uma idéia maior, podemos sugerir uma alternativa melhor.
— Shadow Wizard é Ear For You
Talvez você possa fazer algo como um cookie ... como armazenar o tempo e recarregar comparar a diferença de tempo.
— Felix Kling 15/02
Eu quero fazer como o link do facebook será #! / Qualquer coisa que eu quero remover #! quando a página é recarregada apenas
— Ahmed
1
@ Ahmed Estou tentando fazer a mesma coisa. Alguma das soluções abaixo funcionou para você?
— Paul Fitzgerald
3
⚠️⚠️⚠️ window.performance.navigation.typeestá obsoleto, pls veja minha resposta .
— Илья Зеленько

Respostas:

221

⚠️⚠️⚠️ window.performance.navigation.typeestá obsoleto, pls veja a resposta de Илья Зеленько

Uma maneira melhor de saber que a página é realmente recarregada é usar o objeto de navegador suportado pela maioria dos navegadores modernos.

Ele usa a API de tempo de navegação .

//check for Navigation Timing API support
if (window.performance) {
  console.info("window.performance works fine on this browser");
}
  if (performance.navigation.type == 1) {
    console.info( "This page is reloaded" );
  } else {
    console.info( "This page is not reloaded");
  }
Expandir snippet

fonte: https://developer.mozilla.org/en-US/docs/Web/API/Navigation_timing_API

— Rahul Jain
fonte
1
obrigado amigo, esta é uma solução precisa para detectar se a página é recarregada com o botão direito / atualização do navegador ou recarregada pelo URL.
— Roque Mejos 8/08/16
4
Esteja ciente de que o Chrome alterou recentemente esse comportamento. Quando o usuário clicar na barra de endereços atual e pressionar Enter, o valor de performance.navigation.type será 1, que deve ser 0. Testei na versão 56. Não sei por que.
— Jackwin tung
1
Da maneira como funciona, como esperado, qualquer interação com a página que force um novo estado de navegação para a mesma página é considerada uma atualização. Portanto, dependendo do seu código, isso é extremamente útil, seja para registrar sempre que a página for atualizada, recarregada ou qualquer interação do ajax. Posso usar muitos usos para funcionalidades e análises.
— Raphie 5/12
27
performance.navigation.type == performance.navigation.TYPE_RELOADé mais fácil de ler em vez de == 1. Além disso, se você verificar performance.navigationque você vai descobrir que existem 4 tipos de navegação diferente e foi decorado como TYPE_BACK_FORWARD,TYPE_NAVIGATE
— Vitalij Kornijenko
5
⚠️⚠️⚠️ window.performance.navigation.typeestá obsoleto, pls veja minha resposta .
— Илья Зеленько
37

O primeiro passo é verificar sessionStoragealgum valor predefinido e, se existir, alertar o usuário:

if (sessionStorage.getItem("is_reloaded")) alert('Reloaded!');

O segundo passo é definir sessionStoragecom algum valor (por exemplo true):

sessionStorage.setItem("is_reloaded", true);

Os valores da sessão são mantidos até que a página seja fechada, para que funcione apenas se a página for recarregada em uma nova guia com o site. Você também pode manter a contagem de recargas da mesma maneira.

— DitherSky
fonte
28
Duas coisas a ter em atenção: 1). Você pode armazenar apenas valores de sequência na sessão e no armazenamento local. Portanto, trueé convertido em "true". 2) O armazenamento da sessão persiste até que o usuário feche a janela do navegador. Portanto, você não pode dizer a diferença entre recarregar a página e navegar de volta para o site na mesma sessão do navegador.
— Hector
35

Novo padrão 2018 agora (PerformanceNavigationTiming)

window.performance.navigationA propriedade foi descontinuada na especificação Nível de tempo de navegação 2 . Por favor, use a PerformanceNavigationTiminginterface.

PerformanceNavigationTiming.type

Esta é uma tecnologia experimental .

Verifique a tabela de compatibilidade do navegador com cuidado antes de usá-la na produção.

Suporte em 08/07/2019

A propriedade somente leitura do tipo retorna uma sequência que representa o tipo de navegação. O valor deve ser um dos seguintes:

  • navegar - Navegação iniciada clicando em um link, inserindo o URL na barra de endereços do navegador, enviando formulário ou inicializando através de uma operação de script diferente de recarregar e voltar_forward, conforme listado abaixo.

  • recarregar - A navegação é feita através da operação de recarregamento do navegador ou location.reload().

  • back_forward - A navegação é realizada através da operação de travessia do histórico do navegador.

  • prerender - A navegação é iniciada por uma dica de prerender .

Esta propriedade é somente leitura.

O exemplo a seguir ilustra o uso dessa propriedade.

function print_nav_timing_data() {
  // Use getEntriesByType() to just get the "navigation" events
  var perfEntries = performance.getEntriesByType("navigation");

  for (var i=0; i < perfEntries.length; i++) {
    console.log("= Navigation entry[" + i + "]");
    var p = perfEntries[i];
    // dom Properties
    console.log("DOM content loaded = " + (p.domContentLoadedEventEnd - p.domContentLoadedEventStart));
    console.log("DOM complete = " + p.domComplete);
    console.log("DOM interactive = " + p.interactive);

    // document load and unload time
    console.log("document load = " + (p.loadEventEnd - p.loadEventStart));
    console.log("document unload = " + (p.unloadEventEnd - p.unloadEventStart));

    // other properties
    console.log("type = " + p.type);
    console.log("redirectCount = " + p.redirectCount);
  }
}
— Илья Зеленько
fonte
4
+1 por apontar a API descontinuada, mas -100 para a Apple por sua falta de suporte no iOS ainda em 2020
— kinakuta
14

Armazene um cookie na primeira vez que alguém visitar a página. Na atualização, verifique se o seu cookie existe e, se existir, alerta.

function checkFirstVisit() {
  if(document.cookie.indexOf('mycookie')==-1) {
    // cookie doesn't exist, create it now
    document.cookie = 'mycookie=1';
  }
  else {
    // not first visit, so alert
    alert('You refreshed!');
  }
}

e na sua etiqueta corporal:

<body onload="checkFirstVisit()">
— techfoobar
fonte
9
E os usuários que retornam?
— Red Taz
5
Like @ Rob2211 diz que isso verifica apenas se a página foi visitada e pode dar um falso positivo, desde que a página seja revisada quando o cookie ainda estiver ativo. Não use isso para verificar a atualização.
— Brannon
@Brannon - O cookie é criado sem valor expirado e será destruído quando o navegador for fechado.
— techfoobar
1
@techfoobar nice catch. Isso ainda não seria um problema se o usuário revisitasse o site antes que o cookie fosse destruído?
— Brannon
3
@Brannon - Sim, se o navegador for deixado aberto e o usuário voltar a visitar depois de algum tempo, ele não será considerado como uma nova visita.
— techfoobar
6

Encontrei algumas informações aqui Atualização da página de detecção de Javascript . Sua primeira recomendação é usar campos ocultos, que tendem a ser armazenados por meio de atualizações de página.

function checkRefresh() {
    if (document.refreshForm.visited.value == "") {
        // This is a fresh page load
        document.refreshForm.visited.value = "1";
        // You may want to add code here special for
        // fresh page loads
    } else {
        // This is a page refresh
        // Insert code here representing what to do on
        // a refresh
    }
}
<html>

<body onLoad="JavaScript:checkRefresh();">
    <form name="refreshForm">
        <input type="hidden" name="visited" value="" />
    </form>

</body>

</html>
Expandir snippet

— VoronoiPotato
fonte
Também podemos verificar verificando a Refererpropriedade e modificar a resposta do servidor com base nessa propriedade
— Adeel 15/02/11
Nota lateral: o primeiro método listado nessa página falhará porque o código está sendo executado antes da análise do DOM. Mover o <script>elemento para o final funcionaria - mas ainda não é uma solução garantida (nem o método de cookie).
— Andy E
1
@Deel: verificação Referertambém não é confiável; muitos proxies e extensões de navegador o retiram das solicitações.
— Andy E
@VoronoiPotato Por favor, tente resumir as informações em vez de apenas postar um link.
— Dallin
1
Para mim, ele sempre executa a condição "if" e nunca executa a parte "else", não importa se eu carreguei ou atualizei a página.
— precisa saber é o seguinte
6

Eu escrevi esta função para verificar os dois métodos usando antigos window.performance.navigatione novos performance.getEntriesByType("navigation")ao mesmo tempo:

function navigationType(){

    var result;
    var p;

    if (window.performance.navigation) {
        result=window.performance.navigation;
        if (result==255){result=4} // 4 is my invention!
    }

    if (window.performance.getEntriesByType("navigation")){
       p=window.performance.getEntriesByType("navigation")[0].type;

       if (p=='navigate'){result=0}
       if (p=='reload'){result=1}
       if (p=='back_forward'){result=2}
       if (p=='prerender'){result=3} //3 is my invention!
    }
    return result;
}

Descrição do resultado:

0: clicando em um link, Digitando o URL na barra de endereços do navegador, envio de formulário, Clicando em marcador, inicializando através de uma operação de script.

1: Clique no botão Recarregar ou useLocation.reload()

2: Trabalhando com o histórico do navegador (Bakc e Forward).

3: atividade de pré - renderização como<link rel="prerender" href="https://stackoverflow.com//example.com/next-page.html">

4: qualquer outro método.

— Ali Sheikhpour
fonte
1

Encontrei algumas informações aqui Javascript Detecting Refresh Page

function UnLoadWindow() {
    return 'We strongly recommends NOT closing this window yet.'
}

window.onbeforeunload = UnLoadWindow;
— Manpreet
fonte
3
onde é aqui" ? você esqueceu o link?
— ᴄʀᴏᴢᴇᴛ
0 
if(sessionStorage.reload) { 
   sessionStorage.reload = true;
   // optionnal
   setTimeout( () => { sessionStorage.setItem('reload', false) }, 2000);
} else {
   sessionStorage.setItem('reload', false);
}
— Alexis Gatuingt
fonte
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.