Introducción a html5 (8) Explicación histórica detallada

HTML5 agrega una nueva administración del historial y los usuarios pueden cambiar de página del historial mediante los botones "adelante" y "atrás". Esto permite que algunas páginas nuevas que no se abren en la página nueva se muevan libremente hacia adelante y hacia atrás, mejorando la experiencia del usuario.

A través del evento haschange, puedes saber cuándo han cambiado los parámetros de la URL, es decir, cuándo reaccionar. La API de administración de estado permite cambiar la URL del navegador sin cargar una página nueva. Entonces necesitas usar el método History.pushState(). El método History.pushState() recibe tres parámetros: 1. Qué guardar 2. Título (normalmente una cadena vacía) 3. Dirección (opcional). Un pequeño ejemplo es el siguiente

Después de ejecutar el método History.pushState(), se agregará nueva información de estado a la pila de estado histórico y la barra de direcciones del navegador se convertirá en una nueva URL relativa. Pero el navegador no enviará una solicitud al servidor y location.href devolverá la misma dirección que la barra de direcciones incluso si el estado histórico cambia. Además, el segundo parámetro aún no está implementado en los navegadores. Puede simplemente pasar una cadena vacía o un título corto. El primer parámetro debe proporcionar tanta información como sea posible para inicializar el estado de la página.

Debido a que el método History.pushState() crea un nuevo estado histórico, encontrará que el botón "Atrás" también se puede utilizar. Al presionar el botón "Atrás" se activará el evento popstate del objeto de ventana. El objeto de evento del evento Popstate tiene una propiedad de estado que contiene el objeto de estado pasado a pushState() como primer argumento. Un pequeño ejemplo es el siguiente

El estado de actualización actualiza directamente el contenido de la barra de direcciones actual, lo que no provoca operaciones inversas y simplemente modifica la dirección actual.

Para actualizar el estado histórico actual, puede llamar a replaceState(), y los parámetros pasados ​​son los mismos que los dos primeros parámetros del método pushState(). Llamar a replaceState() no crea un nuevo estado en la pila de estados históricos, solo sobrescribe el estado actual. Un pequeño ejemplo es el siguiente

Ejemplo en línea:

Aun así creó una matriz, luego guardó el contenido generado en la matriz y luego, según el valor pasado,

Lea el contenido correspondiente de la matriz.

El problema histórico es que el primer clic no funciona, y sólo funciona el segundo clic. Es difícil.

Normalmente no necesitamos que realice operaciones particularmente complicadas, pero el hash es muy fácil de usar.

El evento onpopstate puede detectar hash inmediatamente agregando un # directamente después de la URL.

Entonces podemos hacer esto: