w3schools replacestate event ejemplo javascript html firefox caching

javascript - event - window history replacestate({}



Forzar Firefox para recargar la página en el botón Atrás (8)

¿Cómo se hace que Firefox vuelva a ejecutar javascript y vuelva a cargar toda la página cuando el usuario presiona el botón Atrás? Pude hacer esto en todos los navegadores excepto en Firefox gracias a la ayuda de otra pregunta SO al agregar este código:

history.navigationMode = ''compatible''; $("body").unload(function(){})

Y también agregar un iFrame ... Pero esto no funciona en Firefox. ¿Hay algo que hacer?


Creo que la respuesta que podría desear está aquí: https://.com/a/5493543/1475148

TLDR: HTTPS + Cache-Control: must-revalidate validarse como un encabezado enviado por el servidor + El conjunto de encabezados que Expires en el pasado debería hacer que funcione. Aquí hay un ejemplo de implementación de PHP:

<?php $expires = gmdate( ''D, d M Y H:i:s'', time() - 1 ); header( ''Cache-Control: must-revalidate'' ); header( "Expires: {$expires} GMT" ); ?> <!DOCTYPE html> <html> <head> <title>Auto-reloading page</title> </head> <body> <p>The current day is <?php echo date( ''d, F Y''); ?> and the time is <?php echo date(''H:i:s''); ?>.</p> <p><a href="http://google.com">Click away</a></p> </body> </html>


En mi caso, después de que el usuario final publique sus nuevos datos en el servidor, será redirigido a otra página. Pero cuando el usuario final presiona el botón Atrás, el formulario se rellena previamente con los datos antiguos. Por lo tanto, es necesario volver a cargar la página.

Hice una solución para Firefox y otra para Google Chrome. Tienen diferentes comportamientos para mostrar páginas en caché.

Al hacer esto evitará que Firefox almacene en la memoria caché la página y el botón Atrás traerá la página del servidor.

window.onunload = function(){};

Pero Google Chrome lo hizo de otra manera y la solución anterior no funcionó para mí. Así que hice otra solución para Chrome. Hice una bandera que marca la forma como sucia.

En la parte superior de <head> , antes de cargar nada, compruebo la cookie

if(document.cookie.match(/my-form=dirty/)) { document.cookie = "my-form=; expires=-1; path="+document.location.pathname; window.location.reload(); }

Con la ayuda de jQuery, escribo la cookie cuando el usuario modifica algo

$(document).load(function(){ $('':input'').change(function(){ document.cookie = "my-form=dirty; expires=86400000; path="+document.location.pathname; }) })

Bueno saber:


Esta solución funcionó para mí (y creo que es un poco más simple que otras soluciones sugeridas):

$(window).bind(''pageshow'', function() { // This event is called only by FireFox. Because Firefox doesn''t reload the page when the user uses the back button, // or when we call history.go.back(), we need to force the reload for the applicatino to work similar to Chrome and IE (11 at least). // Doc: https://developer.mozilla.org/en-US/docs/Listening_to_events_in_Firefox_extensions location.reload(); });

Llamo a este código en cada carga de página, si el navegador es FireFox. (Para averiguar si el navegador que se está ejecutando actualmente es Firefox, consulte here ).


Nada de esto funcionó para mí. Lo hago a través de la comprobación de cookies. Importe jsp (fuente a continuación) en la parte superior de la página y luego llamo a refreshOnBack.

<%@ page import="java.util.UUID" %> <script> var REFRESH_PAGE_COOKIE_NAME="refreshPage_"; var PAGE_REFRESH_GUID = "<%out.print(UUID.randomUUID().toString());%>"; /* To force refresh of page when user or javascript clicks "back", * put call to this method in body onload function - NOT THROUGH JQUERY * as jquery onload is not called on history back. * In must be done via <BODY onload="..."> */ function refreshOnBack(){ //Alghoritm uses cookies to check if page was already loaded. //Cookies expiration time is not set - will be gone after browser restart. //Alghoritm: //is cookie set? // -YES - reload; // -NO - set it up; //Cookie contains unique guid in name so that when page is regenerated - it will not reload. var cookieName = REFRESH_PAGE_COOKIE_NAME + PAGE_REFRESH_GUID; if(getCookie(cookieName)=="Y"){ window.location.reload(); } else { setCookie(cookieName,"Y"); } } </script>


Para referencia, la propiedad navigationMode solo se aplica a Opera, es solo que IE y los navegadores Webkit ya tienen el comportamiento que el interrogador deseaba.

IE y Webkit hacen lo que Opera llamaría navegación "compatible". Firefox hace lo que Opera llamaría navegación "rápida". Pero es solo en Opera que este comportamiento es realmente controlable.


Puedes usar ese script para encontrarlo aquí:

http://www.easy-coding.de/wiki/html-ajax-und-co/onload-event-cross-browser-kompatibler-domcontentloaded.html#headline9

Demostración: http://demo.easy-coding.de/javascript/onload-event-cross-browser/

Fuente: http://www.easy-coding.de/wiki/html-ajax-und-co/onload-event-cross-browser-kompatibler-domcontentloaded.html#headline8

Este script está bajo la licencia MIT / GPL de uso gratuito.

De lo contrario , podría usar el evento DOM específico de Gecko: DOMContentLoaded


Si usa c # .Net, puede manejarlo en la carga de la página o el evento de inicio programáticamente

Response.Cache.SetExpires(DateTime.Now.AddSeconds(-1)); Response.Cache.SetCacheability(HttpCacheability.Public); Response.Cache.SetValidUntilExpires(false); Response.Cache.VaryByParams["*"] = true;

Para obtener más información, visite Response.Cache en MSDN: http://msdn.microsoft.com/en-us/library/system.web.httpresponse.cache(v=vs.110).aspx


agrega esto entre tus etiquetas HEAD

<META HTTP-EQUIV="Pragma" CONTENT="no-cache"> <META HTTP-EQUIV="Expires" CONTENT="-1">