Código

Como gerenciar o botão Voltar com JavaScript

Um grande problema com aplicativos baseados em JavaScript é que eles quebram o botão Voltar. Se você atualizar o conteúdo da página com JavaScript em vez de carregar uma nova página do servidor, nenhuma entrada será feita no histórico do navegador; Assim, quando o usuário clica em Voltar, esperando voltar ao estado anterior, eles acabam no site anterior.

Arrastar e soltar é uma ótima maneira de os usuários interagirem com seus aplicativos da web. Mas os ganhos de usabilidade serão perdidos se, depois de passar o tempo na sua aplicação, os usuários clicarem no botão Voltar esperando voltar a uma página e, em vez disso, voltarem para a tela inicial. Neste artigo “Olá! Autor de HTML5 e CSS3 Rob Crowther mostra como usar a API de histórico do HTML5 para evitar esse destino.

O problema pode ser demonstrado simplesmente. Tudo o que você precisa é de uma função que atualize a página em resposta à atividade do usuário: 

var times = 0;function doclick() {times++;document.getElementById('message').innerHTML ='Recorded ' + times + ' clicks';}

e um pouco de marcação: 

Click Me
Recorded 0 clicks

Na vida real, sua página da Web estaria fazendo algo mais complicado, como buscar novos conteúdos do servidor via AJAX, mas uma simples atualização é suficiente para demonstrar o conceito. Vamos ver o que acontece quando o usuário visita a página.

  1. O usuário inicia sua página inicial e decide visitar o incrível aplicativo Click Me do qual ouviu falar.
  2. Eles digitam o URL ou seguem um link de um email para chegar à página Click Me.
  3. Após alguns segundos de interação agradável, o estado da página foi alterado várias vezes.
  4. Mas quando o usuário clica no botão Voltar no navegador, eles descobrem que, em vez de voltar ao estado anterior da página, eles pulam para a página inicial.

A função doclick () pode ser atualizada para aproveitar a API do histórico. Cada vez que a página é atualizada, ela também define o location.hash: 

function doclick() {times++;location.hash = times;document.getElementById('message').innerHTML ='Recorded ' + times + ' clicks';}
  1. O usuário chega na página Click Me como antes.
  2. Observe que agora o URL é atualizado após cada clique - "#" apareceu no final dele.
  3. Clicar no botão Voltar agora leva a localização de volta para o # 2, demonstrando que os estados da página foram adicionados com sucesso ao histórico. Mas observe que clicar no botão Voltar não retorna automaticamente a página ao estado anterior.

Atualizando o estado da página

Atualizar o histórico é apenas parte do problema; você também precisa poder atualizar o estado da página para corresponder ao estado no histórico.

Como você é quem gerencia o histórico, cabe a você gerenciar o estado da página. Para atualizar sua página em resposta ao location.hash sendo alterado, você pode ouvir o evento hashchange: 

function doclick() {times++;location.hash = times;}window.onhashchange = function() {if (location.hash.length > 0) {times = parseInt(location.hash.replace('#',''),10);} else {times = 0;}document.getElementById('message').innerHTML ='Recorded ' + times + ' clicks';}

A função doclick () agora é responsável apenas por atualizar a variável times e alterar o hash. O evento hashchange está no objeto da janela; quando ocorre, você verifica se o hash existe. Em um aplicativo real, você também gostaria de verificar se ele tinha um valor válido. Em seguida, você define o valor das horas como o número no hash. Finalmente, você atualiza o documento para refletir o estado correto da página. Vamos ver este novo código:

  1. Como antes, o hash na URL é atualizado quando o usuário clica.
  2. Mas agora, quando o botão Voltar é clicado, a função onhashchange é acionada e o estado da página é redefinido para corresponder ao URL.

Usando location.hash

A propriedade location.hash e o evento hashchange associado são úteis se você deseja marcar exibições específicas de seu aplicativo e permitir que o usuário navegue entre elas. O Gmail usa essa abordagem permitindo que você navegue entre sua caixa de entrada (#inbox), contatos (#contacts) e outras visualizações. Se você tiver uma conta do Gmail, observe o que acontece com o URL enquanto navega até várias páginas diferentes. depois clique novamente.

Mas no que diz respeito à informação de estado, o hash só permite armazenar uma string. Você poderia codificar um objeto mais complexo, mas o URL rapidamente se tornaria longo e pesado e não seria memorável para seus usuários. Se você precisar de informações mais complexas armazenadas como parte do histórico, uma abordagem melhor seria usar o hash como chave para extrair mais informações de estado de alguma loja. Embora você possa desenvolver sua própria abordagem para isso, o HTML5 forneceu uma API para fazer isso por você através do método history.pushState () e do evento popstate. Esses métodos permitem salvar e recarregar um objeto complexo.

Resumo

Você aprendeu que gerenciar o histórico do navegador permite que o botão Voltar se comporte de maneira mais sensata no contexto de seu aplicativo, enquanto a API de microdados oferece acesso a informações semânticas estruturadas no conteúdo da página.

Quais usos você considera para essa técnica? Você desenvolveu um método diferente? Deixe-nos saber nos comentários.

Imagem em destaque / miniatura, voltar imagem via Shutterstock.

aplicações javascript botão "voltar ola html5 e css história api roubar mais