HTML5/jQuery: pushState y popState - ¿enlace profundo?

Question

primero apagado Parece que no puedo imaginar para qué sirve el primer parámetro en la función pushState? ¿Qué paso a eso? Simplemente quiero cambiar la URL cuando se desplaza por mi página. Estoy consultando el ID del elemento actual en la ventana gráfica y su ID también debería ser el enlace en la url. Eso funciona bien con el código a continuación.

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; 

     }); 

    } 

Ahora tengo dos preguntas:

1.) En este momento la dirección URL en el addressbar cambios con éxito cuando me desplazo a través de mi página. ¿Cómo puedo consultar el url/hash en la barra de direcciones cuando inicialmente cargo la página? Entonces imagina que tengo un enlace como www.url.com/deep. ¿Quiero saber qué/profundo es? ¿Simplemente tengo que consultar la top.location completa y dividirla en cada "/"? Quiero decir que esos enlaces en realidad no existen, entonces, ¿cómo evito las 404 páginas cuando llamo a una url que manipulé con la función pushState?

2.) ¿Cómo puedo averiguar el último cambio en la barra de direcciones al hacer clic en el botón Atrás? Así que quiero encontrar /deep al hacer clic en el botón Atrás del navegador para poder volver a esa posición en la página. ¡Supongo que esto probablemente funciona con popstate, pero no pude averiguar cómo!

¡Gracias por tu ayuda!

Actualización:

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

...

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

Esto es todos los días nula. ¿No debería esto devolver la "prueba"?

Answer 1

¿para qué sirve el primer parámetro en la función pushState?

De the documentation

objeto de estado - El objeto de estado es un objeto JavaScript que se asocia con la nueva entrada de la historia creada por pushState(). Cada vez que el usuario navega al nuevo estado, se activa un evento de estado emergente y la propiedad de estado del evento contiene una copia del objeto de estado de la entrada del historial.

Por lo tanto, es un conjunto de datos de su elección que obtiene cuando regrese a ese estado.

En este momento, la url en la barra de direcciones cambia con éxito cuando me desplazo por mi página. ¿Cómo puedo consultar el url/hash en la barra de direcciones cuando inicialmente cargo la página?

Mire el objeto location ... pero no es necesario. Puede (y debe) poblar el lado del servidor de la página. Esta es una de las ventajas de pushState, el enlace sigue funcionando si JavaScript no está disponible y la reserva del lado del servidor está integrada sin problemas.

¿Cómo puedo saber el último cambio en la barra de direcciones al hacer clic en el botón Atrás?

Agregue un detector de eventos (buscando un evento popState), y los datos almacenados en él estarán disponibles en el objeto de evento. MDN has an example

Answer 2

jQuery abstrae el objeto de evento, que desea: event.originalEvent.state;