Jquery Mobile - Rileva aggiornamento pagina - Torna alla homepage

Question

È possibile rilevare un aggiornamento della pagina all'interno di una pagina HTML5 mobile di Jquery?

Sto costruendo un quiz come parte di un progetto client - il quiz naviga attraverso le pagine jquery mobile div all'interno dell'unica pagina html .. quindi ad esempio se l'utente era su index.html # quizpage3 e aggiornato mi piacerebbe rilevare l'aggiornamento e tornare alla navigazione in index.html.

È possibile?

Evviva Paul

Answer 1

Questa è la soluzione che sto lavorando con. Al momento della scrittura, tt sembra funzionare bene, quindi potrebbe aiutare qualcuno. Tuttavia, è solo una soluzione rapida e per una migliore funzionalità è meglio farlo lato server.

Prima di tutto; si noti che questo codice è posto prima del codice JQM. (Dal sito Web JQM: poiché l'evento mobileinit viene attivato immediatamente, è necessario associare il gestore eventi prima che jQuery Mobile sia caricato. "). Otteniamo l'hash della pagina corrente, ma non vogliamo aggiornarci su alcuni . pagine come home page

<script type="text/javascript"> 
     var needRedirect = false; 
     $(document).bind("mobileinit", function(){ 
      var thisPage = location.hash; 
      if (thisPage != '' && thisPage != '#homepage' && thisPage != '#page1') { 
       needRedirect = true; 
      } 
     }); 
    </script> 
    <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script> 

e poi a destra all'inizio del Possiedi codice:

if (needRedirect) { 
    $.mobile.changePage("#homepage"); 
    needRedirect = false; 
} 

Answer 2

Si potrebbe afferrare l'URL con nel metodo $(function() {}); (che gira solo su caricamento della pagina), e se contiene un # quindi reindirizzare alla pagina principale.

Modifica: oppure utilizzare window.onload = function ... come alternativa JS pura.

Answer 3

Beh questo è un inizio, ogni volta che si passa a un'altra pagina si dovrebbe ottenere il log della console di aggiornamento:

• http://jsfiddle.net/nkZQQ/5/

JS

$("div:jqmData(role='page')").live('pagehide',function(){ 
    console.log('page refreshed, redirect to home'); 
    $.mobile.changePage("#home", { transition: "slideup"}); 
});​ 

HTML

<div data-role="page" id="home"> 
    <div data-role="content"> 
     Hello Refresh 
     <ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="f"> 
      <li data-role="list-divider">Home</li> 
      <li><a href="#page2">Page 2</a></li> 
     </ul> 
    </div> 
</div> 

<div data-role="page" id="page2" data-theme="a"> 
    <div data-role="content"> 
     Hello Page 2 
     <ul data-role="listview" data-inset="true" data-theme="a" data-dividertheme="a"> 
      <li data-role="list-divider">Page 2</li> 
      <li><a href="#home">Home</a></li> 
     </ul> 
    </div> 
</div>​ 

Forse un altro evento avrebbe funzionato meglio:

• http://jquerymobile.com/demos/1.1.0/docs/api/events.html

Answer 4

la mia risposta è simile a patch di ma tutto quello che ho fatto è stato aggiungere quanto segue alla parte superiore del mio file js di riferimento locale prima della riga $ (documento) .ready È inoltre possibile aggiungerlo a un tag di script HTML in qualsiasi punto dell'intestazione .

if (location.hash != "" && location.hash != "pageHome") { 
    var url = location.href; 
    url = url.replace(location.hash,""); 
    location.replace(url); 
} 

Answer 5

Sono un po 'in ritardo ma ho eseguito l'idea di Patch per creare una soluzione molto semplice. Getta questo in un tag script o nel tuo file JS prima di $ (documento).pronto()

checkPage(); 

function checkPage() { 
    var _hash = location.hash; 

    if (_hash != '' && _hash != "#home") { 
     var _url = location.href.replace(_hash, ""); 
     window.location.href = _url; 
    } 
} 

Answer 6

penso, questo è più simpe

$(document).on("pagebeforeshow", function() { 
    window.location = "page"; 
});