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
Mensagem do anunciante:
Receba consultoria especializada em WordPress com os melhores profissionais do mercado. Conheça o Apiki WP Consultoria.
61 Comentários
Qual a sua opinião?