2012-02-21 18 views
12

sto usando jQuery Mobile 1.0jQuery Mobile: reindirizzare a un'altra pagina prima di caricare

Voglio riorientare da first.html a otherPage.html senza mostrare il contenuto di first.html

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

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

}); 

-i provato quasi ogni evento, ma non riescono. Il first.html viene visualizzato per un momento.

Poi, ho provato con l'evento 'pagebeforeload', ma isnt innescato

$(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 non molto chiaro su questo evento & non ha trovato un esempio praticabile per esso. -Può aiutare qualcuno!

+0

Hai trovato la risposta .. Ho bisogno della soluzione .. Grazie in anticipo .. –

+0

Ciao. In realtà l'ho fatto quasi un anno fa. Ma cercherà e ti farò sapere. –

+0

Grazie ... per favore fatemi sapere se lo trovate .. Grazie ancora –

risposta

3

L'evento pagebeforeload viene attivato solo quando le pagine esterne vengono caricate in:

Ogni volta che una pagina esterna viene caricato nell'applicazione DOM, 2 eventi vengono generati. Il primo è pagebeforeload. Il secondo evento sarà pageload o pageloadfailed.

mia unica idea per aggirare il problema sarebbe quello di caricare il contenuto della pagina di first.html in modo asincrono, il che non è ideale, perché si finisce per fare 2 richieste HTTP per la stessa pagina. Tuttavia questo vi darà la possibilità di chiamare solo il prima contents.html se è necessario, altrimenti si può reindirizzare a otherPage.html senza nulla mostrare. ad esempio:

<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> 

Assicurarsi che i tag body sono vuoti nel first.html pagina.

+1

Posso solo commentare la mia risposta atm; ma ho provato la risposta di @ Endophage prima di postare la mia, ma comunque visualizza la pagina prima di reindirizzare su dispositivi mobili per qualche motivo, specialmente sul primo carico (cioè senza cache) e dimensioni di pagina più grandi. –

+0

Thnx per la risposta. è solo un evento, in cui il reindirizzamento si attiverà e l'ulteriore caricamento della pagina si interromperà. Altrimenti, è più semplice mostrare/nascondere la pagina. –

1

Hai provato semplicemente a non utilizzare un evento. Il codice JS verrà eseguito come si incontra, assicurandosi che il codice condizionale sia nella parte superiore della pagina (in testa da qualche parte) dovrebbe essere sufficiente.

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

thnx per la risposta.Ma non ha funzionato, questa pagina è balenata prima del reindirizzamento :( –

+0

@AvisekChakraborty Beh, questo è il meglio che puoi sperare con JS quindi se non funziona hai 2 scelte. O accetta che sia abbastanza buono, o scopri come fare il lato server di reindirizzamento ... – Endophage

1

È difficile dire cosa stai cercando di realizzare. Come per gli stati di Endophage, puoi eseguire un semplice reindirizzamento JavaScript se tutto ciò che vuoi è passare a una pagina diversa.

sto supponendo che si vuole essere in grado di scegliere se visualizzare il contenuto della prima o seconda pagina, ma ancora rimanere sulla prima pagina.

È possibile aggiungere il seguente codice. Assicurati di aggiungerlo prima del includi 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> 

Fondamentalmente abbiamo legarsi a mobileinit in modo che possiamo disabilitare autoInitialize. Questo ci dà più controllo su quando visualizzare la prima pagina.

Ora possiamo utilizzare un gestore jQuery standard standard per verificare la nostra condizione e, se è vero, caricare il contenuto di page2.html e sostituire la pagina #page1. Si noti che sto usando il metodo $.load con la sintassi del frammento di pagina. Ciò significa che devi conoscere l'ID della pagina che desideri caricare.

Una volta caricata la pagina, è possibile chiamare $.mobile.initializePage per consentire a jquery mobile di eseguire il rendering della nuova pagina.

Per evitare che il contenuto della prima pagina per visualizzare durante questo carico, aggiungo il seguente CSS nel mio foglio di stile:

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

jQuery Mobile si occupa di mostrare e nascondere le pagine, in modo che li rende tutti nascosti da l'impostazione predefinita assicurerà che non si ottenga un flash di contenuto non modificato.

In ogni caso, spero che questo aiuti.

1

Provate ad usare questo:

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


provare questo

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

Inoltre, è possibile utilizzare loadPage

Speranza che aiuta :)

+0

Grazie mille – Dibish

0

lo so questo è vecchio, ma io ho passato un po 'di tempo a cercare di risolverlo, quindi questo potrebbe essere utile a qualcuno.

Ora, con jquery mobile 1.3, è possibile semplicemente impostare data-url su <div data-role="page" data-url="..."> sulla pagina di destinazione. JQM lo rileverà e aggiornerà gli URL di conseguenza.

Vedere più qui http://jquerymobile.com/demos/1.0rc2/docs/pages/page-links.html

E anche un po 'di demo qui http://jquerymobile.com/demos/1.3.0-beta.1/docs/demos/redirect/index.html

0

Dal momento sembra che ci sono molto risposte a questa; soprattutto quando si utilizza un modello multi-page .. ecco un link ad una risposta su forme mobili jQuery che funziona iniettando il tag # nell'URL prima pagina di init

jquery forum answer

non funziona in il mio caso dal momento che non voglio che l'utente visualizzi il tag hash, ma è un inizio .. più in arrivo

Problemi correlati