¿Cómo forzar la recarga de una página cuando se usa el botón de retroceso del navegador?

Necesito detectar de alguna manera que el usuario ha presionado un botón de retroceso del navegador y volver a cargar la página con actualización (recargando el contenido y CSS) usando jquery.

¿Cómo detectar dicha acción a través de jquery?

Porque ahora mismo algunos elementos no se vuelven a cargar si uso el botón Atrás en un navegador. Pero si utilizo enlaces en el sitio web, todo se actualiza y se muestra correctamente.

¡IMPORTANTE!

Algunas personas probablemente han entendido mal lo que quiero. No quiero actualizar la página actual. Quiero actualizar la página que se carga después de presionar el botón Atrás. esto es lo que quiero decir de una manera más detallada:

1. el usuario está visitando la página 1.
2. mientras está en la página 1: hace clic en un enlace a la página 2.
3. se le redirige a la página2
4. ahora (¡parte importante!) hace clic en el botón Atrás en el navegador porque quiere volver a la página1
5. él está de vuelta en la página 1 - y ahora la página 1 se está recargando y se alerta algo como "¡Has vuelto!"

Puede usar el pageshowevento para manejar la situación cuando el navegador navega a su página a través del recorrido del historial:

window.addEventListener( "pageshow", function ( event ) {
  var historyTraversal = event.persisted || 
                         ( typeof window.performance != "undefined" && 
                              window.performance.navigation.type === 2 );
  if ( historyTraversal ) {
    // Handle page restore.
    window.location.reload();
  }
});

Tenga en cuenta que la caché HTTP también puede estar involucrada. Debe configurar los encabezados HTTP relacionados con la caché adecuados en el servidor para almacenar en caché solo aquellos recursos que deben almacenarse en caché. También se puede hacer recarga forzada al navegador instuct ignorar HTTP caché: window.location.reload( true ). Pero no creo que sea la mejor solución.

Para más información consultar:

• Trabajar con el artículo de BFCache en MDN
• WebKit Page Cache II - El evento de descarga de Brady Eidson
• referencia de evento de pageshow en MDN
• Pregunta sobre actualizaciones de Ajax, botón de retroceso y DOM
• JavaScript - bfcache / pageshow event - event.persisted siempre se establece en false? pregunta

Ha pasado un tiempo desde que se publicó esto, pero encontré una solución más elegante si no necesita admitir navegadores antiguos.

Puedes hacer un chequeo con

performance.navigation.type

La documentación, incluida la compatibilidad con el navegador, está aquí: https://developer.mozilla.org/en-US/docs/Web/API/Performance/navigation

Entonces, para ver si la página se cargó desde el historial usando back, puede hacer

if(performance.navigation.type == 2){
   location.reload(true);
}

El 2indica que se accedió a la página navegando en el historial. Otras posibilidades son-

0:Se accedió a la página siguiendo un enlace, un marcador, un envío de formulario o un guión, o escribiendo la URL en la barra de direcciones.

1:Se accedió a la página haciendo clic en el botón Recargar o mediante el método Location.reload ().

255: Cualquier otra forma

Estos se detallan aquí: https://developer.mozilla.org/en-US/docs/Web/API/PerformanceNavigation

Nota Performance.navigation.type ahora está en desuso en favor de PerformanceNavigationTiming.type que devuelve 'navigate' / 'reload' / 'back_forward' / 'prerender': https://developer.mozilla.org/en-US/docs/Web / API / PerformanceNavigationTiming / type

Solo usa jquery:

jQuery( document ).ready(function( $ ) {

   //Use this inside your document ready jQuery 
   $(window).on('popstate', function() {
      location.reload(true);
   });

});

Lo anterior funcionará al 100% cuando también se haya hecho clic en el botón Atrás o Adelante usando ajax.

si no es así, debe haber una configuración incorrecta en una parte diferente del script.

Por ejemplo, es posible que no se recargue si se usa algo como uno de los ejemplos de la publicación anterior window.history.pushState('', null, './');

así que cuando lo use history.pushState(); asegúrese de usarlo correctamente.

Sugerencia en la mayoría de los casos solo necesitará:

history.pushState(url, '', url); 

No window.history ... y asegúrese de que la URL esté definida.

Espero que ayude..

Dado performance.navigationque ahora está en desuso, puede probar esto:

var perfEntries = performance.getEntriesByType("navigation");

if (perfEntries[0].type === "back_forward") {
    location.reload(true);
}

Debe utilizar una entrada oculta como indicador de actualización, con un valor de "no":

<input type="hidden" id="refresh" value="no">

Ahora, usando jQuery, puede verificar su valor:

$(document).ready(function(e) {
    var $input = $('#refresh');

    $input.val() == 'yes' ? location.reload(true) : $input.val('yes');
});

Cuando hace clic en el botón Atrás, los valores en los campos ocultos conservan el mismo valor que cuando salió originalmente de la página.

Entonces, la primera vez que cargue la página, el valor de la entrada será "no". Cuando regrese a la página, será "sí" y su código JavaScript activará una actualización.

Una alternativa que me solucionó el problema es desactivar la caché de la página. Eso hace que el navegador obtenga la página del servidor en lugar de usar una versión en caché:

Response.AppendHeader("Cache-Control","no-cache, no-store, must-revalidate");
Response.AppendHeader("Pragma", "no-cache");
Response.AppendHeader("Expires", "0");

Actualmente, esta es la página de recarga de forma más actualizada si el usuario hace clic en el botón Atrás.

const [entry] = performance.getEntriesByType("navigation");

// Show it in a nice table in the developer console
console.table(entry.toJSON());

if (entry["type"] === "back_forward")
    location.reload();

Vea aquí la fuente

Recargar es fácil. Deberías usar:

location.reload(true);

Y detectar de nuevo es:

window.history.pushState('', null, './');
  $(window).on('popstate', function() {
   location.reload(true);
});

Use la siguiente metaetiqueta en su archivo de encabezado html, esto funciona para mí.

<meta http-equiv="Pragma" content="no-cache">

Encontré la mejor respuesta y me está funcionando perfectamente

solo usa este sencillo script en tu enlace

<A HREF="javascript:history.go(0)">next page</A>

o el evento de clic de botón

<INPUT TYPE="button" onClick="history.go(0)" VALUE="next page">

cuando usa esto, primero actualiza su página y luego va a la página siguiente, cuando regrese, tendrá el último estado actualizado.

Lo he usado en un inicio de sesión CAS y me da lo que quiero. Espero eso ayude .......

detalles encontrados desde aquí