Introdução
Para que os botões "Voltar" e "Avançar" que os navegadores disponibilizam possam ser utilizados num web-site cujos conteúdos são carregados de forma assíncrona, é necessário manipular o histórico de navegação do próprio navegador.
O forma que efectivamente permite realizar este tipo de manipulação sem uma actualização da página (refresh), é através do uso da hash de localização.
Sempre que manipulamos a hash da localização atual do navegador, o mesmo vai criar uma nova entrada no histórico de navegação. Isto vai então permitir que o visitante navegue num site cujos conteúdos são carregados de forma assíncrona, através do uso das setas de navegação do próprio navegador, sem efectivamente estar a fazer uma actualização da página.
Necessidades
Para possibilitar a manipulação da hash da localização atual no navegador, existem três requisitos básicos:
- Ler: Recolher e processar o valor da hash na localização actual;
- Escrever: Actualizar a hash na localização actual com o valor desejado;
- Escutar: Detectar quando foi realizada uma alteração à hash e agir em conformidade.
Vamos ver como lidar com cada um destes requisitos:
Ler
Recolher a hash da localização actual
Para ler a hash da localização actual, podemos recorrer a JavaScript e ler o valor da propriedade window.location.hash
. O primeiro caractere vai ser sempre o indicador de hash #
, que pode ser descartado.
// ler valor e "cortar" o primeiro caractere
var hashValue = window.location.hash.substring(1);
Por questões de eficiência, vamos criar uma função para tratar desta acção:
/**
* Devolve a hash da localização actual
* @return {string} Valor da Hash com prefixo '#' ignorado.
*/
function lerHash () {
return window.location.hash.substring(1);
}
Escrever
Escrever um valor na hash da localização actual
Para actualizar a hash da localização actual do navegador de forma programática, recorremos novamente a JavaScript e à propriedade window.location.hash
:
// atribuir valor à hash
window.location.hash = 'pagina2';
Mais uma vez, por questões de eficiência, vamos criar uma função para tratar desta acção:
/**
* Actualiza a hash da localização actual com o valor facultado
* @param {string} str
*/
function escreverHash(str) {
window.location.hash = str;
}
Escutar
Escutar e detectar uma alteração na hash da localização actual do navegador
O navegador convenientemente dispara um evento sempre que a hash da localização actual foi actualizada ou alterada. Para estarmos atentos a esta actualização e despoletarmos uma acção mediante o novo valor atribuído, basta-nos configurar um manipulador de eventos usando JavaScript para ouvir este evento:
/**
* Escuta alterações na hash da localização actual.
* @param {Event} e HashChangeEvent object
*/
window.onhashchange = function(e) {
// Fazer algo quando existe uma alteração de valor
// ...
};
Uso da hash para permitir um estado "persistente" da página web
Para entendermos um pouco como tudo está a funcionar nos bastidores, vamos analisar o seguinte esquema:

Sequência de acção A: Cor Vermelha
Aqui ilustra-se o comportamento normal do navegador, sem a implementação dos requisitos que vimos em cima:
- Utilizador interage com a página;
- A página actualiza a hash para abrir uma nova entrada no histórico de navegação;
- A actualização da hash despoleta um evento que por sua vez vai chamar a função manipuladora;
- Função manipuladora não faz nada.
Sequência de acção B: Cor Verde
Aqui ilustra-se o que acontece com a aplicação dos requisitos que estudamos em cima:
- Utilizador actualiza o endereço no navegador ou recorrer aos botões "Voltar/Avançar" do próprio navegador;
- A actualização da hash despoleta um evento que por sua vez vai chamar a função manipuladora;
- Função manipuladora vai executar uma função nossa para actualizar a página;
- Página é actualizada e não acontece mais nada (nenhum refresh).
Exemplo prático
Como na tua pergunta não tens nenhum código para melhor ilustrar o teu cenário prático, de a adaptar qualquer resposta ao teu caso em específico, fica aqui um exemplo genérico.
Neste exemplo a página web simula a inserção de conteúdos via Ajax e manipula os elementos a serem apresentados ao utilizador, enquanto trata de criar novas entradas no histórico de localizações do navegador para permitir o uso dos botões "Voltar" ou "Avançar" sem causar uma actualização (refresh):
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Exemplo de navegação sem actualização da página</title>
</head>
<body>
<nav>
<ul>
<li id="pagina1">
Página 01
</li>
<li id="pagina2">
Página 02
</li>
<li id="pagina3">
Página 03
</li>
<li id="pagina4">
Página 04
</li>
</ul>
</nav>
<section>
Olá, bem vindo à Página 01!
</section>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
function cumprimenta(pagina){
$('section').delay(100).html( "Olá, bem vindo à " + $('#'+pagina).html() );
$('nav li').css("color", "black");
$this.css("color", "green");
}
function oraBolas() {
$('section').delay(100).html( "Existe qualquer coisa de errado!" );
}
/**
* Escuta alterações na hash da localização actual.
* @param {Event} e HashChangeEvent object
*/
window.onhashchange = function(e) {
var pagina = lerHash();
// aqui chama-se função X mediante o valor da variável "pagina"
if (pagina.length==7)
cumprimenta(pagina);
else
oraBolas();
};
/**
* Actualiza a hash da localização actual com o valor facultado
* @param {string} str
*/
function escreverHash(str) {
window.location.hash = str;
}
/**
* Devolve a hash da localização actual
* @return {string} Valor da Hash com prefixo '#' ignorado.
*/
function lerHash () {
return window.location.hash.substring(1);
}
$(function() {
$('nav').on("click", 'li', function (e) {
e.preventDefault();
escreverHash($(this).attr("id"));
});
});
</script>
</body>
</html>
Conclusão
Desta forma, manipulando a hash, consegue-se uma navegação consistente em todo o web-site, quer pelo uso dos links presentes na página actualmente a ser apresentada, quer pelo uso das setas "Voltar" e "Avançar" do próprio navegador.
O trabalho é todo realizado pelo evento ouvinte da alteração da hash, onde aqui deve ser chamada a função relevante que vai originar o comportamento ou alterações pretendidas.
Penso que consegues resolver assim os dois problemas na pergunta:
- Direccionar o visitante para determinada área sem refresh;
- Garantir que, se o visitante recorrer às setas de navegação presentes no próprio navegador, o web-site vai-lhe apresentar a página anterior ou seguinte conforme esperado mais uma vez sem refresh.