Compruebe si la página se vuelve a cargar o actualizar en JavaScript

186

Quiero verificar cuando alguien intenta actualizar una página.

Por ejemplo, cuando abro una página no sucede nada, pero cuando actualizo la página, debería mostrar una alerta.

javascript  page-refresh 
— Ahmed
fuente
1
Realmente no es posible sin el código del lado del servidor. ¿Para qué lo necesitas? Tal vez si da una idea más amplia, podemos sugerirle una mejor alternativa.
— Shadow Wizard es Ear For You
Tal vez podría hacer lo mismo con una cookie ... como almacenar el tiempo y volver a cargar la diferencia horaria.
— Felix Kling
Quiero hacer que el enlace de Facebook sea #! / Anythinge Quiero eliminar #! cuando solo se recarga la página
— Ahmed
1
@Ahmed, estoy tratando de hacer lo mismo. ¿Alguna de las siguientes soluciones funcionó para usted?
— Paul Fitzgerald
3
⚠️⚠️⚠️ window.performance.navigation.typeestá en desuso, por favor vea mi respuesta .
— Илья Зеленько

Respuestas:

221

⚠️⚠️⚠️ window.performance.navigation.typeestá en desuso, por favor vea la respuesta de Илья Зеленько

Una mejor manera de saber que la página se vuelve a cargar es usar el objeto de navegador compatible con la mayoría de los navegadores modernos.

Utiliza la API de sincronización de navegación .

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

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

— Rahul Jain
fuente
1
gracias amigo, esta es una solución precisa para detectar si la página se vuelve a cargar con el botón derecho / actualizar desde el navegador o se vuelve a cargar por la URL.
— Roque Mejos
44
Tenga en cuenta que Chrome había cambiado recientemente este comportamiento. Cuando el usuario hace clic en la barra de direcciones actual y pulsa enter, el valor de performance.navigation.type será 1, que debería ser 0. Probé en la Versión 56. No estoy seguro de por qué.
— Jackwin tung
1
Su funcionamiento es el esperado, cualquier interacción con la página que fuerce un nuevo estado de navegación a la misma página se considera una actualización. Entonces, dependiendo de su código, esto es extremadamente útil, ya sea para registrarse cada vez que la página se ha actualizado, recargado o cualquier interacción ajax. Puedo darle a esto muchos usos para funcionalidades y análisis.
— raphie
27
performance.navigation.type == performance.navigation.TYPE_RELOADes más fácil de leer en lugar de == 1. Además, si performance.navigationTYPE_BACK_FORWARDTYPE_NAVIGATE
— marca
55
⚠️⚠️⚠️ window.performance.navigation.typeestá en desuso, por favor vea mi respuesta .
— Илья Зеленько
37

El primer paso es verificar sessionStoragesi hay algún valor predefinido y, si existe, alertar al usuario:

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

El segundo paso es establecer sessionStorageun valor (por ejemplo true):

sessionStorage.setItem("is_reloaded", true);

Los valores de la sesión se mantienen hasta que se cierra la página, por lo que funcionará solo si la página se vuelve a cargar en una nueva pestaña con el sitio. También puede mantener el recuento de recarga de la misma manera.

— DitherSky
fuente
28
Dos cosas a tener en cuenta: 1). Solo puede almacenar valores de cadena en sesión y almacenamiento local. Por truelo tanto, se convierte a "true". 2) El almacenamiento de la sesión persiste hasta que el usuario cierra la ventana del navegador, por lo que no puede distinguir la diferencia entre la recarga de la página y la navegación desde y hacia su sitio dentro de la misma sesión del navegador.
— Héctor
35

Nuevo estándar 2018-ahora (PerformanceNavigationTiming)

window.performance.navigationLa propiedad está en desuso en la especificación Nivel de sincronización de navegación 2 Utilice la PerformanceNavigationTiminginterfaz en su lugar.

PerformanceNavigationTiming.type

Esta es una tecnología experimental .

Verifique cuidadosamente la tabla de compatibilidad del navegador antes de usar esto en producción.

Apoyo en 2019-07-08

La propiedad de solo lectura de tipo devuelve una cadena que representa el tipo de navegación. El valor debe ser uno de los siguientes:

  • navegar : la navegación comenzó haciendo clic en un enlace, ingresando la URL en la barra de direcciones del navegador, enviando un formulario o inicializando a través de una operación de script que no sea recargar y retroceder como se detalla a continuación.

  • reload : la navegación se realiza mediante la operación de recarga del navegador o location.reload().

  • back_forward : la navegación se realiza a través de la operación transversal del historial del navegador.

  • prerender : la navegación se inicia mediante una sugerencia de prerender .

