uma introdução simples à API de história em JavaScript

a API de história é uma dessas técnicas de JavaScript que cada desenvolvedor da web precisa saber frio. Sem ele, um único clique do botão de trás irá saltar diretamente para fora de sua aplicação. Você perderá qualquer trabalho em andamento, e o Usuário será forçado a começar tudo de novo.felizmente, há uma solução fácil. Desde a formalização do HTML5 (e o lançamento do Internet Explorer 10), temos tido uma API de história que permite adicionar à lista de história e reagir à navegação para trás e para a frente. Neste artigo, você vai aprender como funciona-e você vai experimentá-lo com um exemplo ao vivo.

mas antes de seguir em frente, vamos dar uma olhada mais de perto no problema.

nos velhos tempos da web, uma página web fez uma coisa-mostrar coisas. Quando você queria olhar para outra coisa, você clicou em um link e foi para um novo URL.

Como JavaScript cresceu mais poderoso, os desenvolvedores perceberam que cada página web poderia ser uma aplicação completa em seu próprio direito. Uma página web poderia rivalizar com uma aplicação desktop! O problema era que os botões para trás e para a frente do navegador não se encaixavam neste novo modelo de Aplicação. Por exemplo, um usuário pode executar uma sequência de tarefas em uma aplicação web de uma única página e, em seguida, esperar usar o botão de trás para voltar um único passo. Em vez disso, o botão de trás retornaria à página web anterior, efetivamente fechando o aplicativo JavaScript no meio do que quer que ele estava fazendo.muitas vezes, este comportamento não era intuitivo. Por exemplo, considere uma aplicação que usa o objeto XMLHttpRequest para obter novos dados e atualizar a página. Para o usuário, pode parecer que eles estão viajando para uma nova página. Mas se eles cometerem o erro de usar o botão de trás, a ilusão é quebrada e tudo vai para o lado.

Vamos dar uma olhada mais de perto. Aqui está um exemplo que lhe permite percorrer o Dictionnaire Infernal, um livro famoso (e agora de domínio público) de 1818 descrevendo animais estranhos da superstição e mitologia. O truque é que os links anteriores e seguintes não o levam a outra página. Em vez disso, eles desencadeiam uma chamada assíncrona através de XMLHttpRequest que recebe a informação para o próximo slide. Em seguida, o código JavaScript atualiza a caixa de slide, sem perturbar o conteúdo no resto da página.

Aqui está uma versão ao vivo do exemplo, completo com suporte de API Histórico. Mesmo que tudo ocorra em uma única página web, você pode usar os botões para frente e para trás para passar sem problemas de uma imagem para a próxima. Poderá até usar o botão Recarregar (carrega de novo O ‘slide’ actual, em vez de reiniciar a aplicação inteira), e poderá colocar favoritos que mantenham o estado actual — por outras palavras, eles levam-no directamente para o ‘slide’ que está a ver de momento.

E aqui está uma versão antiga do exemplo que não usa a API de História. Não importa o quão longe você está no Show lateral — quando você usa o botão de trás, você salta de volta para a página web anterior. Os botões para a frente e recarga estão igualmente quebrados. Favoritos reiniciar a aplicação desde o início.

Você pode baixar todo o código fonte aqui para brincar. (However, it won’t work locally, because it use the XMLHttpRequest object to make web requests.) No resto deste artigo, eu vou quebrar como tudo funciona.

preparando o exemplo

Antes de entrar na API história, é importante ter uma compreensão básica de como este exemplo funciona. É tudo muito simples.

a página usa um número para acompanhar o ‘slide’ que está a mostrar de momento. Quando você carrega no próximo ou no anterior, o código muda o número actual do ‘slide’. Em seguida, ele usa sua própria função para atualizar a página.

A função é onde o trabalho real ocorre. Ele inicia um pedido asychronous usando o infame XMLHttpRequest objeto.

