Ajax e pulsante indietro. Hash cambia, ma dove è memorizzato lo stato della pagina precedente?

Sto cercando di far funzionare ajax il pulsante Indietro e mi manca qualcosa di centrale. Dove sono memorizzati gli stati della pagina precedente?Ajax e pulsante indietro. Hash cambia, ma dove è memorizzato lo stato della pagina precedente?

CASO 1:

Fare clic su "mi fanno rossa". si verifica un evento ajax e la pagina diventa rossa. Hash = #red

Fai clic su "mi fai giallo". si verifica un evento ajax e la pagina diventa gialla. Hash = #yellow

Fare clic sul pulsante Indietro. Hash ora torna a #red. Ma voglio anche che la pagina sia rossa. È ancora giallo

CASO 2:

Fare clic su "mi fanno rossa". si verifica un evento ajax e la pagina diventa rossa. Hash = #red

Fare clic su "Vai ad altro sito". Va a Google.

Fare clic sul pulsante Indietro. Torniamo al sito, hash = #red, ma voglio anche che la pagina sia rossa!

<!DOCTYPE html> 
<html> 
<style> 
    .red{background:red} 
    .yellow{background:yellow} 
</style> 
<head> 
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
    <script type="text/javascript"> 
    $(function(){ 
     $('.ajax_thing').click(function(){ 
      location.hash=$(this).attr('action_type'); 
      return false 
     }) 
     var originalTitle=document.title 
     function hashChange(){ 
      var page=location.hash.slice(1) 
      if (page!=""){ 
       $('#content').load(page+".html #sub-content") 
       document.title=originalTitle+' – '+page 
      } 
     } 
     if ("onhashchange" in window){ // cool browser 
      $(window).on('hashchange',hashChange).trigger('hashchange') 
     }else{ // lame browser 
      var lastHash='' 
      setInterval(function(){ 
       if (lastHash!=location.hash) 
        hashChange() 
       lastHash=location.hash 
      },100) 
     } 
    }) 

    </script> 
</head> 
<body> 
<menu> 
     <li><a class="ajax_thing" id = "red_action" action_type="red">Make me red</a></li> 
     <li><a class="ajax_thing" id = "yellow_action" action_type="yellow">Make me yellow</a></li> 
</menu> 
     <li><a href = "http://www.google.com">Go to other site</a></li> 
</body> 
</html> 
<script> 

$("#red_action").click(function(e) { 
    // ajax here. on success: 
    $("body").removeClass("yellow"); 
    $("body").addClass("red"); 
}) 

$("#yellow_action").click(function(e) { 
    // ajax here. on success: 
    $("body").removeClass("red"); 
    $("body").addClass("yellow"); 
}) 

</script>

fonte

2013-07-21 user984003

Si dovrebbe guardare https://github.com/browserstate/history.js/ – gmaliar

Non vedo alcuna 'richiesta ajax' e anche si è dimenticato un sacco di' punto e virgola' –

Funziona in modo che il punto e virgola mancante deve essere ok. Ho afferrato la maggior parte del codice da qualche altra parte. Io non faccio la richiesta vera e propria poiché volevo che questo funzionasse per tutti esattamente così com'è. Ma cambio il dom, che è quello che farebbe la richiesta Ajax. Pensi che una richiesta reale di ajax sia ciò che lo renderebbe magicamente funzionante? – user984003

Usando AJAX È importante aggiornare la storia manualmente history.pushState

Quindi creare un test funzionale per un evento onpopstate e l'aggiornamento del contenuto come richiesto.

https://developer.mozilla.org/en-US/docs/Web/Guide/DOM/Manipulating_the_browser_history

fonte

2013-07-21 07:20:53 j00lz

Benvenuti in Stack Overflow. Si prega di riassumere i collegamenti nella tua risposta; in questo modo, se i collegamenti diventano obsoleti, la risposta non sarà completamente inutile. – michaelb958

Questo sembra essere ciò che le persone raccomandano o, per tutti i browser, history.js. (In realtà ho finito per fare qualcosa di più semplice dove ho appena ricaricato la pagina se è avvenuto un cambiamento, tenendo traccia delle modifiche con un hash) – user984003

Piuttosto che usare il tuo JavaScript per guidare gli URL, lasciate che i vostri URL guidare il tuo JavaScript. Lascia che il gestore di eventi window.onhashchange esegua tutto il lavoro. Tutto il resto dovrebbe solo cambiare l'hash.

Non hai nemmeno bisogno di clic gestori per i collegamenti, è sufficiente impostare l'url per l'hash destra:

<a href="#red">Red</a>

Poi, il gestore hashchange si prende cura di tutto il resto:

function hashChange() { 
    var page = location.hash.slice(1); 
    if (page) { 
     $('#content').load(page+".html #sub-content"); 
     document.title = originalTitle + ' – ' + page; 
     switch (page) { 
      // page specific functionality goes here 
      case "red": 
      case "yellow": 
       $("body").removeClass("red yellow").addClass(page); 
       break; 
     } 
    } 
}

Il l'unico motivo per cambiare l'hash è se vuoi essere in grado di tornare alla pagina e caricare lo stesso stato in base all'URL. Quindi, hai già il requisito di lasciare che l'URL guidi il codice JavaScript, giusto? Altrimenti perché stai cambiando l'hash? Lo spostamento delle funzionalità dai gestori di clic e nell'evento hashchange semplifica solo le cose.

fonte

2013-07-21 08:29:05 gilly3

Ma che ancora non carica il contenuto. Inoltre, l'ajax non è guidato da href. Nel mio codice attuale è un pulsante che calla ajax e aggiunge un tag. – user984003

@ user984003 - Non capisco. Perché il contenuto non dovrebbe essere caricato? Perché è importante che tu usi un pulsante invece di un link? – gilly3

Nel modo in cui capisco la tua risposta, ho bisogno di scrivere codice per modificare in modo specifico lo stato nel modo in cui era, ad es. impostando lo sfondo su rosso. Ma l'utente potrebbe aver aggiunto un tag, modificato la valutazione e aggiunto l'articolo a un carrello, tutto tramite ajax. Ho bisogno di un modo per ottenere questo stato in un colpo solo. pushState o history.js sembra essere quello che le persone raccomandano. – user984003

Ajax e pulsante indietro. Hash cambia, ma dove è memorizzato lo stato della pagina precedente?

risposta

Problemi correlati