Esta propiedad es de sólo lectura.

El siguiente ejemplo ilustra el uso de esta propiedad.

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);
  }
}
— Илья Зеленько
fuente
44
+1 por señalar la API en desuso, pero -100 a Apple por su falta de soporte en iOS aún en 2020
— kinakuta
14

Almacene una cookie la primera vez que alguien visite la página. Al actualizar, verifique si su cookie existe y si es así, 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!');
  }
}

y en la etiqueta de tu cuerpo:

<body onload="checkFirstVisit()">
— techfoobar
fuente
9
¿Qué pasa con los usuarios que regresan?
— Red Taz
55
Como @ Rob2211 dice que esto solo verifica si la página ha sido visitada y puede dar un falso positivo siempre que la página se vuelva a visitar cuando la cookie aún esté activa. No use esto para verificar la actualización.
— Brannon
@Brannon: la cookie se crea sin ningún valor de caducidad y se destruirá cuando se cierre el navegador.
— techfoobar
1
@techfoobar buena captura. ¿No sería esto un problema si el usuario visita el sitio antes de que se destruya esa cookie?
— Brannon
3
@Brannon: Sí, si el navegador se deja abierto y el usuario vuelve a visitarlo después de un tiempo, no se considerará como una nueva visita.
— techfoobar
7

Si 

event.currentTarget.performance.navigation.type

devoluciones

0 => el usuario acaba de escribir una URL
1 => la página se volvió a cargar
2 => se hizo clic en el botón Atrás.

— nPcomp
fuente
Recibí este error, ¿puedes explicarlo más? TypeError no capturado: No se puede leer la propiedad 'currentTarget' de undefined
— Janatbek Sharsheyev
2 => TYPE_BACK_FORWARD Se accedió a la página navegando en el historial. developer.mozilla.org/en-US/docs/Web/API/PerformanceNavigation
— Tiago Freitas Leal
performance.navigation.typeestá en desuso, por favor vea mi respuesta .
— Илья Зеленько
6

Encontré alguna información aquí Actualización de la página de detección de Javascript . Su primera recomendación es usar campos ocultos, que tienden a almacenarse a través de actualizaciones 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 fragmento

— VoronoiPatata
fuente
También podemos verificarlo verificando la Refererpropiedad y modificar la respuesta del servidor en función de esta propiedad
— Adeel
Nota al margen: el primer método listado en esa página fallará porque el código se está ejecutando antes de que se haya analizado el DOM. Mover el <script>elemento hacia abajo funcionaría, pero todavía no es una solución garantizada (y tampoco lo es el método de cookies).
— Andy E
1
@Adeel: la comprobación Referertampoco es confiable; muchos servidores proxy y extensiones de navegador lo eliminan de las solicitudes.
— Andy E
@VoronoiPotato Intente resumir la información en lugar de solo publicar un enlace.
— Dallin
1
Para mí, siempre ejecuta la condición "if" y nunca ejecuta la parte "else", no importa si cargué o actualicé la página.
— Parth Vora
6

He escrito esta función para verificar ambos métodos usando viejo window.performance.navigationy nuevo performance.getEntriesByType("navigation")al mismo tiempo:

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

Descripción del resultado:

0: haciendo clic en un enlace, ingresando la URL en la barra de direcciones del navegador, envío de formulario, haciendo clic en el marcador, inicializando a través de una operación de script.

1: haciendo clic en el botón Recargar o usandoLocation.reload()

2: Trabajar con el historial del navegador (Bakc y Forward).

3: actividad previa a la entrega como<link rel="prerender" href="https://stackoverflow.com//example.com/next-page.html">

4: cualquier otro método.

— Ali Sheikhpour
fuente
1

Encontré alguna información aquí Actualizar la página de detección de Javascript

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

window.onbeforeunload = UnLoadWindow;
— Manpreet
fuente
3
donde es aquí" ? ¿Olvidaste el enlace?
— ᴄʀᴏᴢᴇᴛ
0 
if(sessionStorage.reload) { 
   sessionStorage.reload = true;
   // optionnal
   setTimeout( () => { sessionStorage.setItem('reload', false) }, 2000);
} else {
   sessionStorage.setItem('reload', false);
}
— Alexis Gatuingt
fuente
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.