jquery.history.js VS jquery-hashchange

window history forward

Question

Ver http://balupton.github.io/jquery-history/demo/

Me atrajo jquery.history.js

significa mientras encontré

http://benalman.com/code/projects/jquery-hashchange/examples/document_domain/

Creo que el segundo solo se basa en JQuery. Quiero decir que no necesita ningún complemento adicional a jQuery.

¿Qué es especial en jquery.history.js? que hash cambio ?.

¿Qué debo usar para anular los botones de avance y retroceso de mi navegador?

Answer 1

EDITAR - finales de 2013

Otra biblioteca de hash llamada "sammy.js" también es popular. Tiene un buen mapa de enrutamiento del lado del cliente. La estructura de enrutamiento del lado del cliente se usa para manejar los eventos de intercambio de hash, de modo que puede usarla para proporcionar una funcionalidad similar a una aplicación única para algunas de sus páginas. Vea https://github.com/quirkey/sammy/wiki/Presentations para un poco de detalle.

Además, en los ejemplos a continuación se hace casi innecesario el uso de enlaces normales. Puede usar botones, li''s, lo que quiera como enlaces de respuesta de ajax, siempre que pueda enlazar con su evento de clic. Los parámetros de enrutamiento que utiliza pueden almacenarse en los atributos de datos de los elementos en los que se hace clic o en otro lugar identificable a través del elemento en el que se hace clic, es decir. en un objeto de diccionario javascript. Después de que se activa el evento de clic, puede recuperar los valores de ruta necesarios y utilizar el estado de inserción de html5, el estado de inserción de bqq de jq, el intercambio de hash, etc.

Descripción general Las bibliotecas history.js y jquery-bbq se utilizan para mantener el estado cuando se activan los eventos ajax o en la página. Utiliza estas bibliotecas para almacenar información sobre el historial del navegador y / o manipula la url para que pueda usar los botones de avance y retroceso en las páginas para llamadas ajax, cambios de pestañas, navegación de imágenes, realmente todo lo que desee para enlazar el registro del historial . Ambas bibliotecas tienen API algo similares para el uso básico.

History.js La nueva biblioteca history.js utiliza los estándares del navegador html5 para pushstate y popstate y recurre al enfoque de hashchange si el navegador no admite html5 pushstate. Pushstate le permite empujar su url a la barra del navegador = cambiar la url sin volver a cargar la página! El repositorio principal es https://github.com/browserstate/history.js

Para usarlo, usted (a) incluye los archivos de script, (b) se enlaza con el evento ''statechange'' y (c) controla el evento statechange y (d) activa el evento statechange cuando lo desea, cuando el usuario hace clic, etc.

notas: Siempre que el usuario presione el botón de avance o retroceso, se activará el evento de cambio de estado. Dentro del método / controlador de vinculación, llamará a un método que obtiene el estado correspondiente. (1) El método / función History.getState () se puede utilizar para obtener datos de su servidor en función del historial de páginas que haya introducido. Puede almacenar cualquier variable en el objeto Estado. Por lo general, usted quiere almacenar una url. (0) Debe completar el estado del historial cada vez que alguien haga clic en un enlace (sin actualización de página) para el que desea realizar un seguimiento del historial.

(0)

   $("#navbar").on("click","li[data-ajax-link=''true'']", function(e) {
        var url = $(this).data(''uri'');
        var target = $(this).data(''target'');
        var title = $(this).data(''text'');
        History.pushState({ url: url, target: target }, title, url);
    });

(1)

History.Adapter.bind(window, ''statechange'', function() {
       updateContent(History.getState());
});

(2)

 var updateContent = function(State) {
        var url = State.data.url;
        var $target = $(State.data.target);
        ajaxPost(url, $target);
  };

BBQ

La biblioteca de Ben Alman es decir. jquery-bbq.js usa hashes para controlar el historial del navegador. Es totalmente compatible con los navegadores antiguos (ya que hashchange es como una tecnología html4).

Si decide cambiar el comportamiento predeterminado de un enlace, al hacer clic en un enlace, (4) puede interceptar la devolución del enlace, evitar la acción predeterminada y llamar a $ .bbq.pushstate. Este método pushstate empuja los elementos dentro de la url después de una marca hash. (5) Este cambio del hash de url, llama a un evento ''hashchange'' al que se enlaza. (5 cont.) En el evento hashchange, puedes usar $ .bbq.getState ("paramname") para obtener el último parámetro con "paramname" después del hash. Esto es útil porque el navegador tratará los hashes en el historial normal. Así que cuando sombody hace clic hacia adelante o hacia atrás, carga el estado hash anterior o siguiente. Si está usando esto para hacer que su aplicación use ajax en gran medida, entonces haría una devolución de datos ajax para obtener la url que se colocó previamente en el hash. Para ver otro ejemplo de cómo usar esto, mira mi respuesta reciente a JQuery BBQ: ¿Dónde almacenar las URL?

Uso de la muestra de la historia de la barbacoa

(4)

 $("a[data-custom-ajax-link=''true'']").click(function (e) {
    var target = $(this).data(''target'');
    var url = $(this).attr(''href'');
    $.bbq.pushState({ url: url, target: target });
    e.preventDefault();
});

(5)

$(window).bind("hashchange", function(e) {
    var url = $.bbq.getState("url");
    var $target = $($.bbq.getState("target"));
    var frame = $.bbq.getState("target");


    $.ajax({
        url: url,
        data : null,
        type: "POST",
        beforeSend: function (xhr) { xhr.setRequestHeader(''X-Target'', frame); },
        success: function (data) {
            $target.html(data);
        }
    });


});

Tenga en cuenta que acabo de incluir los conceptos básicos de cómo podría usar estos complementos. Puede usar estos complementos para administrar el uso de los botones de avance y retroceso con pestañas, enlaces o cargas de ajax.

En cuanto a cuál es "mejor", es difícil de decir. History.js será la mejor biblioteca cuando esté completamente madura en ~ .5 años (aún está en versión beta, pero es una buena apuesta para el futuro, tenga en cuenta la gran cantidad de temas abiertos y sucursales en su sitio github). Jquery-bbq se encuentra en el otro lado del espectro, ya que tiene 3 años y no se ha actualizado para cumplir con jquery 1.9. La buena noticia es que tienen una implementación y características muy similares, por lo que tampoco es tan malo cambiar entre ellas.

History.js es un poco más compatible con el futuro. Mire su API (a mitad de camino en https://github.com/browserstate/history.js

Para comparar, la API de bbq se encuentra en la página http://benalman.com/code/projects/jquery-bbq/docs/files/jquery-ba-bbq-js.html . Hay un poco más que solo la parte de la historia.

Answer 2

No puede anular los botones de avance y retroceso del navegador, y esto es por diseño dentro de cada navegador por razones de seguridad.

Todo lo que hacen estos scripts es cambiar la ubicación o el documento document.hash de los navegadores, luego hacer un seguimiento de cuándo se usan los botones de avance o retroceso del navegador y capturar el estado hash actual del navegador.

No me malinterpretes, son excelentes scripts, pero no te permitirán anular completamente los botones de avance y retroceso.