English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
HTML5Como usar a API de histórico de registros, exemplos online demonstrando HTML5Como usar a API de histórico de registros, compatibilidade do navegador, definição de sintaxe e detalhes dos valores de propriedades, etc.
HTML5A API de histórico de registros permite que você acesse o histórico de navegação do navegador via JavaScript. HTML5A API de histórico de registros é muito útil em aplicativos web de uma página. Aplicativos web de uma página podem usar HTML5API de histórico de registros para tornar algum estado em um aplicativo "marcável". Mais tarde, retornarei a como usar a API de histórico de registros para estabelecer estados marcáveis em aplicativos de uma página.
O histórico de navegação é composto por uma pilha de URLs. Cada vez que o usuário navega no mesmo site, o URL da nova página será colocado no topo da pilha. Quando o usuário clicar no botão "Voltar", o ponteiro na pilha se moverá para o elemento anterior na pilha. Se o usuário clicar novamente no botão "Avançar", o ponteiro se moverá para o elemento mais alto na pilha. Se o usuário clicar em "Voltar" e, em seguida, clicar em um novo link, o elemento mais alto na pilha será coberto pelo novo URL.
Este é um exemplo de pilha de registros de histórico:
http://myapp.com/excelente-nov-story.html http://myapp.com/news.html http://myapp.com
A última página acessada no pilha de registros de histórico acima é http://myapp.com/excelente-nov-story.html. Se o usuário clicar no botão "Voltar", o ponteiro no pilha de registros de histórico se moverá para trás http://myapp.com/news.html. Se o usuário clicar no botão "Avançar", o ponteiro do pilha de registros de histórico se moverá para frente http://myapp.com/excelente-nov-story.html, mas se o usuário clicar em outro link (em http://myapp.com/news.html na página), então o URL do link será http://myapp.com/news.html cobre no histórico do pilha de registros.
HTML5A API de histórico permite que os aplicativos web acessem a pilha de histórico.
HTML5A API de histórico permite que a página web acesse apenas parte do histórico de navegação que está no mesmo domínio. Por motivos de segurança, esta restrição é necessária, para que a página web não possa ver quais outros sites o usuário visitou.
Da mesma forma, o HTML5A API de histórico não permite que a página web empilhe URLs no pilha de histórico que não estejam no mesmo domínio. Esta restrição garante que, quando o usuário começa a digitar a página da web, a página não pode fingir que o usuário foi redirecionado para, por exemplo, Paypal e monitorar seu nome de usuário/senhas, etc.
Você pode acessar o histórico de navegação através do objeto history, que pode ser usado como um objeto global no JavaScript (na verdade é window.history).
O objeto history contém as seguintes funções-Inclui a API de histórico:
back()
forward()
go(index)
pushState(stateObject, title, url)
replaceState(stateObject, title, url)
A função back() move o histórico de navegação para o URL anterior. O chamado back() tem o mesmo efeito que clicar no botão "Voltar" do navegador.
A função forward() move o histórico de navegação para a próxima página do histórico. O chamado forward() tem o mesmo efeito que clicar no botão "Avançar" do navegador. Apenas back() pode ser chamado na função ou clicado no botão "Voltar". Se o histórico já estiver apontando para o URL mais recente do histórico de navegação, não há direção para avançar.
A função go(index) pode mover o histórico para trás ou para frente com base no índice que você passar como parâmetro para a função go(). Se você chamar go() com um índice negativo (por exemplo, go(-1))1))). O índice indica o número de passos para avançar ou recuar no histórico de navegação, por exemplo1,2,-1,-2...
A função pushState(stateObject, title, url) envia um novo URL para a pilha de histórico. Esta função possui três parâmetros. O url é o URL que será empilhado na pilha de histórico. O parâmetro title geralmente é ignorado pelo navegador. O stateObject é, quando um novo URL é empilhado na pilha de histórico, o objeto que será transmitido com o evento. stateObject pode conter qualquer dados que você desejar. É apenas um objeto JavaScript.
A função replaceState(stateObject, title, url) funciona de maneira semelhante à função pushState(), mas substitui o elemento atual da pilha de histórico pelo novo URL. O elemento atual não necessariamente é o mais importante. Este é o elemento atual que está sendo apontado, que pode ser qualquer elemento na pilha, se as funções back(), forward() e go() já foram chamadas no objeto history.
Agora vamos ver algumas coisas sobre como usar o HTML5Exemplo da API de histórico.
Vamos primeiro ver como usar as funções back() e forward() para mover-se para frente e para trás no histórico:
history.back(); history.forward();
Lembre-se de que o objeto history está localizado dentro do objeto window, então você também pode escrever:
window.history.back(); window.history.forward();
No entanto, como o objeto window é o objeto padrão, você pode omiti-lo. No resto deste tutorial, eu omitirei o objeto window.
Lembre-se de que você não pode mudar para trás no histórico, a menos que você (ou o usuário) volte no histórico primeiro.
Agora vamos ver como usar a função go() para realizar ações semelhantes às funções back() e forward(). Primeiro, aqui está o comando usado para navegar para trás no histórico com go():
history.go(-1;
Para mover-se para trás dois passos, você pode usar-2Os parâmetros são passados para a função go() da seguinte forma:
history.go(-2;
Da mesma forma, para fazer o histórico avançar, você pode passar um índice positivo para a função go(). Aqui estão exemplos de dois passos para frente e dois passos para trás no histórico:
history.go(1; history.go(2;
Claro, se você executar essas duas linhas ao mesmo tempo, o histórico do navegador se moverá para frente3etapas.
Para empilhar o estado no histórico, chame a função pushState() do objeto history. Este é um exemplo de pushState():
var state = {};
var title = "";
var url = "next"-page.html";
history.pushState(state, title, url);Este exemplo adiciona o novo URL à pilha de histórico. Isso também alterará o campo de URL do campo de endereço do navegador, mas não fará com que o navegador tente carregar o URL.
A função replaceState() substitui o elemento history na pilha de histórico de histórico atual. Se o usuário já usou o botão "voltar" para removê-lo do histórico, isso pode não ser o elemento mais importante. Este é um exemplo de replaceState():
var state = {};
var title = "";
var url = "another-page.html";
history.replaceState(state, title, url);A substituição de estado também mudará o URL no campo de endereço do navegador, mas não fará o navegador carregar o URL. A página com o URL substituído ainda permanecerá no navegador.
HTML5O API de histórico permite que as páginas da web monitorem mudanças no histórico do navegador. Restrições de segurança também se aplicam aqui, portanto, não serão notificadas mudanças históricas que resultem em URLs fora do domínio da página.
Para monitorar mudanças no histórico do navegador, configure um listener onpopstate no objeto window. Este é um exemplo de listener de evento de histórico do navegador:
window.onpopstate = function(event){
console.log("Mudança de histórico para:") + document.location.href);
}A função de tratamento de eventos onpopstate será chamada sempre que houver mudanças no histórico do navegador na mesma página (histórico do navegador, página empurrada para a pilha de histórico). A reação ao evento de mudança histórica pode ser extrair parâmetros da URL e carregar o conteúdo correspondente na página (por exemplo, através de AJAX).
Atenção: Apenas mudanças que resultem em qualquer "voltar" ou "avançar" botão, ou funções de navegação histórica correspondentes back(), forward() e go() farão com que o listener de evento onpopstate seja chamado. A chamada de pushState() e replaceState() não desencadeará eventos de mudança de histórico.
Quando novos URLs são empurrados para a pilha de histórico, o campo de endereço do navegador mudará para o novo URL. No entanto, o navegador não tentará carregar o URL. Apenas exibirá o URL e o empurrará para a pilha, como se o navegador já visitou a página, mas a página com o novo estado empurrado ainda permanecerá no navegador.
Empurrar novos URLs para o pilha de histórico é uma maneira útil de adicionar estados específicos em aplicativos de uma página (SPA). Por exemplo, em uma loja online de uma página, o URL do aplicativo pode ser:
http://myshop.com
Este aplicativo pode ser capaz de exibir produtos na mesma página para os usuários, mas como os usuários podem enviar links para produtos específicos para amigos?
A solução é, quando o novo produto é carregado, o aplicativo de uma página única empurra o novo URL para a pilha de histórico. Isso não causará o carregamento do novo URL, mas fará com que o novo URL seja visível no campo de endereço do navegador. A partir daí, pode ser adicionado como favorito ou copiado e colado em e-mails e outros. Abaixo está um exemplo de URL com aparência que pode ser adicionado como favorito:
http://myshop.com?productId=234
ou talvez um URL mais legível:
http://myshop.com/products/234
ou talvez uma versão ligeiramente maior do REST (também mencionando o tipo de produto):
http://myshop.com/products/books/234
Após empurrar o URL para o histórico do navegador, a página da loja da web carregará o produto correspondente via AJAX e exibirá ao usuário.
Se o usuário clicar no botão "voltar", o onpopstate chamará o manipulador de evento. Em seguida, a página da web deve verificar qual é o novo URL, se o URL retornar, carregar a página inicial do produto ou aplicativo correspondente http://myshop.com.
Este é um HTML5Exemplo de código que ilustra o princípio de carregar dados no navegador usando AJAX:
<a href="javascript:push('http://myshop.com/books/123');">
Book 123
</a> <br/>
<a href="javascript:push('http://myshop.com/apps/456');">
App 456
</a>
<script>
function loadUrl(url) {
console.log("carregando dados da URL: " + url);
}
function push(url) {
history.pushState(null, null, url);
loadUrl(url);
}
window.onpopstate = function(event) {
console.log("história alterada para: " + document.location.href);
loadUrl(document.location.href);
}
</script>Este exemplo contém dois links com ouvintes de clique JavaScript. Após clicar em um dos links, a URL correspondente será empurrada para a pilha de histórico e carregada no navegador.
Este exemplo também contém um ouvinte de evento onpopstate. Quando o usuário clicar no botão "voltar" ou "avançar", este ouvinte de evento carregará qualquer URL exibida no campo de endereço do navegador.
Se o usuário clicar no link e no "voltar" /O botão "avançar", então o exemplo exibido anteriormente será aplicado. Mas, o que fazer se o usuário enviar a URL para um amigo ou adicioná-la como favorito e acessá-la mais tarde?
Se o usuário tentar acessar a URL com tag, http://myshop.com/books/123então o navegador solicitará essa URL ao servidor web. O servidor web precisa saber que deve enviar de volta o aplicativo de uma página única http://myshop.com. Você precisará configurar o servidor web para fazer isso.
Da mesma forma, o aplicativo Web de uma página deve verificar a URL usada pela primeira vez ao carregar e usar essa URL para determinar o conteúdo a ser carregado e exibido. Portanto, se o aplicativo de uma página já carregou a URL, então myshop.com/books/123Este aplicativo deve carregar o produto correspondente e exibi-lo. Esta verificação de URL deve ser feita durante a inicialização do aplicativo de uma página única.
No momento da redação deste artigo, além do Opera Mini, todos os navegadores modernos (IE, Safari, Chrome, Firefox) suportam HTML5API de Histórico.