HTML5/jQuery: pushState e popState - deep linking?

Question

Per prima cosa non riesco a capire quale sia il primo parametro della funzione pushState? Che cosa passo ad esso? Voglio semplicemente cambiare l'url quando scorro la mia pagina. Sto interrogando l'ID dell'elemento corrente nel viewport e il suo ID dovrebbe essere anche il link nell'URL. Funziona bene con il codice qui sotto.

var currentHash, 
     url; 

    if (history && history.pushState) { 

     $(window).scroll(function() { 
      hash = $('.layer:in-viewport').attr('id'); 
      catHash = $("#"+hash).parent('section').attr('id'); 

      var data = "nothing"; 

      if (catHash != undefined) 
       url = "/" + catHash + "/" + hash; 
      else 
       url = "/" + hash; 

      if (currentHash != hash) { 

       window.history.pushState(data, hash, url); 

      } 

      currentHash = hash; 

     }); 

    } 

Ora ho due domande:

1.) In questo momento l'URL nella AddressBar cambia con successo quando ho scorrere la mia pagina. Come posso interrogare l'url/hash nella barra degli indirizzi quando carico inizialmente la pagina. Quindi immagino di avere ora un link come www.url.com/deep Voglio scoprire che cosa è/deep? Devo semplicemente interrogare l'intera top.location e dividerla su ogni "/"? Voglio dire che quei collegamenti non sono effettivamente esistenti, quindi come faccio a evitare 404 pagine quando si chiama un URL che ho manipolato con la funzione pushState?

2.) Come posso trovare l'ultima modifica nella barra degli indirizzi quando si fa clic sul pulsante Indietro? Quindi voglio trovare /deep quando si fa clic sul pulsante Indietro del browser in modo da poter tornare a quella posizione sulla pagina. Immagino che probabilmente stia lavorando con popstate ma non riesco a scoprire come!

Grazie per il vostro aiuto!

Aggiornamento:

window.history.pushState("test", hash, url); 

...

$(window).bind('popstate', function(event){ 
     console.log(event.data); 
    }); 

Questo e 'sempre nullo. Non dovrebbe questo "test" di ritorno?

Answer 1

quale è il primo parametro della funzione pushState?

Da the documentation

oggetto di stato - L'oggetto è stato di un oggetto JavaScript che è associato con la nuova voce della storia creato da pushState(). Ogni volta che l'utente naviga verso il nuovo stato, viene generato un evento popstate e la proprietà di stato dell'evento contiene una copia dell'oggetto di stato della voce della cronologia.

Quindi è un fascio di dati di vostra scelta che si torna quando si torna a quello stato.

In questo momento l'url nella barra degli indirizzi cambia correttamente quando si scorre la pagina. Come posso interrogare l'url/hash nella barra degli indirizzi quando carico inizialmente la pagina.

Guarda l'oggetto location ... ma non è necessario. È possibile (e dovrebbe) popolare il lato server di pagine. Questo è uno dei vantaggi di pushState, il collegamento funziona ancora se JavaScript non è disponibile e il fallback lato server è integrato senza problemi.

Come è possibile trovare l'ultima modifica nella barra degli indirizzi quando si fa clic sul pulsante Indietro?

Aggiungete un listener di eventi (cercando un evento popState) ei dati memorizzati in esso saranno disponibili sull'oggetto evento. MDN has an example

Answer 2

jQuery astrae l'oggetto evento, si vuole: event.originalEvent.state;