Método de implementação de retorno na página HTML5

Ao ver esse título, você pode pensar que diabos é isso? Na verdade o que eu quero dizer é isso, assista a gravação abaixo:

Este tipo de interação é comum nas páginas H5 Clique na cidade -> abra a camada flutuante de seleção da cidade -> pressione o botão retornar para fechar a camada flutuante.

Essas operações podem ser realizadas sem clicar no botão Fechar no canto superior esquerdo/canto superior direito. O H5 da Fliggy possui uma camada pop-up ao avançar e a camada pop-up fecha ao retornar. Isso não funciona para outras empresas (. Passagens aéreas Qunar.com H5, hotel Meituan H5).

Como o H5 é operado em um telefone celular, a área de cobertura da área operável com os dedos no telefone celular é muito pequena, sem falar nas áreas de espaço morto (cancelar/fechar) no canto superior esquerdo/canto superior direito. Você sem dúvida já ouviu esta ação: toque para voltar. Isto é muito conveniente e fácil de operar para os usuários. Depois de selecionar uma cidade, não há necessidade de clicar em Cancelar. Basta clicar em Retornar, onde o polegar pode operar para fechar a camada pop-up.

Como a demanda é muito boa, como desenvolvedor, você definitivamente tentará o seu melhor para implementar esta função. Você nem precisa pesquisar no Google, você deve ser capaz de pensar em métodos como history.back(), history.go(). No entanto, pensar nisso ainda é inútil. Em teoria, o retorno/avanço do navegador/webview requer o recarregamento da página porque a URL mudou. Se você realmente conhece aplicativos de página única (SPA) ou usa React/Vue, deve saber que existe algo chamado: roteamento. Essas alterações de URL que alteram o hash e não podem ser atualizadas são as funções de histórico adicionadas ao HTML5.

a interface do histórico

 interface History { atributo readonly comprimento longo não assinado; atributo ScrollRestoration scrollRestoration; atributo readonly qualquer estado; opcional longo delta = 0); url = null); void replaceState(qualquer dado, título DOMString, DOMString opcional? url = null);};

1. pushState
2. substituirEstado

Há outro evento

1. onpopstate

pushState, replaceState são usados ​​para alterar a ordem da pilha do histórico, onpopstate é acionado ao retornar e avançar.

O mesmo é verdade para a implementação em vue-router (linha 1694)

Agora que já falamos tanto, vamos dar uma olhada em como implementar esta função.

Vamos dar uma olhada na compatibilidade de pushState e replaceState

É tudo verde e parece muito mais seguro de usar.

Ideia:

1. PushState adiciona hash ao clicar na camada pop-up
2. Quando o evento onpopstate é acionado ao tocar para retornar, a camada pop-up é ocultada e o hash é modificado.

 <button onclick=city()> Cidade</button><br> <button onclick=calendar()> Calendário</button><br> <button onclick=description()> Descrição</button> <div id=city class=com style=display: none;> Camada pop-up da cidade de simulação</div> <div id=calendar class=com style=display: none;> Camada pop-up do calendário de simulação</div> <div id=descrição class=com style=display: none;> Simular camada pop-up de descrição</div>

 botão {borda: #0000; cor de fundo: #f90;

 var cityNode = document.getElementById('city'); var calendarNode = document.getElementById('calendar'); ; window.history.pushState({'id':'city'},'','#city') } função calendário() { calendarNode.style.display = 'bloquear'; window.history.pushState({'id':'calendar'},'','#calendar') } function description() { descriptionNode.style.display = 'block'; window.history.pushState({'id':'description'},'','#description') } window.addEventListener('popstate', function(e){ // alert('state:' + e.state + ', historyLength:' + history.length); if (e.state && e.state.id === 'cidade') { history.replaceState('','','#'); cityNode.style.display = 'bloquear' } else if (e.state && e.state.id === 'calendar') { history.replaceState('','','#'); exibir = 'bloquear'; } else if (e.state && e.state.id === 'descrição') { history.replaceState('','','#'); descriptionNode.style.display = 'block' } else { cityNode; .style.display = 'none'; calendarNode.style.display = 'none';

Observe principalmente o código JS e monitore os eventos de avanço e retrocesso da página para controlar o histórico.

Código fonte aqui

O texto acima é todo o conteúdo deste artigo. Espero que seja útil para o estudo de todos. Também espero que todos apoiem a Rede VeVb Wulin.