jQuery transición de página y el navegador de la historia

estoy trabajando con jQuery para tener un efecto de aparición gradual en mi página html, que funciona muy bien. Sin embargo, cuando presiono el botón Atrás en mi navegador, voy a la URL correcta pero obtengo una página en blanco. ¿Esto es algo de almacenamiento en caché del navegador? Soy relativamente nuevo en jQuery y no estoy seguro de cómo resolverlo. Este es el sitio: http://www.e-preview.be/huyzewaterloos/nl/index.html jQuery transición de página y el navegador de la historia

El código que estoy usando es la siguiente:

//page transition 
    $("body").css("display", "none"); 
    $("body").fadeIn(1500); 
    $("a.transition").click(function(event){ 
    event.preventDefault(); 
    linkLocation = this.href; 
    $("body").fadeOut(500, redirectPage); 
    }); 

function redirectPage() { 
    window.location = linkLocation; 
}

Fuente

2010-09-02 Rembrand

Es porque la página está en "bfcache" (ver a Firefox article). Para desactivar bfcache, sólo puede agregar un attribut onunload:

<body onunload="">

Fuente: Ajax, back button and DOM updates y Is there a cross-browser onload event when clicking the back button?

Fuente

2010-09-12 16:19:39

¡Sí! Eso lo hizo, gracias! – Rembrand

En la función anterior, la variable linkLocation ya no está disponible porque está fuera de alcance.

probar este lugar:

$("body").css("display", "none"); 
$("body").fadeIn(1500); 
$("a.transition").click(function(event){ 
    event.preventDefault(); 
    linkLocation = this.href; 
    $("body").fadeOut(500, function() { 
     window.location = linkLocation; 
    }); 
});

Editar: Así que fija el código, pero que no era la cuestión. :)

Al parecer, el jQuery (document) ready() no se dispara cuando se pulsa el botón de retroceso. Puedes probar esto cerca de la parte superior de la página.

history.navigationMode = 'compatible';

Fuente: Is there a cross-browser onload event when clicking the back button?

Fuente

2010-09-02 15:21:27 Sandro

por lo que es relativa a browserhistory/almacenamiento en caché. Lo intentaré cuando regrese al trabajo el lunes. ¡Gracias! – Rembrand

Intenté con el código modificado pero Firefox 3.5 no lo está haciendo. Oh, bueno, si es solo en eso, puedo vivir con eso por ahora. Gracias de todos modos, lo investigaré un poco más. – Rembrand

Hola, parece que el comentario anterior al de antes podría ser mejor. http://stackoverflow.com/questions/158319/cross-browser-onload-event-and-the-back-button/201406#201406 – Sandro

nuevos navegadores son mejores en mantener las páginas anteriores listos para mostrar cuando se utilizan los botones de avance y retroceso. Entonces, lo que probablemente está sucediendo es que su navegador simplemente está volviendo a mostrar la página después de que el $("body").fadeOut(500, redirectPage); haya terminado de ejecutarse. Es decir, la página que se muestra después de hacer clic en el botón Atrás tiene aplicado el estilo body { display: none; }.

No he tenido problemas navegar por la página con Chrome "beta 6.0.472.51" utilizando los botones de avance y retroceso. Cuando utilicé Firefox 3.5 vi el problema descrito al usar el botón Atrás para volver a la página de índice. Utilizando Firebug, pude confirmar que el estilo del elemento del cuerpo estaba establecido en display: none.

Así que lo que está viendo es de Firefox bfcache mantenimiento de la página en el estado anterior, JavaScript y todo. Si quieres que Firefox vuelva a disparar tu fundido en el código, puedes adjuntarlo al evento pageshow de Firefox. Del mismo modo, WebKit tiene su propio mecanismo page caching (que afectaría a Safari y Chrome).

También hay que señalar que la función de jQuery .ready() es no lo mismo que la función window.load(). Vea el documentation para más detalles. El source code para la función .ready() también es bastante útil.

En resumen: el código ejecutado por $.ready() se ejecuta antes de la página se muestra realmente. En los navegadores más nuevos, cuando navega desde una página es muy probable que el navegador guarde el estado de esa página exactamente como está cuando lo abandona. Por lo tanto, cuando usa el botón Atrás del navegador para regresar a la página, la página no se volverá a procesar. Es decir, el DOM no se reconstruirá y la función $.ready() no se volverá a disparar. Si tiene código que necesita para ejecutarse cada vez que la página se muestra luego coloque el código para el método pageshow() (si existe).

Fuente

2010-09-02 15:22:01

no es eso, porque la función onload cuerpo todavía debe ejecutar, y así que si los guiones js – Nealv

que depende del navegador. Claramente, Chrome 6 está volviendo a ejecutar el evento de carga del cuerpo. Pero FireFox 3.5 no lo es. http://www.thomasfrank.se/when_onload_fails.html –

Por Dios, ni siquiera sabía que había una diferencia de navegador a la hora de despedir a jQuery. Es bueno saberlo, gracias. – Rembrand

Normalmente las páginas se almacenan en caché cuando se pulse el botón de retroceso, su función $ (document) ready() no se disparará.

intente configurar no-cache para la página.

Fuente

2010-09-02 15:32:35

Ah, entonces esto se relaciona con la solución de Sandro entonces. Gracias – Rembrand

Hm, probé con $ .ajaxSetup {cache: false}); pero no parece hacer mucho en Firefox. – Rembrand

Tiene que solucionar en Firefox, gracias a Gobygoba por el código :) – Rembrand

jQuery transición de página y el navegador de la historia

Respuesta

Cuestiones relacionadas