HTML5 History API implementa salto sem atualização

Uma vez quando eu estava em **. Com, descobri que o efeito de animação do login e do registro era muito lindo, mas o que me chocou foi que a página não conseguiu um salto de atualização. Revi o conhecimento do front-end que aprendi e parecia não haver tecnologia para conseguir isso. Por isso, procurei no Baidu e descobri que isso foi originalmente alcançado usando a API History no HTML5.

Uma vez quando eu estava no **. Com, descobri que os efeitos da animação do login e do registro eram muito lindos, mas o que me chocou foi que a página poderia realmente obter saltos sem atualização (revisados, você pode chegar a este lugar ao assistir a esse efeito: Github ou FM). Revi o conhecimento do front-end que aprendi e parecia não haver tecnologia que pudesse conseguir isso. Então, descobri que isso foi originalmente alcançado usando a API da história no HTML5, mas nunca foi útil. Essa tecnologia não foi aplicada até que o blog fosse revisado.

1. Adicionado a função de adicionar itens no histórico do navegador via JS.

2. Exiba o URL na barra de endereço do navegador alterada sem atualizar a página.

3. Adicionado um evento que dispara quando o usuário clica no botão traseiro do navegador.

Nos três pontos acima, é possível alterar dinamicamente o URL na barra de endereços do navegador sem atualizar a página e exibir o conteúdo da página dinamicamente.

Por exemplo: quando o conteúdo da página A e B é diferente, antes de HTML5, se você mudar da página A para a página B, precisará alternar da página A para a página B no navegador ou, se precisar ter uma função de botão de volta, poderá adicionar #XXXX ao endereço da URL para realizar a função traseira. Agora, no HTML5, você pode implementar o seguinte processamento através da API da história:

1. Solicite os dados B na página A enviando solicitação AJAX.

2. Carregue as informações correspondentes através de JS na página A no local correspondente.

3. Mude do endereço URL da página A para o endereço URL da página B na barra de endereços do navegador através da API do histórico sem atualizar a página.

1. comprimento o número de termos na história. O histórico que o JavaScript pode gerenciar é limitado ao intervalo que pode ser alcançado usando as teclas avançadas e traseiras do navegador. Esta propriedade retorna a soma da contagem de endereços contida nos dois botões de frente e traseiro.

1.

2. Avançar () Avançar é equivalente a pressionar a tecla avançada.

3.go () Uso: History.Go (x); Vá para o endereço especificado dentro do escopo da história. Se x <0, depois os endereços x, se x> 0, depois os endereços X, se x == 0, atualize a página que agora estiver aberta. history.go (0) é equivalente ao local.reload ().

1. History.pushstate (dados, título [, URL]): Adicione um registro ao topo da pilha de histórico; Os dados serão passados ​​como um parâmetro quando o evento OnPopstate for acionado; O título é o título da página e todos os navegadores atuais ignorarão este parâmetro; URL é o endereço da página, opcional, e o padrão é o endereço da página atual.

2. History.Replacestate (dados, título [, URL]): Altere o histórico atual, os parâmetros são os mesmos que acima.

3. History.State: Usado para armazenar dados de dados dos métodos acima. As permissões de leitura e gravação de diferentes navegadores são diferentes.

4. Evento PopState: Este evento é acionado quando o usuário clica no botão traseiro ou para a frente do navegador. O valor da propriedade do estado do objeto de evento que aciona o evento é lido na função de manuseio de eventos. Esse valor da propriedade é o primeiro valor de parâmetro usado ao executar o método PushState, que salva o objeto que é adicionado ao histórico do navegador de maneira síncrona.

Até agora, o navegador suporta a API da história em HTML5 pelo IE10, Firefox4 ou acima, Chrome 8 ou acima, Safari5 ou acima.