Cómo ejecutar JavaScript después de que una página se transfiere con jQuery Mobile

Cuando una página realiza una transición a otra (y utiliza el elemento location.hash), esta segunda página no carga ningún JavaScript. ¿Cómo puedo ejecutar JavaScript cuando se carga una página (si esta "proviene" de una transición desde su principal)?Cómo ejecutar JavaScript después de que una página se transfiere con jQuery Mobile

Tengo page1.html, con un enlace a page2.html. Este page2.html se carga con una transición (efecto de diapositiva por defecto).

En la página2.html no se ejecuta JavaScript. Intenté con un simple

<script type="text/javascript"> 
alert("x"); 
</script>

pero no funciona. Intenté con un montón de document.ready, bind, live, oncreate, pagecreate, y así sucesivamente.

Fuente

2011-03-16 FlamingMoe

¿Puede arrojar un poco más de luz sobre lo que está tratando de hacer? Si se trata de un asunto de HTML, ¿está escribiendo el HTML a mano o lo está generando dinámicamente? Si es este último, ¿qué idioma vas a usar? – amccormack

He editado la pregunta con más información – FlamingMoe

Puede utilizar una función de devolución de llamada. Después de la animación, llama a una función.

en jQuery:

$('#yourElement').animate({ 
    opacity: 0.25, 
    }, 5000, function() { 
    // Animation complete. add your callback logic here 
});

si se utiliza transiciones Webkit:

$('#yourElement').addEventListener(
'webkitTransitionEnd', 
function(event) { 
    // Animation complete. add your callback logic here 
}, false);

Y si el uso de jQuery Mobile, parece que puede utilizar el 'pageshow' y los detectores de eventos 'pagehide':

http://jquerymobile.com/test/docs/api/events.html

$('div').live('pageshow',function(event, ui){ 
    alert('This page was just hidden: '+ ui.prevPage); 
}); 

$('div').live('pagehide',function(event, ui){ 
    alert('This page was just shown: '+ ui.nextPage); 
});

Fuente

2011-03-17 01:28:34

Lo siento, pero no manejo la animación. La transición entre páginas en jQueryMobile está codificada. – FlamingMoe

Actualicé mi respuesta con un enlace a la documentación jQM que menciona el evento pageshow. Parece que eso debería ser lo que necesitas. –

Gracias DA, pero no está funcionando ... que se invocan eventos antes del evento initializePage() ... Comprobé el código fuente original ... Escribiré a los desarrolladores para poner una opción "incompleta" en ese "último real" "evento ... gracias de todos modos – FlamingMoe

También este problema parece ser destacado aquí: jquerymobile - include .js and .html

He tenido éxito por tener todo el JavaScript situado/incluidos en la primera página, y para cada página del enlace que han envuelto el código dentro de un bloque como esto:

$('#page2').live('pageshow',function(){ 

    //page twos JS     
}); 

$('#page3').live('pageshow',function(){ 

    //page threes JS     
});

Y, por supuesto, cada documento debe incluir el contenedor común con el identificador correspondiente:

<section id="page2" data-role="page" data-theme="a"> ...

Fuente

2012-03-01 21:52:36 ChristoKiwi

Básicamente en jquery mobile cuando se hace una página transición sólo el contenido dentro

<div data-role="page"> 
    ... 
    </div>

se cambia de manera efectiva todas las secuencias de comandos y todo lo que se ha incluido en

<head></head>

etiquetas no está recibiendo carga.

Así que para resolver esto es necesario incluir la secuencia de comandos dentro de la página, como a continuación

<div data-role="page"> 
    ... 
    <script type="text/javascript" src="yourScript.js"></script> 
    </div>

Gracias, Dinesh Parne

Fuente

2012-06-25 16:55:08

La carga de un archivo .js a través de la etiqueta de secuencia de comandos funcionará, pero esto requiere un archivo por separado para cada página que solicite una secuencia de comandos. No solo es bastante torpe para el caso común cuando solo necesita unas pocas líneas de código de inicialización para cada página, pero generalmente sufrirá problemas de caché, es decir, el script de la página solo se ejecutará la primera vez que se visite la página. –

Hay dos maneras de hacer esto 1.) Añadir todas guión archivos en la primera página 2.) Siempre que llama nueva página Se utiliza link rel = "externa" (por ejemplo <a href="#demo" rel="external">Next Page</a>) cuando se hace esto, entonces la página siguiente se ejecutará su sección de cabecera

Pero primero 1 es mejor en la mayoría de las veces

Fuente

2013-05-27 06:17:39 Blu

Problema con rel="external" es que significa que cualquier transición de página de JQuery Mobile no funcionará ...

Fuente

2015-05-09 14:04:01 Scotsman

Tuve el mismo tipo de problema, si está usando la etiqueta para la transición Intente agregarle el atributo target="_self". Funcionó para mí.

Fuente

2017-04-12 05:56:28 Nisarg

Cómo ejecutar JavaScript después de que una página se transfiere con jQuery Mobile

Respuesta

Cuestiones relacionadas