2011-09-26 14 views
10

Me gustaría tener un efecto de animación que comienza cuando las personas dejan una página.¿qué puedo poner antes de Descargar?

utilizo este momento:

window.onbeforeunload = function(){ 
    alert("test"); 
    console.log("test"); 
    sliderIntervalId = setInterval('SlideDown()',1); 
} 

Mientras que la "prueba" de hecho se registra en la consola, el ni la función ni la slideDown alerta de prueba se produce ...

Es este comportamiento normal ? ¿podemos usar la función de carga previa solo para propósitos de back-end?

P.S. Estoy probando en Chrome, es por eso que tuve que usar antes de descargar i.s.o onUnLoad que parece no ser compatible con Chrome.

+0

No creo que pueda posponer la nueva página de cargar con onbeforeunload. alerta realmente detiene la ejecución y congela la página hasta que haga clic en alejar la alerta. – ChrisR

+2

P.S. En una nota no relacionada, no debe pasar cadenas a 'setTimeout', debe pasar funciones. 'setInterval (SlideDown, 1);' –

+1

Chrome bloquea 'alert's en' onbeforeunload'. Si miras en la consola, verás 'Alerta bloqueada ('prueba') durante beforeunload'. Chrome admite 'onunload', pero es muy restringido en cuanto a lo que puede hacer. Compruebe este violín: http://jsfiddle.net/EE4Md/3/ –

Respuesta

16

onbeforeunload puede retrasar la descarga en la página único caso: Cuando se devuelve un comunicado return con un valor definido. En este caso, el usuario obtiene un diálogo de confirmación, que le ofrece al usuario la opción de no abandonar la página.

Su resultado deseado no se puede forzar de ninguna manera. La animación se ejecutará hasta que el navegador empieza a cargar la página siguiente:

[User] Navigates away to http://other.website/ 
[Your page] Fires `beforeunload` event 
[Your page] `unload` event fires 
[Browser] Received response from http://other.website/ 
[Browser] Leaves your page 
[Browser] Starts showing content from http://other.website/ 
3

Jorrebor, Si su tratando de tener este fuego animación cuando salen de su sitio o cerrar el navegador no funcionará como se pretende. Sin embargo, puede crear esta animación mientras el usuario viaja dentro de su sitio eliminando la propiedad 'href' de sus enlaces y creando animaciones que tienen una función de devolución de llamada que establece la propiedad window.location. Algo así como:

document.getElementById('home').onclick(function(){ 
    yourAnimationFunction(function(){ 
      window.location="example.com"; 
    }); 
}); 

una gran cantidad de trabajo y no será SEO simpático, sin embargo

3

estoy trabajando con onbeforeunload y lo que he podido averiguar es:

  • manejador onbeforeunload está bloqueando el navegador de destruir la página actual
  • si no devuelve nada, la ventana emergente no aparece.

De modo que su código funcionará siempre que el controlador de eventos ejecute. Esto significa que las funciones del temporizador no son utilizables. Simplemente agregan a la cola de ejecución, por lo que todo lo que harían es poner en cola después de al final del controlador que se está ejecutando, que es posterior al último momento en que se garantizaba que su código aún se está ejecutando.

Así que sólo hay una manera de detener el navegador de descarga antes de que termine la animación:

  • poner un bucle de bloqueo que pierde un poco de tiempo en el controlador beforeunload
  • inicio CSS3 animación mediante el establecimiento de una clase apropiada en el elemento antes de que el bucle
  • hacer que el fin de bucle cuando los acabados de animación (hacen que el bucle comprueba la altura real de un elemento o algo)

Ah, y sí, este es el truco más desagradable de todos, pero pude encontrar la manera de evitar que el navegador descargue la página, ¿verdad?

Agradecería los comentarios con ideas sobre qué poner al día. que estoy tomando algunas opciones en cuenta:

  • perder CPU en matemáticas vamos un gran número
  • acceso localStorage (llamada sincrónica, IO operration)
  • acceso a DOM (esta solución ya tiene a)

¿Alguna idea?

4

Suponiendo jQuery en aras de la brevedad:

$('nav a').click(function (e) { 

    //ignore any "modified" click that usually doesn't open in the current window 
    if (e.which > 1 || e.shiftKey || e.altKey || e.metaKey || e.isDefaultPrevented()) { 
     return; 
    } 

    //where you going here? 
    var place = this.href; 

    //you're not going anywhere, buddy 
    e.preventDefault(); 

    //watch me dance, first 
    $('.animate-me').fadeOut(1000, function afterAnimation() { 

     //you're free to go! 
     document.location = place; 
    }); 
}); 

Básicamente, no se utiliza de onbeforeunload. Una ventaja es que puede mantener al usuario todo el tiempo que quiera, una desventaja es que el usuario no verá una animación cuando use un enlace fuera del nav (pero puede cambiar el selector)

Obviamente, guarde la animación rápido, como suddenlyoslo.com do.

+1

Esto funcionará si el usuario hace clic en el enlace 'a'. ¿Qué pasa si literalmente escribieron el * www.othersite.com * en la barra de direcciones? ... o un sitio en el 'iframe' quiere redirigir a' www.someothersites.com'? ... Esto fallará. Puede probar lo que quiero decir en el ** http: //jsfiddle.net/** * intente ingresar cualquier entrada y luego intente salir de la página *. – ErickBest

+0

Eso es correcto. No puede evitar que un navegador navegue de manera confiable a menos que la navegación se desencadene ** en la página **, especialmente si espera que termine una animación. Usualmente uso este método junto con una animación ** más simple ** en 'onbeforeunload', por lo que atrapo ambos casos. –

Cuestiones relacionadas