Esta função foi descrita brevemente antes. Desta vez, explicaremos os princípios e os problemas existentes em detalhes (uma vez que ele usa a nova API do HTML5, existem problemas de compatibilidade, por isso é recomendável que o terminal móvel use esse método).
Descrição da função:
Crie uma nova página de guia no navegador e especifique um URL. Depois que a página da Web for carregada, os cliques não podem retornar no processo normal. Como não há histórico relevante da página atual da guia, nenhum registro pode ser retornado.
Em resposta à solicitação do cliente, neste caso, adicione um link (como a página inicial) ao seu registro de histórico, para que, na página recém -aberta, clique para retornar, você possa pular para a página inicial, permitindo que os usuários vejam as várias funções do sistema e promovam a plataforma.
1. Pontos -chave do conhecimento
Html5 apresenta o método history.pushstate () e history.replacestate (), que permite adicionar e modificar o item de entradas de histórico por item. Esses métodos podem trabalhar em conjunto com o evento Window.OnPopState.
Caso:
Suponha que http://mozilla.org/foo.html executará o seguinte código JavaScript:
A cópia do código é a seguinte: var stateobj = {foo: "bar"}; history.pushstate (Stateobj, "Página 2", "Bar.html");
Isso fará com que a barra de endereços do navegador mostre http://mozilla.org/bar.html , mas a página Bar.html não carregará nem verificará se existe o bar.html.
Suponha que o usuário agora navegue para http://google.com e clique no botão Voltar. No momento, a barra de endereços exibirá http://mozilla.org/bar.html , e a página acionará o evento PopState. O objeto de estado no evento contém uma cópia do Stateobj. A página parece Foo.html, embora o conteúdo da página possa ser modificado no evento PopState.
Se clicarmos no botão Voltar novamente, o URL mudará de volta para o documento http://mozilla.org/foo.html para acionar outro evento PopState, desta vez o objeto de status é nulo. O fallback também não alterará o conteúdo do documento.
método pushState ()
pushState () possui três parâmetros: um objeto de estado, um título (que será ignorado agora) e um endereço de URL opcional. Vamos examinar os detalhes desses três parâmetros separadamente:
Objeto de Estado - Um objeto JavaScript associado a uma nova entrada de histórico criada com o método pushState (). Sempre que o usuário navega para o estado recém -criado, o evento PopState é acionado e a propriedade do estado do objeto de evento contém uma cópia do objeto de estado da entrada do histórico.
Qualquer objeto serializável pode ser tratado como um objeto de estado. Como o navegador do Firefox salva objetos de estado no disco rígido do usuário, para que eles possam ser restaurados depois que o usuário reinicia o navegador, limitamos a força do tamanho do estado a 640K. Se você passar em um objeto de estado que excede esse limite ao método pushState (), o método lançará uma exceção. Se você precisar armazenar grandes quantidades de dados, é recomendável usar o SessionStorage ou o LocalStorage.
Título - O navegador Firefox atualmente ignora esse parâmetro, embora possa ser usado no futuro. Considerando que esse método pode ser modificado no futuro, será mais seguro passar uma string vazia. Como alternativa, você também pode passar em um título curto, indicando o status que está prestes a entrar.
Endereço (URL) - O endereço da nova entrada do histórico. O navegador não carrega o endereço depois de chamar o método pushState (), mas depois pode tentar carregar, como o usuário reinicia o navegador. O novo URL não é necessariamente um caminho absoluto; Se for um caminho relativo, será baseado no URL atual; O URL passado deve ser o mesmo que o URL atual; caso contrário, o pushState () lançará uma exceção. Este parâmetro é opcional; Se não for especificado, é o URL atual do documento.
Nota: Em Gecko 2.0 (Firefox 4 / Thunderbird 3.3 / Seamonkey 2.1) para Gecko 5.0 (Firefox 5.0 / Thunderbird 5.0 / Seamonkey 2.2), os objetos passados são serializados usando JSON. Começando com Gecko 6.0 (Firefox 6.0 / Thunderbird 6.0 / Seamonkey 2.3), os objetos são serializados usando um algoritmo de cópia estruturada. Isso permitirá que mais tipos de objetos sejam passados com segurança.
Em certo sentido, chamar pushState () é um pouco semelhante à definição de janela.Location = '#Foo' e todos eles criam e ativam novas entradas de histórico no documento atual. Mas PushState () tem suas próprias vantagens:
1. O novo URL pode ser qualquer URL homólogo. Por outro lado, ao usar o método da Window.Location, apenas a modificação do hash pode garantir que ele permaneça no mesmo documento.
2. Decida se deve modificar o URL de acordo com suas necessidades pessoais. Em vez disso, defina window.Location = '#foo' e crie um novo histórico apenas se o valor atual do hash não for foo.
3. Você pode adicionar dados abstratos à nova entrada de histórico. Se você usar um método baseado em hash, só poderá transcodificar os dados relevantes em uma sequência muito curta.
Observe que o método pushState () nunca acionará o evento HashChange, mesmo que o novo endereço altere apenas o hash.
Evento PopState
O evento popstate é acionado sempre que o histórico ativado muda. Se a entrada do histórico ativada for criada pelo PushState ou afetada pelo método Replacestate, o atributo de status do evento PopState conterá uma cópia do objeto de status do histórico.
Método replacestate ()
A operação history.replacestate () é semelhante ao histórico.pushstate (), exceto que o método replacestate () modificará a entrada atual do histórico, em vez de criar uma nova entrada.
Quando você deseja atualizar o objeto de status ou URL da entrada do histórico atual em resposta a certas ações do usuário, o uso do método replacestate () é particularmente adequado.
2. Idéias de implementação
1. Use o evento PopState para ouvir o evento de clicar e retornar.
2. Quando o evento for acionado, determine se existe uma página para retornar o histórico da página atual.
3. Se não houver página que possa ser devolvida, dois registros serão inseridos:
1) A página de salto especificada.
2) Registro vazio. (Faça a página atual não alterar)
Método de implementação
// retorna à página inicial sem uma página antes de retornar a função pushHistory () {if (history.length <2) {var state = {title: "index", url: gethttpprefix + "index.html"}; window.history.pushstate (estado, "index", location.href); estado = {title: "index", url: ""}; window.history.pushstate (estado, "index", ""); } //lll("history.state " + history.state) //console.log(history.state)}Determine o número de registros na história atual. Como o navegador pressionará automaticamente um registro quando a página for carregada. Portanto, precisamos determinar se o comprimento é menor que 2.
O objeto de estado abastado é obter o link URL correspondente.
Observação:
Coloquei o URL de salto no objeto de estado para o primeiro pushstate para facilitar a operação de salto. O segundo parâmetro não tem significado prático, porque o navegador atual basicamente não aplica esse parâmetro.
O terceiro parâmetro substituirá o link na barra de endereços atual, mas a página não saltará. (Cometi um erro antes, definindo o terceiro parâmetro para o link da página inicial, que fez com que a barra de endereços fosse alterada para o link da página inicial, para que os links na página atual sejam redirecionados com base na página inicial, resultando no erro de todos os links na página que estão sendo redirecionados.)
settimeout (function () {pushHistory () window.addeventListener ("popstate", function (e) {lll ("popstate"+window.history.state) if (window.history.state! 300);Este código é colocado no evento pronto da página, com um atraso de 300 milissegundos para atrasar a operação e evitar conflitos com o evento pop do sistema.
Para determinar se o histórico possui um objeto de estado, apenas os registros que atendem aos nossos requisitos terão o objeto de estado que adicionamos, para que a operação de salto de página possa ser executada com base nesse ponto.
Isso alcançará o efeito que queremos.
4. Escreva no final
deficiência:
1. Obviamente, como mencionado no início. Somente adequado para navegadores que suportam HTML5.
2. Desde que dois registros foram inseridos, o retorno de terminais móveis como o WeChat exige dois cliques para retornar antes de iniciar a página e retornar à janela de bate -papo do WeChat, que tem uma experiência de usuário ruim.
Resumir:
Esse método pode definitivamente ser otimizado e melhorado, mas minha força não é suficiente para ser aperfeiçoada ao nível de perfeição.
Espero que os amigos que leem este artigo possam obter alguma inspiração ou há maneiras melhores de alcançá -lo.