cabe a você decidir como o conteúdo do slide é gerado e enviado de volta para o código de chamada na página. Normalmente, você terá algum tipo de estrutura de roteamento que aciona o código do lado direito do servidor. Esse código do lado do servidor pode então pegar o conteúdo do slide de um cache, um banco de dados, um arquivo, ou até mesmo um bloco de marcação hard-coded.neste exemplo, mantive as coisas o mais simples possível. O pedido pega a marcação HTML de um arquivo estático. Então, se você está pedindo o terceiro slide (com um URL relativo como Slides/3), você recebe um trecho de marcação HTML apenas para esse slide. Calma!

Quando o pedido termina, o navegador despoleta o newSlideReceived() tratamento de eventos. Então é simplesmente uma questão de pegar a marca recebida e inseri-la na página, usando um espaço reservado .

é tudo o que você precisa saber para construir a versão ingênua desta página, que não suporta o histórico do navegador.

o objeto histórico

o history objeto existe quase desde a alvorada de JavaScript. Mas durante grande parte de sua vida, foi muito menos poderosa (e muito menos útil) do que é hoje.

the originalhistory object has just one property and three basic methods. A propriedade é length, e diz-lhe quantas entradas estão no histórico do navegador de lista:

alert("You have " + history.length + " pages in the history.");

Este detalhe é na sua maioria, inúteis.

original history métodos de back() (envia um visitante de um passo no histórico de navegação), forward() (envia um visitante um passo para a frente) e go() (leva um deslocamento numérico que informa ao navegador como muitos passos para ir para frente ou para trás). Tudo isso se soma a relativamente pouco, a menos que você queira projetar seus próprios botões personalizados para trás e para a frente em uma página web.

A HistoryAPI adiciona dois ingredientes muito mais úteis: o pushState() método e o onPopState evento.

adicionar uma entrada à lista de história

o pushState() o método é a peça central da API de História. Permite-lhe adicionar um novo item à lista de histórico da página actual. Aqui está o que parece:

neste ponto, você pode se perguntar — o que é o ponto em ter mais de uma entrada para a mesma página? O truque é que cada entrada tem algum estado anexado com ele — uma parte ligada de informação ou objeto que você definir. Quando o usuário voltar para trás através da lista de histórico, você obter a informação de estado correspondente para que você possa retornar a página para a sua versão anterior.

o método pushState() leva três argumentos:

• dados. O primeiro argumento é qualquer pedaço de dados que você deseja armazenar para representar o estado atual desta página. Você vai usar esta informação para restaurar a página quando o usuário voltar através da lista de histórico.título. O segundo argumento é o título da página que você quer que o navegador mostre. Atualmente, todos os navegadores são unificados ao ignorar este detalhe. (So you can just pass null.)
• URL. O terceiro argumento é a nova versão do URL que você quer mostrar para a página na barra de endereços do navegador. Isto permite-lhe adicionar um melhor suporte para o botão Recarregar e os favoritos do navegador.

no exemplo de apresentação Infernal Dictionnaire, é fácil adicionar suporte de história tudo o que você precisa para manter o controle é o número de slide. Você adiciona à lista de histórico cada vez que o ‘slide’ muda.

Aqui está a linha de código que você deve adicionar:

history.pushState(slideNumber, null, null);

Você vai notar que este código não alterar o título da página com o segundo argumento (porque ele não funciona de qualquer maneira) e não altera o URL (você verá como fazer isso em um momento). Tudo o que faz é guardar o número do slide.

para a imagem completa, aqui estão as duas chamadas para em seu próprio lugar-os responsáveis pelo evento para os próximos e anteriores links:

Retornar a uma página anterior

Quando você usar o pushState() método, você também precisa pensar sobre suas contrapartes naturais, o onPopState evento. Enquanto o método pushState() coloca um novo item na lista de histórico do navegador, o onPopState evento lhe dá a chance de lidar com ele quando o usuário retorna.

