Hablemos brevemente sobre el uso de pushState y replaceState en H5.

HTML5 presenta los métodos History.pushState() y History.replaceState(), que pueden agregar y modificar entradas del historial respectivamente. Estos métodos se utilizan normalmente junto con window.onpopstate.

Supongamos que se ejecuta el siguiente código JavaScript en http://mozilla.org/foo.html:

 var stateObj = { foo: bar };history.pushState(stateObj, página 2, bar.html);

Esto hará que la barra de direcciones del navegador diga http://mozilla.org/bar.html, pero no hará que el navegador cargue bar.html ni siquiera verifique si bar.html existe.

Supongamos ahora que el usuario visita http://google.com y hace clic en el botón Atrás. En este momento, la barra de direcciones mostrará http://mozilla.org/bar.html y la página activará el evento popstate. El estado del objeto del evento contiene una copia de stateObj. La página en sí es la misma que foo.html, aunque su contenido puede modificarse en el evento popstate.

Si volvemos a hacer clic en el botón Atrás, la URL de la página cambiará a http://mozilla.org/foo.html y el objeto del documento activará otro evento popstate. Esta vez el objeto de estado del objeto de evento es nulo. Lo mismo aquí, regresar no cambia el contenido del documento. Aunque el documento puede cambiar su contenido al recibir el evento popstate, su contenido seguirá siendo consistente con la presentación anterior.

pushState() toma tres parámetros: un objeto de estado, un título (actualmente ignorado) y (opcional) una URL. Expliquemos estos tres parámetros en detalle:

Objeto de estado: el estado del objeto de estado es un objeto JavaScript que crea nuevas entradas del historial a través de pushState(). Cada vez que el usuario navega a un nuevo estado, se activa el evento popstate y la propiedad de estado del evento contiene una copia del objeto de estado de la entrada del historial.

título: este parámetro se ignora actualmente, pero puede usarse en el futuro. Pasar una cadena vacía es seguro aquí, pero no lo será en el futuro. Alternativamente, puede pasar un título corto para el estado de salto.

URL: este parámetro define el nuevo registro de URL histórico. Tenga en cuenta que el navegador no cargará esta URL inmediatamente después de llamar a pushState(), pero puede cargar esta URL en determinadas circunstancias más adelante, como cuando el usuario vuelve a abrir el navegador. La nueva URL no tiene por qué ser una ruta absoluta. Si la nueva URL es una ruta relativa, se tratará como relativa a la URL actual. La nueva URL debe tener el mismo origen que la URL actual; de lo contrario, pushState() generará una excepción. Este parámetro es opcional y por defecto es la URL actual.

En cierto sentido, llamar a pushState() es similar a configurar window.location = #foo, ambos crearán y activarán un nuevo registro de historial en la página actual. Pero pushState() tiene las siguientes ventajas:

La nueva URL puede ser cualquier URL que tenga el mismo origen que la URL actual. Y configurar window.location solo mantiene el mismo archivo si solo modificaste el valor hash.

Si lo desea, se puede crear un registro histórico sin cambiar la URL. Configurar window.location = #foo; creará una nueva entrada en el historial solo si el hash actual no es #foo.

Podemos asociar datos arbitrarios con nuevos elementos del historial. Con el método basado en valores hash, todos los datos relevantes deben codificarse en una cadena corta.

El uso de History.replaceState() es muy similar a History.pushState(). La diferencia es que replaceState() modifica el elemento del historial actual en lugar de crear uno nuevo.

Cada vez que cambia una entrada activa del historial, el evento popstate se activa en el objeto de ventana correspondiente. Si la entrada del historial actualmente activa fue creada por el método History.pushState() o modificada por el método History.replaceState(), la propiedad de estado del objeto de evento popstate contiene una copia del objeto de estado de esta entrada del historial.

También podemos obtener el estado directamente en el objeto histórico, de la siguiente manera:

 var estadoactual = historial.estado;

Cabe señalar que llamar a History.pushState() o History.replaceState() no activará el evento popstate. El evento opstate solo se activará bajo ciertas acciones del navegador, como hacer clic en los botones Atrás y Adelante (o llamar a los métodos History.back(), History.forward() y History.go() en JavaScript).

Si la dirección de la página web actual es http://example.com/example.html, ejecute el siguiente código:

 window.onpopstate = function(event) { alert(ubicación: + document.location +, estado: + JSON.stringify(event.state));};//Función de procesamiento de eventos vinculados History.pushState({página: 1} , título 1, ?page=1); //Agregar y activar una entrada del historial http://example.com/example.html?page=1, el índice de la entrada es 1history.pushState({page: 2}, título 2, ?page=2); //Agrega y activa una entrada del historial http://example.com/example.html?page=2, el índice de la entrada es 2history.replaceState({page: 3}, title 3,? page=3); //Modifique la entrada del historial actualmente activada http://ex..?page=2 a http://ex..?page=3, y el índice de entrada es 3history.back(); Ubicación emergente: http://example.com/example.html?page=1, estado: {page:1}history.back(); // Ubicación de la ventana emergente: http://example.com/example.html, estado: nullhistory. go(2); // Ubicación de la ventana emergente: http://example.com/example.html?page=3, estado: {página:3}

Wang Er usa pushState() principalmente porque puede monitorear el evento de retorno en el navegador. Esto también se aplica al terminal móvil. Consulte el siguiente código (se puede ejecutar directamente):

 <body> <div>window.onpopstate puede monitorear el evento de clave de retorno</div> <script> History.pushState({}, ); window.onpopstate = function(event) { //Aquí puede monitorear el evento de retorno del navegador y haz lo que quieras, //Por ejemplo: saltar a otra página web location.href = https://www.baidu.com } </script></body>;

Por supuesto, también puede usar window.onhashchange para monitorear el evento de devolución en el navegador. Consulte el siguiente código (se puede ejecutar directamente):

 <body> <div>window.onhashchange puede monitorear el evento de clave de retorno</div> <script> setTimeout(()=>{ location.hash=a },100); setTimeout(()=>{ window.onhashchange = función (evento) { ubicación.href = https://www.baidu.com } },200 </script></body>);

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.