HTML5 History API implementa salto sin actualización

Una vez, cuando estaba en **. Com, descubrí que el efecto de animación del inicio de sesión y el registro era muy hermoso, pero lo que me sorprendió fue que la página realmente no podía lograr un salto de actualización. Revisé el conocimiento front-end que aprendí, y parecía no haber tecnología para lograr esto. Así que busqué en Baidu y descubrí que esto se logró originalmente utilizando la API de la historia en HTML5.

Una vez, cuando estaba en **. Com, descubrí que los efectos de animación del inicio de sesión y el registro eran muy hermosos, pero lo que me sorprendió fue que la página realmente podía lograr saltos sin actualización (revisados, puede llegar a este lugar al ver este efecto: Github o FM). Revisé el conocimiento front-end que aprendí, y parecía no haber tecnología que pudiera lograr esto. Así que descubrí que esto se logró originalmente utilizando la API de la historia en HTML5, pero nunca ha sido útil. Esta tecnología no se aplicó hasta que se revisó el blog.

1. Se agregó la función de agregar elementos en el historial del navegador a través de JS.

2. Muestre la URL en la barra de direcciones del navegador cambiada sin actualizar la página.

3. Se agregó un evento que dispara cuando el usuario hace clic en el botón Atrás del navegador.

A través de los tres puntos anteriores, es posible cambiar dinámicamente la URL en la barra de direcciones del navegador sin actualizar la página y mostrar el contenido de la página dinámicamente.

Por ejemplo: cuando el contenido de la página A y la página B es diferente, antes de HTML5, si cambia de la página A a la página B, debe cambiar de la página A a la página B en el navegador o, si necesita tener una función de botón de retroceso, puede agregar #XXXX a la dirección de URL para realizar la función de retroceso. Ahora en HTML5, puede implementar el siguiente procesamiento a través de la API del historial:

1. Solicitud de datos B en la página A enviando solicitud AJAX.

2. Cargue la información correspondiente a través de JS en la página A a la ubicación correspondiente.

3. Cambie de la dirección de URL de la página A a la dirección de URL de la página B en la barra de direcciones del navegador a través de la API del historial sin actualizar la página.

1.golle el número de términos en la historia. El historial que JavaScript puede administrar se limita al rango al que se puede alcanzar utilizando las claves de avance y respaldo del navegador. Esta propiedad devuelve la suma de los recuentos de dirección contenidos en los dos botones de avance y retorno.

1. Atrás () Atrás, que es equivalente a presionar la tecla Atrás.

2. Avanzar () en el futuro es equivalente a presionar la tecla de avance.

3.Go () Uso: History.go (x); Vaya a la dirección especificada dentro del alcance de la historia. Si x <0, entonces retroceda x, si x> 0, luego reenvía las direcciones X, si x == 0, luego actualice la página que ahora está abierta. History.go (0) es equivalente a la ubicación.reload ().

1. History.PushState (datos, título [, url]): agregue un registro a la parte superior de la pila de historial; Los datos se pasarán como un parámetro cuando se active el evento OnPopState; El título es el título de la página, y todos los navegadores actuales ignorarán este parámetro; La URL es la dirección de página, opcional, y el valor predeterminado es la dirección de página actual.

2. Historia.

3. Historia. Estado: Se utiliza para almacenar datos de datos de los métodos anteriores. Los permisos de lectura y escritura de diferentes navegadores son diferentes.

4. Evento de PopState: este evento se activa cuando el usuario hace clic en el botón Avance o de avance del navegador. El valor de la propiedad del estado del objeto de evento que desencadena el evento se lee en la función de manejo de eventos. Este valor de propiedad es el primer valor de parámetro utilizado al ejecutar el método PushState, que guarda el objeto que se agrega al historial del navegador sincrónicamente.

Hasta ahora, el navegador apoya la API de la historia en HTML5 por IE10, Firefox4 o superior, Chrome 8 o superior, Safari5 o superior.