Botões de voltar e avançar funcionando com JQuery

Olá a todos! Hoje abordarei uma forma de contornar um problema comum a quem usa AJAX no site.

Sabemos que fazer requisições assíncronas ao servidor é muito bom, mas às vezes tem seus custos. Uma das coisas que acontecem e muitas vezes atrapalham o usuário que não está acostumado é a perda do histórico de navegação dos botões de voltar avançar do navegador.

A forma de contornar isso, descrita abaixo, é usando o plugin do JQuery jquery.history

Primeiramente, precisamos adicionar a biblioteca JQuery na lista de scripts:

<script type="text/javascript" src="jquery.js"></script>

Depois disso temos que adicionar o plugin jquery.history

<script type="text/javascript" src="jquery.history.js"></script>

Agora vamos cadastrar a função que tem o poder de adicionar histórico ao browser:

<script type="text/javascript">
	function pageload(hash) {
		
		if(hash) {
			
			$("#load").load(hash + ".html");
		} else {
			$("#load").empty();
		}
	}
	
	$(document).ready(function(){
		
		$.historyInit(pageload);
		
		$("a[@rel=´imasters´]").click(function(){
			var hash = this.href;
			hash = hash.replace(/^.*#/, ´´);
			$.historyLoad(hash);
			return false;
		});
	});
</script>

A função $.historyInit(pageload) permite que a função que está dentro do parâmetro, ou seja, pageLoad, adicione os históricos de navegação, lembrando que a função pageLoad poderá ser modificada de acordo com as necessidades do projeto – pois ela está bem simples no exemplo – e está apenas carregando páginas html de acordo com o parâmetro, mas serve para o entendimento do artigo, que é deixar funcionando os botões de voltar e avançar do navegador.

Se colocarmos o seguinte código html no conteúdo da página:

  <a href="#1" rel="imasters">página 1</a><br />
  <a href="#2" rel="imasters">página 2</a><br />
  <a href="#3" rel="imasters">página 3</a><br />
	
  <hr />
  Conteúdo:<br />

  <div id="load"></div>

Poderemos ver que o site funcionará como se estivéssemos mudando de página a cada link, mas estamos na verdade mudando apenas o conteúdo da div <div id="load"></div> , que é exatamente o que queremos.

Pronto! Agora podemos utilizar o AJAX na página como quisermos e o histórico de navegação será automaticamente adicionado ao navegador.

Para ver o exemplo acima funcionando acessem o link http://www.alantiel.com/~file/jqueryhistory