pushState() le permite cambiar la referencia que se utiliza en el encabezado HTTP para los objetos XMLHttpRequest creados después del cambio de estado. El valor de referente será la URL del documento cuya ventana es esta en el momento en que se crea el objeto XMLHttpRequest.
pushState() crea una nueva entrada en el historial del navegador, permitiéndole volver a páginas anteriores usando el botón Atrás. Mientras tanto, la historia. replaceState() reemplaza la entrada actual, evitando así la posibilidad de volver a la URL anterior mediante el botón Atrás.
Supongamos que el siguiente código JavaScript se ejecuta en la página http://x.org/foo.html:
js
Copy to Clipboard
let stateObj = {
foo: "bar",
};
history.pushState(stateObj, "page 2", "bar.html");
Esto dará como resultado que http://x.org/bar.html se muestre en la barra de URL, pero el navegador no cargará la página bar.html ni comprobará si existe.
Ahora digamos que el usuario navega a http://google.com y luego hace clic en el botón Atrás. Como resultado, la URL mostrará http://x.org/bar.html y History.state contendrá stateObj. El evento popstate no se activará porque la página se ha recargado. La página en sí se verá como bar.html.
Si el usuario vuelve a hacer clic en el botón Atrás, la URL cambiará a http://x.org/foo.html y el documento volverá a activar un evento popstate, esta vez con el objeto de estado establecido en nulo. En este caso, volver atrás tampoco cambia el contenido del documento, como en el paso anterior, aunque el propio documento puede actualizar su contenido después de recibir el evento popstate.
El método pushState() toma tres parámetros: un objeto de estado, un encabezado (ignorado por ahora) y un parámetro “URL” (opcional).
state object. El objeto de estado es un objeto JavaScript asociado con la nueva entrada del historial creada por pushState(). Cada vez que el usuario navega a un nuevo estado, se produce el evento popstate y la propiedad de estado del evento contiene una copia del objeto de estado con entradas del historial.
Un objeto de estado puede ser cualquier cosa que pueda serializarse. Debido a que Firefox almacena objetos de estado en el disco del usuario para que puedan restaurarse después de reiniciar el navegador, imponemos un límite de 640k caracteres en la representación serializada del objeto de estado. Si pasa un objeto de estado cuya representación serializada es mayor que este valor, el método pushState() generará una excepción. Si necesita mayor almacenamiento, debería considerar usar sessionStorage y/o localStorage.
title. Encabezado: todos los navegadores excepto Safari ignoran esta configuración por ahora, pero es posible que lo hagan en el futuro. Debido a cambios futuros en el método, una solución segura es pasar una cadena vacía. Alternativamente, puede pasar un encabezado corto para el estado al que está realizando la transición.
URL. Este parámetro pasa la URL de una nueva entrada en el historial. Tenga en cuenta que el navegador no intentará cargar la URL proporcionada inmediatamente después de llamar a pushState(), pero puede intentar hacerlo más tarde, por ejemplo, después de que el usuario reinicie el navegador. La nueva URL no tiene por qué ser absoluta; si es relativo, se determina en relación con la URL actual. La nueva URL debe apuntar al mismo dominio, protocolo y puerto; de lo contrario, pushState() generará una excepción. Este parámetro es opcional; si no se especifica, se utilizará la URL del documento actual.
Llamar a pushState() es algo similar a configurar window.location = “#foo” en el sentido de que ambos también crean y activan otra entrada del historial asociada con el documento actual.
Pero pushState() tiene varias ventajas:
La nueva URL puede ser cualquier cosa dentro del mismo dominio, puerto y protocolo que la dirección actual. Mientras que configurar window.location te deja en el mismo documento solo si cambias solo el hash. No es necesario cambiar la URL. Mientras que configurar window.location = “#foo”; crea una nueva entrada en el historial solo si el hash actual no es #foo
Cualquier dato se puede asociar con una nueva entrada en el historial. En el enfoque basado en hash, todos los datos relevantes deben codificarse en una cadena corta. Si los navegadores utilizan posteriormente el encabezado del título, estos datos se pueden utilizar (independientemente de, por ejemplo, el hash). Tenga en cuenta que pushState() nunca activa el evento hashchange, incluso si la nueva URL difiere de la anterior solo en hash.
En documentos XUL, crea el elemento XUL especificado. En otros documentos crea un elemento con un URI de espacio de nombres nulo.
método reemplazarState(). History.replaceState() funciona exactamente igual que History.pushState(), excepto que replaceState() modifica la entrada del historial actual en lugar de crear una nueva entrada. Tenga en cuenta que no impide que se cree una nueva entrada en el historial global del navegador.
replaceState() es especialmente útil cuando desea actualizar el objeto de estado o la URL de la entrada del historial actual en respuesta a alguna acción del usuario.
Supongamos que el siguiente código JavaScript se ejecuta en la página http://x.org/foo.html:
let stateObj = { foo: "bar" };
history.pushState(stateObj, "page 2", "bar.html");
Se puede encontrar una explicación de estas dos líneas en el ejemplo del método pushState() anterior.
A continuación, supongamos que se ejecuta código JavaScript en la página http://x.org/bar.html:
history.replaceState(stateObj, "page 3", "bar2.html");
Esto hará que http://x.org/bar2.html se muestre en la barra de URL, pero el navegador no cargará inmediatamente bar2.html ni comprobará la presencia de esta página bar2.html.
Ahora digamos que el usuario va a http://www.microsoft.com y luego hace clic en el botón Atrás. En este caso, http://x.org/bar2.html se mostrará en la barra de URL. Si el usuario vuelve a hacer clic en el botón “Atrás”, la barra de URL mostrará http://x.org/foo.html y omitirá completamente bar.html.
Evento popstate. El evento popstate aparece en la ventana cada vez que cambia la entrada activa del historial. Si la entrada del historial que se está activando se creó mediante una llamada a pushState o se activó mediante una llamada a replaceState, la propiedad de estado del evento popstate contiene una copia de la entrada del historial del objeto del evento.
Cuando se carga una página, puede tener un objeto de evento con un valor distinto de “nulo”. Esto puede suceder, por ejemplo, si la página establece un objeto de estado (usando pushState() o replaceState()) y luego el usuario reinicia el navegador. Cuando se recarga la página, recibirá el evento onload, pero no recibirá el evento popstate. Sin embargo, si lee la propiedad History.state obtendrá el objeto de estado que habría obtenido si hubiera ocurrido el evento popstate.
Usando la propiedad history.state, puede leer el estado de la entrada del historial actual sin esperar el evento popstate, por ejemplo:
let currentState = history.state;
