history.js: la implementación correcta

cargo mi contenido en mi sitio en un div llamado #container con JQuery/Ajax. Tengo diferentes tipos de enlaces:

  1. enlaces ancla normales
  2. JQuery-Triggers que activan un evento cuando se hace clic en un div específico.

Ahora quiero agregar la funcionalidad para admitir los botones del navegador hacia adelante y hacia atrás y la funcionalidad de marcadores. Encontré history.js, pero tengo algunos problemas con él y no puedo encontrar un tutorial realmente fácil sobre cómo usarlo correctamente.

Mis enlaces:

<a href='#imprint' class='link_imprint'>Imprint</a>

Leí que es mejor para SEO usar <a href="imprint/" ... pero esa URL no se encontraría en mi servidor. Así que mi primeras La pregunta es, ¿cómo puedo asegurarme de que myurl.com/imprint funciona y no da como resultado una página 404?

Llegando a history.js... Por el momento incluí el siguiente código en mi index.php justo detrás del <body>

<script>
        $(document).ready(function(){

        (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
                alert("state");
                var State = History.getState(); // Note: We are using History.getState() instead of event.state         

            });

            History.Adapter.bind(window,'anchorchange',function(){

            });

            var currentState = History.getState();
            var currentUrl = currentState.url;
            var urlParts = currentUrl.split('#');

            $('#container').load('templates/'+ urlParts[1] +'.php');

            $('#footer.credits').on('click','.link_imprint',function() {

                var currentUrl = $(this).attr('href');
                var urlParts = currentUrl.split('#');   

                History.pushState(null,null,currentUrl);

                $('#container').load('templates/'+ urlParts[1] +'.php');
            });
})(window);
});

Con este código, después de hacer clic en el enlace, la URL cambia a: myurl/#imprint y se carga imprint.php en container.php. Pero cuando ahora hago clic en el botón Atrás, la URL cambia, pero el contenido sigue siendo el de la impresión. ¿Cómo puedo asegurarme de que el contenedor se actualice con el contenido antiguo? Creo que olvidé algo, pero no sé qué debo hacer. Lo probé con statechange/anchorstate pero ninguno de los dos eventos se activará cuando haga clic en el botón Atrás.

Gracias por ayudarme.

PD: Agregué una alerta al evento de cambio de estado, pero nunca se activará. Eso no puede ser correcto, ¿verdad? Puedo ver que se dispara el evento de cambio de anclaje, cuando hago clic en el enlace y la URL cambia a myurl.com/#imprint...

preguntado el 10 de marzo de 12 a las 11:03

1 Respuestas

Para navegadores más antiguos, puede usar esta biblioteca: https://github.com/devote/HTML5-History-API emula completamente el historial en navegadores más antiguos.

$( document ).ready(function() {

    function loadContent( href ) {
        alert( "loading content... from url: " + href );

        // load dynamic content here
    }

    $( window ).bind( 'popstate', function( e ) {

        // the library returns the normal URL from the event object
        var cLocation = history.location || document.location;

        alert( [ cLocation.href, history.state ] );

        loadContent( cLocation.pathname + cLocation.search + cLocation.hash );
    });

    $('#footer.credits').on('click','.link_imprint',function() {

        var currentUrl = $( this ).attr( 'href' );

        loadContent( currentUrl );

        history.pushState( null, null, currentUrl );
    });
});

Respondido el 12 de enero de 14 a las 01:01

WOW que funcionó muy bien con IE8. Nuestra empresa tiene la velocidad de un caracol cuando se trata de actualizar software. Entonces, ¿puede decirme si esto también funcionaría para IE7 e IE6? - Skadoosh

¿Cómo es posible escuchar statechange con esta biblioteca? - Clarkk

usar popstate statechange, statechange no estandarizado. popstate es un evento estándar - dedicar

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.