jquery - event - window history replacestate({}

¿Cómo uso history.js en mi sitio?

Question

He leído todas las publicaciones sobre history.js en stackoverflow, incluyendo, esto , esto y esto y al buscar el código fuente, pero como recién llegado a javascript / jquery estoy teniendo problemas para averiguar cómo implementar realmente para tener html 5 history soporte y respaldo para soportar navegadores html4 como ie8 / 9. Como puedo apreciar los beneficios de UX de presentar URL consistentes tanto como sea posible, cómo esto resuelve los enlaces profundos y permite los marcadores que quiero implementar, pero me pierdo un poco cuando trato de usar esto en mi sitio.

Después de agregar la secuencia de comandos history.js a mi página

El código para modificar como lo entiendo es:

    function(window,undefined){

    // Prepare
    var History = window.History; // Note: We are using a capital H instead of a lower h
    if ( !History.enabled ) {
         // History.js is disabled for this browser.
         // This is because we can optionally choose to support HTML4 browsers or not.
        return false;
    }

    // Bind to StateChange Event
    History.Adapter.bind(window,''statechange'',function(){ // Note: We are using statechange instead of popstate
        var State = History.getState(); // Note: We are using History.getState() instead of event.state
        History.log(State.data, State.title, State.url);
    });

    // Change our States
    History.pushState({state:1}, "State 1", "?state=1"); // logs {state:1}, "State 1", "?state=1"
    History.pushState({state:2}, "State 2", "?state=2"); // logs {state:2}, "State 2", "?state=2"
    History.replaceState({state:3}, "State 3", "?state=3"); // logs {state:3}, "State 3", "?state=3"
    History.pushState(null, null, "?state=4"); // logs {}, '''', "?state=4"
    History.back(); // logs {state:3}, "State 3", "?state=3"
    History.back(); // logs {state:1}, "State 1", "?state=1"
    History.back(); // logs {}, "Home Page", "?"
    History.go(2); // logs {state:3}, "State 3", "?state=3"

})(window);

¿El //Change our states donde va todo el código nuevo ya que este código solo da ejemplos de los controles de historial?

O debería escribir mi propio código en lugar de todo este bloque de código (uso jquery para ayudarme en este punto, dada mi novedad en la codificación).

Estaba leyendo este artículo sobre la carga de contenido dinámico y tratando de implementarlo en mi sitio (puedo hacer que funcione este código, pero sé que no funcionará bien en ie8 / 9), pero tengo problemas para tratar de descubrir cómo hacerlo. combinar con history.js

Aslo, en segundo lugar, estoy tratando de averiguar cómo history.js juega con modernizr?

¿Es un reemplazo de modernizr.history (donde realiza la prueba y si no hay soporte para .js vuelve a la carga de página típica) o funcionaría así:

if (Modernizr.history) {
   //Code goes here that works if it''s HTML 5 Browser with .history support? I know some HTML5 browsers deal with .history oddly (read buggy) so what happens in those cases?
} else {
   //code from above goes here? with function(window, undefined){...etc...  ?
}

Answer 1

Solo agregar soporte de historial a su sitio no lo ayudará de ninguna manera a menos que tenga funciones que lo utilicen.

En cuanto a la modernización, simplemente te dice si el historial es compatible con el navegador actual y si actúas x else action y

Ok, así es como funcionaría la historia:

Considere history.js como una grabadora de macros. Un cliente hace clic en algo y usted empuja algunas variables que asocia con una url compuesta o real:

El cliente hace clic en una búsqueda, por ejemplo, llama:

function search(params) {
  // record your current UI position
  // data (to save), title (to set on page), url (to set on page)
  History.pushState({ params: params }, "Search", "?search");


   // now run whatever should happen because client triggered search()
}

Y ahora, cuando el cliente hace clic en el botón Atrás, puede hacer que el estado previamente guardado haga algo con él. Como el cliente golpea su botón de retroceso, se activará el statechange . Y dado que está suscrito a ese evento, puede determinar qué estado guardó previamente y llamar a las funciones para cambiar la IU en consecuencia.

// Bind to StateChange Event
History.Adapter.bind(window, ''statechange'', function() {
  var State = History.getState();

  // returns { data: { params: params }, title: "Search": url: "?search" }
  console.log(State); 

  // or you could recall search() because that''s where this state was saved
  if (State.url == "?search") {
    search(data.params);
  }
});

Eso prácticamente lo resume todo. El cliente activa una función, usted asigna un state/url , y cuando el cliente hace clic atrás, observa su estado anterior y ejecuta funciones en función de si desea restaurar la interfaz de usuario u otra.

Todo esto puede convertirse rápidamente en un código complicado y complicado, y no veo qué más hay que explicar, ¡a menos que obtengas la AHA! y ahora sé qué hacer, me olvidaría de estas cosas por ahora.

Aquí no hay absolutamente nada automático para saving/restoring estados, todo lo demás en su aplicación deberá estar codificado a mano para tener en cuenta lo que sucede si cambia un estado.

Además, los enlaces profundos no tienen nada que ver con estas cosas. Su aplicación debe tener la capacidad de inicializarse y mostrar elementos específicos de la interfaz de usuario únicamente en función de llamarlo directamente a través de una url. La historia es únicamente para la administración estatal cuando los usuarios ya están usando su aplicación, por lo que puede controlar lo que sucede cuando presionan el botón back/forward .

Y todo lo que sucede a través de JS, le dará cero beneficios en lo que respecta a los motores de búsqueda, ya que no les importa js y solo indexará el texto en bruto de su página. Por lo tanto, si desea enlaces profundos compatibles con el motor de búsqueda, necesita un código del lado del servidor que le proporcione la IU a un estado específico según la URL solicitada.