javascript - quantum - restaurar paginas google chrome

Firefox activando eventos de cambio después de la restauración de pestañas

Question

Firefox está activando eventos de cambio en mi aplicación web después de la restauración de pestañas.

Al volver a cargar la misma URL en Firefox, no hay ningún problema, no se activan los eventos de cambio en la carga de la página, todos los valores modificados desde la última visita se muestran correctamente.

Pero al reabrir la misma página con la misma URL, después de cerrar Firefox y volver a abrir la página con "pestañas restauradas" (desde la opción de Firefox "mostrar mis ventanas y pestañas de la última vez"), está activando eventos de cambio para todos los valores que tienen ha cambiado desde la última visita.

El flujo de trabajo real no reproduce el problema:

1. Mis eventos de actualización están en segundo plano (JavaScript / AJAX) y se disparan con eventos onchange;
2. Configuración de Firefox "mostrar mis ventanas y pestañas de la última vez" habilitado;
3. Cambiar algunos valores en mi página (seleccionar campos);
4. Cierre Firefox;
5. Abra la misma URL en otro navegador o computadora, y cambie algunos valores;
6. Vuelva a abrir Firefox, seleccione la pestaña con la página en él, vuelve a cargar y activa nuevamente los eventos de cambio para todos los valores modificados desde la última visita.

Traté de reproducir este comportamiento con páginas completamente diferentes (no creadas por mí y usando otras librerías de scripts y esas cosas) y el resultado es el mismo, siempre está activando los eventos onchange.

Chrome no está haciendo esto con la opción "restaurar pestañas".

¿Por qué está disparando en eventos de cambio? ¿Cómo puedo prevenirlo?

Answer 1

Algunas sugerencias sobre cómo lidiar con esto dependiendo del resultado deseado. Tenga en cuenta que esto se prueba en mi máquina, los comportamientos pueden variar. La forma en que parece funcionar es que Firefox intenta restaurar los datos que ingresó el usuario. Entonces modifica la página, activando el event change . Este evento es levemente diferente al desencadenado por el usuario. Es un UIEvent mientras que el usuario desencadenado es un Event directo. Y este evento es cancelable y se desencadena antes del evento de window load la window load . Así que esto da un par de maneras de lidiar con esto. Tomaré un elemento seleccionado, por ejemplo.

Si desea que la selección mantenga el valor ingresado antes del cierre de la ventana, pero no desencadena el evento onchange, puede establecer la llamada onchange en la window.onload . Me gusta esto:

window.onload = function(){
     element.onchange = function(){

Como la configuración de la select ocurre antes de la onload , este cambio específico no activará su función de cambio.

Otra forma sería atacar los comportamientos que no debe desencadenar poniendo una condición validando si el elemento es cancelable o no. Si es cancelable , significa que se llama desde una sesión de restauración y no activará lo que está dentro. Me gusta esto:

element.onchange = function(e){
         if(e.cancelable == true){

De otra manera, borrar todos los datos sería establecer un evento document.onchange y volver a cargar la página si el evento es cancelable . Me gusta esto:

 document.onchange = function(e){
        if(e.cancelable == true){
            window.location = window.location
             }
      }

Por supuesto, debe asegurarse de no tener ningún otro evento de cambio cancelable en su página.

EDITAR:

Para aclarar el orden de los eventos activados, consulte este jsfiddle, no en iframes, iframes parece comportarse de manera diferente, por lo que si tiene iframes, puede ser un poco más complicado. Pero sin iframe, verá cómo se desencadenan los diferentes eventos según sus interacciones:

 document.onchange = function (e) {
      //this will be triggered on restore before the window load event           
      alert(''restore onchange called, e.cancelable = '' + e.cancelable)
 }


 window.onload = function (e) {
     //You''ll see that on restore, this will be triggered but after page has been updated
     alert(''window load called'')
     document.onchange = function () {
         //This onchange will be called normally, not on restore
         alert(''after onload change, e.cancelable = '' + e.cancelable)
     }

 }

http://fiddle.jshell.net/nozp9uhk/6/show/

Answer 2

Firefox almacena en caché tus archivos cuando cargas la página, por lo que cuando restauras la pestaña, las diferencias entre tus valores almacenados en caché y los nuevos pueden estar activando eventos de cambio.

Intente borrar la caché al restaurar la pestaña. Veo dos maneras de hacer esto:

Llamar a window.location.reload(true) para volver a cargar la página actual

o

Cambie el nombre del archivo JavaScript que inicializa los eventos onchange para esto:

<script language="JavaScript" type="text/javascript" src="yourscript.js?n=1"></script>

Esto (? N = 1) obligará a Firefox a cargar una nueva copia del archivo "yourscript.js"