Método de implementación de devolución en la página HTML5

Al ver este título, quizás pienses ¿qué diablos es esto? En realidad lo que quiero decir es esto, mira la grabación a continuación:

Este tipo de interacción es común en las páginas H5. Haga clic en la ciudad -> abra la capa flotante de selección de ciudad -> presione el botón de retorno para cerrar la capa flotante.

Estas operaciones se pueden realizar sin hacer clic en el botón de cerrar en la esquina superior izquierda/esquina superior derecha. El H5 de Fliggy tiene una capa emergente cuando avanza y la capa emergente se cierra al regresar. Esto no funciona para otras empresas (. Billetes de avión Qunar.com H5, hotel Meituan H5).

Debido a que el H5 se opera en un teléfono móvil, el área de cobertura del área operable con los dedos en el teléfono móvil es muy pequeña, y mucho menos las áreas de espacio muerto (cancelar/cerrar) en la esquina superior izquierda/esquina superior derecha. Sin duda has escuchado esta acción: toca para regresar. Esto es muy conveniente y fácil de operar para los usuarios. Después de seleccionar una ciudad, no es necesario hacer clic en Cancelar. Simplemente haga clic en Volver, donde el pulgar puede operar para cerrar la capa emergente.

Dado que existe una demanda tan buena, como desarrollador, definitivamente hará todo lo posible para implementar esta función. Ni siquiera necesitas buscar en Google, deberías poder pensar en métodos como History.back(), History.go(). Sin embargo, pensar en esto sigue siendo inútil. En teoría, el retorno/adelante del navegador/vista web requiere recargar la página porque la URL ha cambiado. Si realmente conoces las aplicaciones de una sola página (SPA), o usas React/Vue, debes saber que existe algo llamado: enrutamiento. Estos cambios de URL que cambian el hash y no se pueden actualizar son las funciones de historial agregadas en HTML5.

la-interfaz-de-historia

 Historial de interfaz { atributo de solo lectura longitud larga sin signo; atributo ScrollRestoration scrollRestoration; atributo de solo lectura cualquier estado; void go(opcional long delta = 0); void forward(); url = null); void replaceState (cualquier dato, título de DOMString, DOMString opcional? url = null);};

1. empujarEstado
2. reemplazar estado

Hay otro evento

1. estado pop

pushState, replaceState se utilizan para cambiar el orden de la pila del historial, onpopstate se activa al regresar y avanzar.

Lo mismo ocurre con la implementación en vue-router (línea 1694)

Ahora que hemos dicho tanto, echemos un vistazo a cómo implementar esta función.

Echemos un vistazo a la compatibilidad de pushState y replaceState.

Es todo verde y parece mucho más seguro de usar.

Idea:

1. PushState agrega hash al hacer clic en la capa emergente
2. Cuando se activa el evento onpopstate al tocar para regresar, la capa emergente se oculta y se modifica el hash.

 <button onclick=ciudad()> Ciudad</button><br> <button onclick=calendar()> Calendario</button><br> <button onclick=descripción()> Descripción</button> <div id=ciudad class=com style=display: none;> Capa emergente de ciudad de simulación</div> <div id=calendar class=com style=display: none;> Capa emergente de calendario de simulación</div> <div id=descripción class=com style=display: none;> Simular capa emergente de descripción</div>

 botón { borde: #0000; color de fondo: #f90; .com { posición: absoluto; arriba: 0; izquierda: 0; color de fondo: #888589;

 var cityNode = document.getElementById('ciudad'); var calendarNode = document.getElementById('calendario'); var descripciónNode = document.getElementById('descripción'); ; ventana.historia.pushState({'id':'ciudad'},'','#ciudad') } función calendario() { calendarNode.style.display = 'bloque'; window.history.pushState({'id':'calendar'},'','#calendar') } descripción de función() { descripciónNode.style.display = 'bloque'; window.history.pushState({'id':'descripción'},'','#descripción') } window.addEventListener('popstate', function(e){ // alerta('estado:' + e.estado + ', historiaLongitud:' + historia.longitud; if (e.estado && e.estado.id === 'ciudad') { historia.replaceState('','','#'); cityNode.style.display = 'bloque'; } else if (e.state && e.state.id === 'calendario') { History.replaceState('','','#'); mostrar = 'bloque'; } else if (e.state && e.state.id === 'descripción') { historia.replaceState('','','#'); descripciónNode.style.display = 'bloque' } else { cityNode .style.display = 'ninguno'; calendarNode.style.display = 'ninguno'; descripciónNode.style.display = 'ninguno';

Mire principalmente el código JS y monitoree los eventos de avance y retroceso de la página para controlar el historial.

Código fuente aquí

Lo anterior es el contenido completo de este artículo. Espero que sea útil para el estudio de todos. También espero que todos apoyen VeVb Wulin Network.