Pulsante di disattivazione della cronologia HTML5

Question

Sto scrivendo un'applicazione javascript a pagina singola utilizzando l'API di cronologia HTML5. L'applicazione carica il contenuto tramite Ajax e mantiene internamente le informazioni sullo stato sullo schermo in primo piano utilizzando una pila di schermate.

Desidero abilitare la navigazione con il pulsante Indietro, ma non desidero mai che il pulsante Avanti sia abilitato.

Un paio di pezzi veloci di informazioni:

• L'utente deve sempre e solo essere in grado di tornare indietro, non avanti
• Premendo il pulsante del browser di nuovo chiude l'utente schermata pagina corrente è accesa e ricarica il precedente uno
• Il progetto è indirizzato solo alla versione più recente di Chrome, quindi altre implementazioni del browser non sono importanti
• Sto usando solo JavaScript nativo e jQuery, vorrei farlo senza History.js

Quando carico un nuovo schermo corro la seguente linea:

history.pushState(screenData, window.document.title, "#"); 

mi legano alla manifestazione popstate tramite jQuery:

$(window).bind("popstate", function(event) { 
    if (event.originalEvent.state != null) { 
     // Logic that loads the previous screen using my screen stack 
    } 
}); 

gestione storia della mia applicazione sta funzionando, ma quando Torno indietro Il pulsante Avanti è abilitato. Devo capire come rimuovere i dati da history sull'evento popstate.

Posso farlo con replaceState? Non sono sicuro di come fare per fare questo ...

Answer 1

Bad Parte

Per disabilitare davvero il pulsante in avanti, si dovrebbe essere in grado di eliminare la cronologia del browser, che non è consentito da tutti implementazioni javascript perché consentirebbe ai siti di eliminare l'intera cronologia, che non sarebbe mai nell'interesse dell'utente.

buona parte

Questo è un po 'complicato, ma credo che potrebbe funzionare se si vuole fare la storia su misura. Potresti semplicemente utilizzare pushState nell'evento popstate per rendere la tua pagina effettiva la voce più alta della cronologia. Presumo il modo in cui gestisci la cronologia, la tua finestra non scaricherà mai. Ciò consente di tenere traccia della storia dell'utente da soli:

var customHistory = []; 

Spingere ogni pagina si carica con history.pushState(screenData, window.document.title, "#");, come avete fatto prima.Solo tu aggiungi lo stato alla vostra storia di costume, troppo:

history.pushState(screenData, window.document.title, "#"); 
customHistory.push({data: screenData, title: window.document.title, location: '#'}); 

ora se si dispone di un evento popstate, basta si pop la storia personalizzato e spingerlo alla voce più alta:

window.onpopstate = function(e) { 
    var lastEntry = customHistory.pop(); 
    history.pushState(lastEntry.data, lastEntry.title, lastEntry.location); 
    // load the last entry 
} 

O in jQuery

$(window).on('popstate', function(e) { 
    var lastEntry = customHistory.pop(); 
    history.pushState(lastEntry.data, lastEntry.title, lastEntry.location); 
    // load the last entry 
}); 

Answer 2

La cronologia di inoltro cancella ogni volta che l'utente naviga. Per disabilitare la cronologia avanzata è possibile simulare la navigazione caricando un url in un iframe nascosto (ad esempio "about: blank") al caricamento della pagina.

var rurl = "about:blank?e=" + Math.random(); 
window.open(rurl, "clear_fw");//being "clear_fw" the name of the iframe 

Spero che sia d'aiuto.

Modifica: Questo aggiungerà una voce in history.back ... Nel mio caso non è stato un problema, ma tenerlo in considerazione.