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 .

Илья Зеленько

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

7

E se

event.currentTarget.performance.navigation.type

retorna

0 => usuário digitou uma URL
1 => página recarregada
2 => botão voltar clicado.

nPcomp
fonte

Eu recebi esse erro, você pode explicar mais? Não

detectado TypeError

2 => TYPE_BACK_FORWARD A página foi acessada navegando no histórico. developer.mozilla.org/pt-BR/docs/Web/API/PerformanceNavigation

Tiago Freitas Leal

performance.navigation.typeestá obsoleto, pls veja minha resposta .

Илья Зеленько

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

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

Respostas:

Novo padrão 2018 agora (PerformanceNavigationTiming)

PerformanceNavigationTiming.type

Suporte em 08/07/2019

O exemplo a seguir ilustra o uso dessa propriedade.