javascript - evitar - ¿Cómo forzar la recarga de una página cuando se usa el botón Atrás del navegador?

deshabilitar boton atras navegador javascript

Question

Necesito detectar de alguna manera que el usuario ha presionado el botón de retroceso de un 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 en este momento algunos elementos no se vuelven a cargar si uso el botón Atrás en un navegador. Pero si uso 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 visita la página1.
2. mientras está en la página1: hace clic en un enlace a la página2.
3. él es redirigido a la página2
4. ahora (¡parte importante!) hace clic en el botón Atrás del navegador porque quiere volver a la página1
5. él está de vuelta en la página1, y ahora la página1 se está volviendo a cargar y algo se alerta como "¡Has vuelto!"

Answer 1

Dado que performance.navigation ahora está en desuso, puede intentar esto:

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

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

Answer 2

Debe usar 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ía "no". Cuando regrese a la página, será "sí" y su código JavaScript activará una actualización.

Answer 3

Encontré la mejor respuesta y está funcionando perfectamente para mí.

solo usa este script simple 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 pasa a la página siguiente, cuando regrese, tendrá el último estado actualizado.

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

detalles encontrados desde here

Answer 4

Ha pasado un tiempo desde que esto se publicó, 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 que incluye el soporte del 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 la parte posterior, puede hacer

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

El 2 indica 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 una secuencia de comandos, o escribiendo la URL en la barra de direcciones.

1: se accedió a la página haciendo clic en el botón Volver a cargar 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

Answer 5

La mejor manera es poner el tiempo de espera usando jquery.

function explode(){
  alert("YOUR RELOAD PAGE HERE!");
}
setTimeout(explode, 1);

En un milisegundo, activará la función una vez, por lo que sus usuarios ni siquiera notarán que se activa.

Lo estoy usando no hay problema.

Answer 6

Puede usar el evento de presentación de pageshow 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 el caché HTTP también puede estar involucrado. Debe configurar los encabezados HTTP relacionados con la caché adecuada en el servidor para almacenar en caché solo aquellos recursos que deben almacenarse en caché. También puede hacer una recarga forzada para inducir al navegador a ignorar el caché HTTP: window.location.reload( true ) . Pero no creo que sea la mejor solución.

Para más información consultar:

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

Answer 7

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

Answer 8

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 se haya hecho clic en el botón de retroceso o avance usando ajax también.

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

Por ejemplo, podría no recargarse si se usa algo como uno de los ejemplos de la publicación anterior window.history.pushState('''', null, ''./'');

entonces cuando usas 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..