Depois de alguns aprimoramentos, essa técnica se tornou muito melhor. Como esse post está desatualizado, considere ler sua continuação: Histórico para Navegação via JavaScript.

Desde minha última postagem, muita coisa aconteceu… O portal Ajax Online foi hackeado (juro que não fui eu) e está fora do ar, tive a oportunidade de conhecer o IE7 (realmente estou atrasado nesse ponto), fui convidado para ser colunista do yourDevelop, e mais outras coisinhas.

Como prometi, estou postando a versão cross-browser e acessível do meu script que faz o botão voltar funcionar. Na verdade, esse script é mais uma cópia do Mike Stenhouse, mas simplifiquei muita coisa, e melhorei um pouco no que foi possível. Alguns problemas ainda persistem no IE, mas são um tanto incomuns. Não vou explicar o código, só a parte lógica, pois os códigos já foram explicados anteriormente.

Diferente do Cau Guanabara, resolvi os problemas de refresh, bookmark e histórico (voltar e avançar) em um único script, funcionando em Firefox e IE. Tive a paciência de ler todo o script do Mike Stenhouse e entender todo ele, e criar um novo, simplificando alguns aspectos.

A lógica do Voltar-Avançar continua sempre a mesma. Manipulamos o botão através dos hashes (e iframes também, no caso do IE), que ativam o botão voltar. Neste caso, comparamos o hash da página com o local que está carregado dentro da página. Por exemplo: na barra de endereços, temos “http://localhost/index.htm#page1″, mas na página está carregado o conteúdo pertencente ao hash “page2″. Assim, quando a função “checkChanges” for executada novamente, ela vai sincronizar o hash com o conteúdo.

A parte do refresh e bookmarking é extremamente fácil. Quando a página é carregada, a função “checkChanges” (ou “checkBookmark”, no IE) é chamada, e apenas sincroniza o conteúdo com o hash inicial, sem mais enrolações.

Modificações

Em relação ao script original, modifiquei umas coisinhas. Uma delas foi a maneira como o iframe é criado. Em vez de “document.write”, usei DOM. Simples, qualquer um fazia.

As outras modificações, um pouco mais complicadas, se referem todas aos objetos urlFix e iFrameFix. Usei JSON em vez dos objetos como funções. Isso evita aquele “new”. Ahh! Também não usei o PageLocator.makeNewLocation. Usei window.location.hash, que faz a mesma coisa e ocupa menos código.

Usando no seu site

Em um comentário, perguntaram-me como proceder para utilizar o script em uma página. Acabei não explicando na hora porque ficaria muito difícil. Agora ficou fácil (nunca leram isso no Banco Postal???). Vamos lá, então.

Insira tudo que estiver entre as tags no seu site, sem exceções. E insira os links normalmente também, apontando para a página que deveria ser carregada sem o uso de Ajax. Lembre-se da query string “hash=”. Dentro daquilo deve estar todas as query strings que sejam necessárias (eu sei, é difícil usar mais que uma).

O script fará quase tudo sozinho, você só precisará da função doGetPage. Ela será a responsável pelas requisições Ajax. Faça como uma função qualquer, passando o atributo hash como query string.

E o código???

Pensou que eu ia esquecer? Não sou tão mal assim. O código está disponível para download, zipado, aqui O código acabou se perdendo no tempo e no espaço. Leia a atualização do post para algo ainda melhor! Ele tem tinha:

• A página principal index.html
• A página mock-page.php

Tudo funciona direitinho, menos doGetPage. Usei apenas para simular… Apesar de dever ser incluída, não coloquei content.php também. Por quê? Porque não faremos nada em Ajax aqui! Apenas simulando…

[update]Dica do Dekassegui, pra retirar o bloco de script suplementar lá embaixo: Subversão Parcial[/update]

Depois de alguns aprimoramentos, essa técnica se tornou muito melhor. Como esse post está desatualizado, considere ler sua continuação: Histórico para Navegação via JavaScript.