pushState () e popState (): manipulando o histórico dos navegadores

Eu estou trabalhando em um pequeno projeto no qual eu quero criar um site no estilo Ajax. O conteúdo é carregado com o jQuery'sload(). Como alguns de vocês sabem, o lado negativo disso é que a URL não muda de acordo com o conteúdo que é exibido. Para fazer este trabalho você pode usarpushState(). Como isso não é compatível com vários navegadores, usei o plug-inhistory.js.

Isso está funcionando muito bem, mas o problema é que meus botões de voltar e avançar não estão funcionando como deveriam e eu não tenho ideia do que estou fazendo de errado. O URL está sendo alterado corretamente e o conteúdo também, mas o título não está mudando. Com título quero dizer o que é mostrado como título da janela (ou aba) da janela do navegador. Ou seja a<title> da página que é carregada OU o atributo de título do link que se refere a essa página (eles são os mesmos). Eu acho que tem a ver com o fato de eu chamar apenas uma seção da página cujo título eu preciso (ou seja, adicionando#content aoload()). Eu ainda quero o título dessa página embora. Aqui está um caso de teste do que eu tenho até agora. (Não está mais disponível desde 28 Dez. 2013.) jQuery file:

$(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");
    });
});

Também observei que, quando voltando à página básica (ou seja, / sectionLoaderTest /), ela fica em branco por algum tempo e somente após algum tempo o conteúdo da primeira página é carregado. Existe uma maneira de otimizar isso?

Além disso, estou usando o jQuery para adicionar uma classe ativa ao link que foi clicado. Como posso ter certeza de que isso muda de acordo com o histórico? Para que o link correto seja destacado quando um usuário navega de volta?

Então as três perguntas são:

Obter o título trabalhando quando vai para frente e para trásOtimize o tempo de carregamento da página principalCorrigir a classe ativa ao ir para frente e para trás

Toda ajuda seja bem vinda!

NOTA 1: Eu gostaria de construir no history.js e meu próprio script e, como tal, manter o suporte para< HTML5 navegadores. Eu preferiria isso porque 1. Eu sei que isso tem que funcionar, há apenas algo que está errado. 2. Economizaria tempo se eu pudesse ver a solução de uma pessoa e implementá-la no script que eu já escrevi, em vez de descobrir um script totalmente novo.

NOTA 2: A recompensa só será dada a quem puder responder a todas as minhas perguntas (3)!

questionAnswers(2)

yourAnswerToTheQuestion