para entender como isso funciona, considere o que acontece se um visitante passar por todos os slides no exemplo Infernal Dictionnaire. À medida que cada ‘slide’ novo é carregado, a página adiciona um item de histórico. Mas se o usuário recuar com o botão de trás, nada acontece.

para corrigir esta falha, é necessário lidar com o evento onPopState, que é despoletado após cada navegação histórica. (Isto inclui se você usar um dos métodos de histórico, como history.back(), bem como quando o usuário clica nos botões de navegação do navegador.)

The onPopStateevent provides your code with the state information you stored earlier withpushState(). Neste caso, apenas o número do slide que você pode pegar a partir de state propriedade do argumento de evento, como:

var slideNumber = e.State;

Sua tarefa é usar as informações de estado para restaurar a versão apropriada da página. No exemplo atual, isso significa carregar o slide correspondente, chamando o handy função que lida com toda a navegação de slides. O código completo é curto e simples:

Aviso de que você precisa para verificar se o e.Statenull, o que acontece em alguns navegadores quando a página é carregada pela primeira vez e não há nenhum estado salvo.

alterar o URL

a versão actual deste exemplo suporta a lista de histórico, mas não funciona bem com o botão Recarregar. Por exemplo, se você clicar no terceiro slide e, em seguida, atualizar a página, você vai acabar de volta no início. Você vai encontrar — se na mesma situação se você tentar marcar um dos slides-voltar para o favorito e você vai começar de novo no primeiro slide.

a solução para estes problemas é usar a API de história para modificar o URL. Mas há uma razão importante para ter deixado este passo para o fim. Muitas vezes, exemplos que usam a API de História mudam a URL, mas não usam a nova URL. Isto pode levar a um aplicativo web que quebra quando o usuário o atualizar (com um erro feio 404), ou vai para uma versão semelhante, mas ligeiramente diferente da página. Se você não tem certeza de como lidar com URLs diferentes, não há vergonha em usar a abordagem simplificada do exemplo anterior.

então vamos dizer que você está pronto para mergulhar, fazer URLs melhores, e jogar bem com favoritos e atualizações do navegador. Existem duas abordagens básicas que você pode tomar:

• altere o nome da Página URL completamente. No exemplo Infernal Dictionnaire, você pode mudar o URL para Slide1.html, Slide2.html, e assim por diante à medida que o Usuário se move através dos slides. A pegada é que você precisa ter páginas reais com esses nomes (não faça isso, é complicado), ou você precisa configurar roteamento de modo que quando o seu servidor web recebe um pedido para Slide2.html ele executa o código que cria a versão correta da página.
• mantenha o mesmo nome da página, mas adicione informações ao texto da consulta. Trata-se de uma abordagem mais simples e de menor escala. À medida que o usuário viaja através da apresentação, você vai acabar com URLs como SlideShow.html?slide=1, Depois SlideShow.html?slide = 2, SlideShow.html?slide = 3, e assim por diante. O benefício desta abordagem é que é trivialmente fácil de escrever um pequeno pedaço de JavaScript que verifica a cadeia de consulta e garante que você está no slide direito quando a página é recarregada. Você não precisa de nenhum código de servidor para fazer isso funcionar — uma página pode fazer tudo.

Aqui está uma versão modificada dopushState() call you saw earlier that uses the second approach. Este código coloca o número do ‘slide’ no fim do URL:

history.pushState(slide, null, "Dictionnaire.html?slide=" + slide);

e aqui está o código que corre quando a página é recarregada. Ele verifica a informação do ‘slide’ no URL, e — se ele encontrar um número adequado — chama a função para carregar o ‘slide’.

Now you’ll never lose your place in the slideshow. Você pode experimentar a versão completa deste exemplo ou baixar tudo aqui.

detalhes finais

a API de história é fácil de usar, mas também torna fácil criar problemas maiores que você resolve. Agora que você sabe como tudo se encaixa, aqui estão alguns conselhos finais:se empurrar, tem de saltar. The pushState() method andonPopState event are partners. O que se põe com um, volta-se com o outro.