2012-02-21 20 views
12

estoy usando jQuery Mobile 1.0jQuery Mobile: redirigir a otra página antes de cargar

quiero cambiarlo desde la first.html a OtherPage.html sin mostrar el contenido de first.html

$("#pageId").live("pagebeforecreate", function(event) {     

    window.location.href = "otherPage.html";    

}); 

-i trataron casi todos los eventos, pero no tienen éxito. El first.html aparece por un momento.

Entonces, probé con el evento 'pagebeforeload', pero ¿no es cierto activé

$(document).bind("pagebeforeload", function(e, data){ 

     console.log("pagebeforeload starting"); // NO LOGGING HAPPENING 
     window.location.href = "otherPage.html"; 

     e.preventDefault(); 

     data.deferred.resolve(data.absUrl, data.options, response.page); 

}); 

$(document).bind("pageload", function(e, data){ 
    console.log("Page successfully loaded into DOM..."); // NO LOGGING HAPPENING 
}); 

-AM no mucho claro acerca de este evento & no encuentra un ejemplo viable para ello. -Puede alguien por favor ayuda!

+0

¿Encontró la respuesta ... Necesito la solución ... Gracias de antemano ... –

+0

Hola. En realidad lo hice hace casi 1 año. Pero buscará y te avisaremos. –

+0

Gracias .. por favor avíseme si lo encuentra .. Gracias de nuevo –

Respuesta

3

El evento pagebeforeload solamente se activa cuando las páginas externas se cargan en:

Cada vez que una página externa se carga en la aplicación DOM, 2 eventos se disparan. El primero es pagebeforeload. El segundo evento será de carga de página o descarga de página.

Mi única idea de evitar esto sería para cargar los contenidos de la página de first.html de forma asíncrona, lo que no es ideal porque se termina haciendo 2 peticiones http de la misma página. Sin embargo, esto le dará la capacidad de llamar solo al first-contents.html si es necesario, de lo contrario, puede redireccionar a otherPage.html sin que se muestre nada. por ejemplo:

<script> 
    someCondition=true; 
    if(someCondition) { 
     window.location.href = "otherPage.html"; 
    } else { 
     $(document).ready(function() { 
      $('body').load('first-content.html', function() { 
       //other stuff after the contents have loaded: like the rest of your jquery relating to first.html 
      }); 
     }); 
    } 
</script> 

Asegúrese de que las etiquetas del cuerpo están vacíos en el first.html página.

+1

Solo puedo comentar en mi propia respuesta atm; pero intenté la respuesta de @Endophage antes de publicar la mía, sin embargo, sigue mostrando la página antes de redireccionar en dispositivos móviles por alguna razón, especialmente en la primera carga (es decir, sin caché) y en los tamaños de página más grandes. –

+0

Thnx para la respuesta. lo único que quiero es un evento en el que se dispare la redirección y se detenga la carga de la página. De lo contrario, es más fácil simplemente mostrar/ocultar la página. –

1

Ha intentado simplemente no utilizar un evento. El código JS se ejecutará a medida que se encuentre, por lo que debe asegurarse de que su código condicional esté en la parte superior de la página (en algún lugar).

<html> 
<head> 
<script> 
    if (condition) 
    { 
    window.location.href = "otherPage.html"; 
    } 
</script> 
<!-- rest of page --> 
+0

thnx para la respuesta.Pero no funcionó, esta página brilló antes de la redirección :( –

+0

@AvisekChakraborty Bueno, eso es lo mejor que puedes esperar con JS, por lo que si no funciona, tienes 2 opciones. Acepta que es lo suficientemente bueno, o averigua cómo hacerlo. hacer el lado del servidor de redirección ... – Endophage

1

Es difícil decir lo que está tratando de lograr. Al igual que Endophage, puede hacer un simple redireccionamiento de JavaScript si todo lo que quiere hacer es ir a una página diferente.

Supongo que desea poder elegir si desea mostrar el contenido de la primera o la segunda página pero aún permanecer en la primera página.

Puede agregar el siguiente código. Asegúrese de agregarlo antes de incluye jquery.mobile.

<script> 
    $(document).bind('mobileinit', function() { 
     // disable autoInitialize 
     $.mobile.autoInitializePage = false; 
    }); 
    $(function() { 
     var displaySecondPage = true; 
     if (displaySecondPage) { 
      // load page2.html and replace #page1 with contents of #page2 on page2.html 
      $('#page1').replaceWith($('<div />').load('page2.html #page2', function() { 
       // continue initialize 
       $.mobile.initializePage(); 
      })); 
     } 
     else { 
      // continue initialize 
      $.mobile.initializePage();     
     } 
    }); 
</script> 

Básicamente nos unen a mobileinit para que podamos desactivar autoInitialize. Esto nos da más control sobre cuándo mostrar la primera página.

Ahora podemos usar un controlador jQuery ready estándar para probar nuestra condición, y si es cierto, cargar los contenidos de page2.html y reemplazar la página #page1. Tenga en cuenta que estoy usando el método $.load con la sintaxis del fragmento de página. Esto significa que debe conocer el ID de la página que desea cargar.

Una vez que se carga la página, puede llamar al $.mobile.initializePage para permitir que jquery mobile muestre la nueva página.

para evitar que el contenido de la primera página para mostrar durante esta carga, agrego el siguiente CSS en mi hoja de estilo:

div[data-role='page'] { 
    display: none; 
} 

jQuery Mobile se encarga de mostrar y ocultar las páginas, por lo que haciendo que todos ocultos por Por defecto se asegurará de que no obtenga un flash de contenido no mejorado.

De todos modos, espero que esto ayude.

1

Intente utilizar esto:

<head> 
    <script> 
     window.location.replace('otherPage.html'); 
    </script> 
</head> 
11


prueba este

$("#firstPageId").live("pagecreate",function(){ 
     $.mobile.changePage("otherPage.html"); 
}); 

Además, se puede utilizar LoadPage

espero que ayude :)

+0

Muchas gracias – Dibish

0

que sé esto es viejo, pero yo Pasé algún tiempo tratando de resolver eso, así que esto podría ser útil para alguien.

Ahora, con jquery mobile 1.3, puede simplemente configurar la url de datos en <div data-role="page" data-url="..."> en la página de destino. JQM lo detectará y actualizará las URL en consecuencia.

Ver más aquí http://jquerymobile.com/demos/1.0rc2/docs/pages/page-links.html

e incluso algunas de demostración aquí http://jquerymobile.com/demos/1.3.0-beta.1/docs/demos/redirect/index.html

0

ya que parece que hay muy respuestas a esta; sobre todo cuando se está utilizando una plantilla de varias páginas .. aquí hay un enlace a una respuesta sobre formas móviles jquery que funciona mediante la inyección de la etiqueta # en la URL antes de la página de inicio

jquery forum answer

no funciona en mi caso ya que no quiero que el usuario vea la etiqueta hash, pero es un comienzo ... más por venir más tarde

Cuestiones relacionadas