Pesquisei e quebrei a cabeça para achar essa solução… tanto que questionei entre dar apenas o ‘mapa’ ou o script pronto. Mas sou um cara open-source por natureza, por isso vou fazer as duas coisas.

Bem, todos já sabemos que comandos em javascript não ativam os botões de histórico do navegador, mesmo que mudem 100% do conteúdo exibido. Isso não é legal, pois sabemos que o usuário busca usar os recursos que conhece e o botão ‘Voltar’ é uma instituição, existe desde que o mundo é mundo. Eu me sentia meio que ‘na obrigação’ de possibilitar isso ao usuário.

Pensei então, há alguns meses em uma solução – que me serviu no momento, mas que não ativava os botões, apenas criava um ‘histórico de comandos’ num array, com funções para adicionar, exibir e testar itens do histórico. Com isso eu fazia os meus próprios botões de histórico. Achei que fosse suficiente, mas hoje vejo que não, pois na maior parte dos casos o usuário nem entende que há um histórico ‘paralelo’ e que ele precisa clicar em outros botões para navegar…
Veja o script original:

Caí de cabeça atrás da solução, que eu já sabia, tinha algo a ver com a propriedade hash do objeto location. Descobri algumas possibilidades, a começar pelos famosos frameworks (que eu abomino…), algumas funções interessantes que só funcionavam em Mozilla, outras gigantescas demais para o meu gosto. Tentei então entender como as coisas eram feitas e fazer eu mesmo. Este é sempre o método mais enriquecedor (mas nem sempre é o mais eficiente… é bom lembrar -rsrsrs).

Entendendo

O objeto window.location tem uma propriedade chamada ‘hash’, que mostra ou define aquela parte da URL que vem no final, depois do caracter ‘#’ – que usamos para navegar para diferentes pontos na mesma página, com, por ex.:

<a name="meu_hash"></a> e chamamos com: <a href="#meu_hash">meu_hash</a>

Pois é, ele é a chave para o histórico do navegador, pois ao mudar o hash, mudamos a URL. Então se ao executar um comando, eu mudar o hash o navegador armazena como uma nova página? A resposta é não. Se não há um clique explícito do usuário em um link como o descrito acima (com um A NAME="…"), ao clicar no botão Voltar, nada acontece! O IE nem habilita o botão!!! Bem, mas a URL está diferente e é isso que vamos usar. Usaremos uma variável para armazenar o hash e um setInterval para testá-lo a intervalos regulares. Dê uma olhada nesse link: http://juliogreff.wordpress.com/2006/10/20/ativando-o-botao-voltar/.

Com o script que o Júlio mostra, resolve-se a questão. Mas resta um problema: o IE não habilitou o botão voltar apenas com a mudança do hash… Mais pesquisas e mais pesquisas para achar a solução, que quando foi encontrada me pareceu tão óbvia que não sei por que não pensei nisso antes (sempre pensamos isso, né?). Quando carregamos um frame ou iframe o IE cria um novo item no histórico! Veja a página de onde tirei a idéia: http://www.contentwithstyle.co.uk/Articles/38/fixing-the-back-button-and-enabling-bookmarking-for-ajax-apps.
Esse exemplo é crossbrowser, mas muito complicado. Serviu para esclarecer, mas não tive vontade de usá-lo.

Bem, baseado nesses scripts resolvi criar um terceiro, fundindo com o que já tinha pronto (mostrado acima) criei o objeto ajaxHistory. Vou falar sobre a lógica que usei antes de mostrar o script. Basicamente preservei os métodos e propiedades do antigo objeto e acrescentei novos métodos para permitir o uso do objeto history do navegador.

Em nosso objeto haverá um array para armazenar os comandos (como strings) chamado ajaxHistory.items e um inteiro que indica o índice do item exibido no momento, ajaxHistory.currentIndex. O sistema original funciona da forma mais simples possível. A cada comando que modifique o conteúdo da página, executamos ajaxHistory.add enviando uma string que se executada como comando reproduz a operação que modificou a página. Depois podemos usar os métodos ajaxHistory.go ou ajaxHistory.goTo para navegar pelos itens do nosso ‘histórico de comandos’. Além do método goTo, o array ajaxHistory.captions foi adicionado, possibilitando ajustar o título da página de acordo com o item exibido. Aí podemos usar ajaxHistory.hasBack e ajaxHistory.hasForward para testar se há itens atrás ou adiante do atual e assim habilitar ou desabilitar nossos botões personalizados de histórico.

Ok, mas e para usar os benditos botões de histórico do browser? Para isso vários métodos foram criados, mas para executar, basta chamar o método ajaxHistory.activateBrowserHistory no onload da página, uma única vez. Isso dispara uma série de eventos que em conjunto habilitam o histórico do navegador. Vamos a eles.

A lógica e a execução da coisa são diferentes para Mozilla e IE (novidade…).

Em ambos os casos o hash é modificado ao criar um novo item ou ao carregar um item do histórico (ajaxHistory.setHash).

No Mozilla criamos um setInterval chamando o método ajaxHistory.checkHash a cada 1/10 de seg. testando se o hash é igual a ajaxHistory.currentIndex, se for diferente, o usuário clicou no botão voltar (ou avançar). O hash é setado com o valor do índice do item no array ajaxHistory.items, então ajaxHistory.goTo é chamado com o hash como parâmetro.

No IE um iframe é inserido na página, com display:none. Este iframe carrega o arquivo ‘historyframe.html’ que deve ser criado como descrito abaixo:

No caso do IE, ajaxHistory.setHash recarrega o iframe enviando na query string o valor do índice, assim: ‘historyframe.html?2′, por exemplo. O arquivo ‘historyframe.html’ ao ser carregado testa o índice enviado na URL com o hash na URL da janela principal, se forem diferentes, ajaxHistory.goTo é chamado com o índice enviado na URL como parâmetro.

O Mozilla, ao contrário do IE, habilita os botões mas não há ação mesmo quando o iframe é recarregado, portando os dois métodos foram necessários. Bem, lá vai o script:

Note que este objeto não deve ser inicializado com o operador new, basta chamar os métodos diretamente. Veja abaixo um exemplo de uso do sistema (os comandos no exemplo não mudam o conteúdo da pagina, mas isso não faz a menor diferença – qualquer comando javascript é válido)

Espero que façam proveito das informações contidas aqui. É isso aí.