Come cancellare o modificare la cronologia di navigazione di Jquery Mobile?

Question

Ho un'app PhoneGap che utilizza jQuery Mobile. In una determinata pagina, non posso permettere all'utente di tornare all'ultima pagina che ha visitato.

ordinare la pagine è come questo:

(1)index -> (2)listing items -> (3)form submited -> (4)sucess page 

Che cosa ho bisogno: voglio chiarire tutta la storia quando l'utente è in page 4 e impostare page 1 come fosse l'ultima e visitato solo in caso di l'utente prova a tornare indietro. Forse non è del tutto possibile, quindi accetterei qualsiasi suggerimento.

Immagino che jQuery Mobile memorizzi la cronologia di navigazione in una sorta di array e spero che qualcuno possa aiutarti a trovarlo. Grazie in anticipo!

EDIT: sto usando multi-page template, che è una pagina html singolo, in cui alcuni div funziona come pagine gestite da jQuery Mobile.

Answer 1

Fondamentalmente hai due "pentole" di cronologia che devi manomettere. Browser e JQM.

jQm urlHistory
È possibile modificare JQMs urlHistory molto facilmente. Dal codice jQm:

urlHistory = { 
    // Array of pages that are visited during a single page load. 
    // Each has a url and optional transition, title, and pageUrl 
    // (which represents the file path, in cases where URL is obscured, such as dialogs) 
    stack: [], 
    // maintain an index number for the active page in the stack 
    activeIndex: 0, 
    // get active 
    getActive: function() { 
     return urlHistory.stack[urlHistory.activeIndex]; 
    }, 
    getPrev: function() { 
     return urlHistory.stack[urlHistory.activeIndex - 1]; 
    }, 
    getNext: function() { 
     return urlHistory.stack[urlHistory.activeIndex + 1]; 
    }, 
    // addNew is used whenever a new page is added 
    addNew: function (url, transition, title, pageUrl, role) { 
     // if there's forward history, wipe it 
     if (urlHistory.getNext()) { 
      urlHistory.clearForward(); 
     } 
     urlHistory.stack.push({ 
      url: url, 
      transition: transition, 
      title: title, 
      pageUrl: pageUrl, 
      role: role 
     }); 
     urlHistory.activeIndex = urlHistory.stack.length - 1; 
    }, 
    //wipe urls ahead of active index 
    clearForward: function() { 
     urlHistory.stack = urlHistory.stack.slice(0, urlHistory.activeIndex + 1); 
    } 
}; 

Quindi, tutte le funzioni di cui sopra sono a disposizione e può essere chiamato in questo modo per esempio:

$.mobile.urlHistory.clearForward(); 

per monitorare la vostra storia, mettere questo da qualche parte e ascoltare per pageChange (una volta transizioni sono fatte) per vedere ciò che si trova all'interno del urlHistory:

$(document).on('pagechange', 'div:jqmData(role="page")', function(){ 
    console.log($.mobile.urlHistory.stack); 
}); 

da lì si può iniziare a vedere quello che dovrebbe essere nella storia e ripulirlo come avete bisogno.

Sto usando questo molto per il mio livello di navigazione per modificare ciò che è memorizzato in urlStoria e cosa non dovrebbe essere memorizzato. Sync-zione con il browser è la parte difficile ...

On sync-zione con il browser:
Nel mio strato di navigazione Sono solo rimuovendo doppie voci dal urlHistory, quindi c'è sempre una pagina per andare a (e non due), quando si fa clic sul pulsante Indietro del browser. Nel tuo caso, avrai presumibilmente 4 voci nella cronologia del browser, ma se rimuovi 2 voci da JQM urlHistory, avrai due pagine "non per arrivare a" quando si fa clic sul pulsante Indietro.Quindi, se la vostra storia del browser simile a questa:

www.google.com 
www.somePage.com 
www.YOUR_APP.com = page1 
    page2 
    page3 
    page4 

E la tua rimuovere page2 e page3, cliccando back-pulsante dovrebbe comportare:

1st back-click = page4 > page1 
2nd back-click = page1 > www.somePage.com [because you removed page3] 
3rd back-click = www.somePage.com > www.google.com [because you removed page2] 

Una soluzione teorica sarebbe:

1. mantenere un contatore come "profondo" si entra in una pagina
2. rimuovere le pagine da JQM urlHistory e ottenere un valore "jump" = counter-removedPages
3. sul prossimo browser fare clic su, fare il salto x window.history (indietro) e lasciare passare solo una transizione JQM. È URL rilassarsi page4> page3> page2> pagina1 in un unico passaggio e si consente solo jQm per fare un solo passaggio da page4 a PAGE1
4. controllo cosa c'è nella urlHistory e ripulire il vostro "back tripla"

Attenzione questo è non una soluzione ottimale e devi considerare un sacco di cose (l'utente fa clic da qualche altra parte prima di tornare indietro ecc.). Ho cercato per sempre di ottenere qualcosa di simile per funzionare in un setup più complicato e alla fine ho smesso di usarlo, perché non ha mai funzionato come dovrebbe. Ma per una configurazione più semplice potrebbe funzionare molto bene.

Answer 2

jQuery Mobile utilizza la cronologia del browser per la navigazione da pagina a pagina, quindi impedire all'utente di tornare indietro non è realmente possibile in un browser. Tuttavia, dal momento che hai un'app di PhoneGap, puoi gestire direttamente il pulsante Indietro. Questa domanda dovrebbe aiutarti: Override Android Backbutton behavior only works on the first page with PhoneGap

Answer 3

Questa è una risposta semplice e quindi dovrebbe essere presa in quanto tale. Si può eliminare gli elementi fuori dalla urlHistory.stack semplicemente con

delete $.mobile.urlHistory.stack[index_of_your_choosing]; 

Se si vuole fare in modo la pagina corretta viene eliminata si potrebbe fare qualcosa di simile.

var stack_count = $.mobile.urlHistory.stack.length; 

for(x=0; x<stack_count; x++){ 

    $.mobile.urlHistory.stack[x]; 

    if(typeof $.mobile.urlHistory.stack[x] !== 'undefined'){ 

    if($.mobile.urlHistory.stack[x].url != 'http://url-to-exclude.com/'){ 

     delete $.mobile.urlHistory.stack[x]; 

    }} 
} 

Answer 4

Solo una FYI; in JQM 1.4 rc1 non c'è urlHistory, ma è possibile leggere dall'oggetto di spostamento.

esempio:

$.mobile.navigate.history.stack[0]; 
// Object {hash: "", url: "http://localhost:61659/"} 

$.mobile.navigate.history.stack[1]; 
// Object {url: "http://localhost:61659/Search/Filter", hash: "#/Search/Filter", title: "Search Result", transition: "pop", pageUrl: "/Search/Filter"…} 

ed è possibile utilizzare questa funzione di utilità per vedere cosa sta succedendo:

$(document).on('pagechange',function() { 
    console.log("Current:" + $.mobile.navigate.history.getActive().url); 
    console.log("Stack: (active index = " + $.mobile.navigate.history.activeIndex + " -previous index: " + $.mobile.navigate.history.previousIndex + ")"); 
    $.each($.mobile.navigate.history.stack, function (index, val) { 
     console.log(index + "-" + val.url); 
    }); 
}); 

vedi anche here

comportamento attuale Sconsigliata di strippaggio stringhe di query da hash. A partire dal 1.5 seguiremo le specifiche sugli hash e forniremo un gancio per gestire la navigazione personalizzata.