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ásToda 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)!