3

Alguém que trabalhe com SPA sabe qual é a melhor forma de trabalharmos com o botão voltar do browser?

Por exemplo, temos uma listagem de usuários e o detalhamento destes usuários através de um click. Quanto estamos na "página" de detalhamento de algum usuário precisamos que, ao clicar no botão voltar do navegador, voltasse para a listagem de usuários.

1 Resposta 1

5

Há duas formas de fazer isto:

Hash Links

Se dá pelo uso do hash links, como www.meusite.com#conteudo. Sendo que conteudo muda a cada transição que você quer que seja retornável. Por ex: você teria site.com#listagem e quando clicá-lo irá deve mudar para site.com#detalhamentoItem=15. Essa técnica se aproveita do fato que o tudo após o '#' é considerado âncora e não causa uma recarga da página.

Prós

  • O pró deste método é a compatibilidade, pois funciona desde os anos 90.
  • Funciona muito bem para páginas que escritas puramente em js (sem backend).

Contras

  • Links "feios";
  • Observar a mudança do hash pode ser extremamente cansativa em browsers mais antigos (e ignorá-los acaba com sua vantagem). Entretanto há dezenas de bibliotecas que fazem esse trabalho sujo para você. Pessoalmente, eu gosto do http://plugins.jquery.com/hashchange/ e utilizei ele em alguns projetos.

HTML5 history API

Método mais novo e que permite controle total da url. Veja mais em http://diveintohtml5.info/history.html

Prós

  • Perfeito quando seu servidor consegue gerar uma página como site.com?detalhamento=15 ou site.com/detalhamento/15, mas também pode servir o resultado via AJAX (que economiza banda). Assim tem-se a velocidade do ajax sem perder a navegação por histórico;
  • Controle total das url que serão tão bonitas quanto seu servidor e sua criatividade permitirem.

Contra

  • Usar este é método é quase impossível sem uma linguagem serverside;
  • É html5. Diga tchau à compatibilidade.
1
  • Não é quase impossível usar history API sem uma linguagem serverside. O difícil é gerenciar o SEO com roteamento javascript, independente do tipo de roteamento javascript usado. Alias, o suporte google fala sobre isso em support.google.com/webmasters/answer/174992?hl=en Commented 11/06/2014 às 2:08

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .