Utilizzando il tasto BACK per tornare allo stato precedente della pagina

Question

Sto cercando una nuova funzionalità per il mio sito web. Voglio fare la navigazione semplice nascondendo / mostrando elementi <div>.

Ad esempio, quando un utente fa clic su un pulsante "Dettagli" su alcuni prodotti, voglio nascondere il <div> principale e mostrare il <div> contenente i dettagli del prodotto.

Il problema è che per tornare alla "pagina" precedente, devo annullare tutte le modifiche dello stile di visualizzazione / visibilità, che è ok se l'utente fa clic sul pulsante "Chiudi" nella <div> di recente apertura. Ma la maggior parte degli utenti colpiranno il tasto BACK.

C'è un modo per rendere il tasto BACK tornare alla "stato" della pagina precedente vale a dire, annullare le modifiche visibilità / display?

Grazie.

Answer 1

per rispondere alla domanda del titolo (che è quello che cercavo)

  

Con il tasto BACK per ritornare allo stato precedente della pagina

e dal link da @ risposta di reach4thelasers, è necessario impostare un timer e controllare di nuovo e di nuovo l'ancora in corso:

//On load page, init the timer which check if the there are anchor changes each 300 ms  
$().ready(function(){  
   setInterval("checkAnchor()", 300);  
});

perché non c'è JavaScript richiamata attiva quando si preme il pulsante BACK e solo l'ancora è cambiato ...

-

Tra l'altro, il modello si sta parlando ora è conosciuto come Pagina singola interfaccia

Answer 2

Sì. Quello che stai cercando si chiama AJAX cronologia del browser .

Ci sono alcune implementazioni open là fuori, come RSH così come plugins / moduli per framework come jQuery e YUI .

Answer 3

È necessario aggiungere un'ancora per l'URL ogni volta che un cambiamento è fatto

www.site.com/page.html#anchor1

In questo modo il browser per gestire le pagine della sua storia. Ho implementato nel mio sito attuale dopo aver seguito questo tutorial, che funziona alla grande e ti dà una buona comprensione di ciò che devi fare:

http://yensdesign.com/ 2008/11 / creazione-ajax-siti-Based-on-anchor-navigazione /

Il tuo esempio nei commenti non funziona, perché funziona in questo modo:

1. La pagina ha caricato

2. pagina modificata, Aggiungi ancoraggio a URL (di nuovo pulsante vi porta back to back a 1)

3. pagina modificata, Ancora Changed (Tasto indietro ti riporta a 2)

4. pagina modificata, Ancora Changed (Tasto indietro ti riporta a 3)

   .... e così via e così via ..

Answer 4

Se c'è, suona come una cosa abbastanza male da fare dal punto di vista UX. Perché non si progetta un pulsante "indietro" nella vostra applicazione, e l'uso di design per rendere più evidente per l'utente che dovrebbero utilizzare il pulsante Indietro dell'applicazione al posto del browser.

Con il termine "uso di progettazione," Voglio dire rendere l'applicazione sembrare un'interfaccia utente autosufficiente all'interno del browser, in modo da l'occhio dell'utilizzatore soggiorni all'interno della vostra pagina, e non sul browser Chrome, quando sono alla ricerca per i controlli di interagire con la vostra applicazione.

Answer 5

È possibile farlo con tasselli, che è come è fatto in un sacco di applicazioni flash, o altre applicazioni che non vanno da una pagina all'altra. Facebook utilizza questa tecnica abbastanza liberamente. Ogni volta che l'utente fa clic su un link che dovrebbe andare nella loro storia, cambiare l'ancora sulla pagina.

Così dicono il mio link home page è:

http://www.mysite.com/#homepage

Per il collegamento che funziona la tua magia javascript, fare questo:

<a href="#otherpage" onclick="javasriptMagic()">My Other Page</a>

Questo invierà all'utente di http://www.mysite.com/#otherpage dove cliccando il tasto posteriore tornerà a http://www.mysite.com/#homepage . Poi basta leggere le ancore con

window.location.hash

di capire quale pagina si suppone di essere su.

Answer 6

Date un'occhiata a questo tutorial sulla base di un ItsNat Java framework web focalizzato su siti web Pagina singola interfaccia