Estoy trabajando en un pequeño proyecto en el que quiero crear un sitio web de estilo Ajax. El contenido está cargado con jQuery.load(). Como algunos de ustedes saben, el aspecto negativo de esto es que la URL no cambia de acuerdo con el contenido que se muestra. Para hacer este trabajo puedes usarpushState(). Como no es compatible con varios navegadores, utilicé el complementohistory.js.

Esto funciona bastante bien, pero el problema es que los botones de avance y retroceso no funcionan como deberían y no tengo idea de lo que estoy haciendo mal. La URL está cambiando correctamente y el contenido también, pero el título no cambia en absoluto. Con título me refiero a lo que se muestra como título de la ventana (o pestaña) de la ventana del navegador. Es decir. la<title> de la página que está cargada O el atributo de título del enlace que hace referencia a esa página (son los mismos). Creo que tiene que ver con el hecho de que solo llamo una sección de la página cuyo título necesito (es decir, agregando#content alload()). Aunque todavía quiero el título de esa página. Aquí hay un caso de prueba de lo que tengo hasta ahora. (No disponible más desde el 28 de diciembre de 2013). Archivo jQuery:

$(document).ready(function () {
    var firstLink = $("ul > li:first-child > a");
    var menuLink = $("ul > li > a");
    var firstLoadedHtml = firstLink.attr("href") + " #content";

    $("#sectionContainer").hide().load(firstLoadedHtml).fadeIn("fast");
    firstLink.addClass("active");   

    menuLink.click(function(e) {
        history.pushState(null, null, this.href);

        e.preventDefault();
        e.stopImmediatePropagation();

        var CurLink = $(this);
        var newLoadedHtml = CurLink.attr("href") + " #content";
        var oldSection = $(".contentPage");

        $("#sectionContainer").hide().load(newLoadedHtml).fadeIn("fast");
        menuLink.removeClass("active");
        CurLink.addClass("active");
    });

    $(window).bind('popstate', function() {
            var returnLocation = history.location || document.location;

            $('#sectionContainer').load(returnLocation + "#content");
    });
});

También noté que al volver a la página básica (es decir, / sectionLoaderTest /) se queda en blanco por un tiempo y solo después de un tiempo se carga el contenido de la primera página. ¿Hay alguna forma de optimizar esto?

Además, estoy usando jQuery para agregar una clase activa al enlace en el que se ha hecho clic. ¿Cómo puedo asegurarme de que esto cambie de acuerdo con el historial? ¿Para que se resalte el enlace correcto cuando un usuario navega hacia atrás?

Así que las tres preguntas son:

Haz que el título funcione cuando vas hacia adelante y hacia atrás.Optimizar el tiempo de carga de la página principal.Corregir la clase activa al avanzar y retroceder.

Toda la ayuda de bienvenida!

NOTA 1: Me gustaría construir en history.js y mi propio script y, como tal, mantener el soporte para< HTML5 los navegadores Preferiría esto porque 1. Sé que esto tiene que funcionar, hay algo que está mal. 2. Me ahorraría tiempo si pudiera ver la solución de uno e implementarla en el script que ya escribí en lugar de descubrir un script completamente nuevo.

NOTA 2: ¡La recompensa solo se otorgará a quien pueda responder todas mis preguntas (3)!