var objetoEstado;
window.history.pushState(objetoEstado, "titulo web", "https://jesusmgcia.blogspot.com");
Documentación oficial:
Manipulando el historial del navegador
El objeto DOM
window
proporciona acceso al historial del browser a través del objeto history
. Esto expone métodos útiles y propiedades que te permiten avanzar y retroceder a través del historial del usuario, asi como, --Iniciando con HTML5-- manipular el contenido del historial de la pila.Viajando a través de la historia
Retroceder y avanzar a traves del historial del usuario es realizado utilizando los métodos
back()
, forward()
, y go()
.Moviendose hacia adelante y hacia atrás
Para moverte hacia atrás, solo debes hacer:
window.history.back();
Esto actuará exactamente como si el usuario hiciera clic en el botón "atrás" en la barra de herramientas del browser.
De manera similar, puedes moverte hacia adelante (como si el usuario hiciera clic en en el botón "adelante"), de esta forma:
window.history.forward();
Moverse a un punto específico del historial
Puedes usar el método
go()
para cargar una página desde el historial de la sesión, identificada por su poscición relativa a la página actual (Iniciando con la página actual, por supuesto, relativa al índice 0).
Para moverse atráz una página (el equivalente a un llamado a
back()
):window.history.go(-1);
Para moverse una página hacia adelante, como si llamaras
forward()
:window.history.go(1);
De manera similar, puedes avanzar 2 páginas pasándo 2, y así sucesivamente.
Puedes obtener el número de páginas en el historial de la pila mirando el valor de la propiedad length:
var numberOfEntries = window.history.length;
Nota: Internet Explorer admite el paso de cadenas de URL como parámetro para
go()
; esto no es estándar y no está implementado en Gecko.Añadiendo y modificando historial de entradas
HTML5 introdujo los métodos
history.pushState()
e history.replaceState()
, los cuales te permiten añadir y modificar entradas de historial, respectivamente. Estos métodos trabajan en conjunto con el evento window.onpopstate
.Ejemplo
Suponga que http://mozilla.org/foo.html ejecuta el siguiente JavaScript:
var stateObj = { foo: "bar" };
history.pushState(stateObj, "page 2", "bar.html");
Esto causará que la barra de URL muestre http://mozilla.org/bar.html, pero no provocará que el navegador carge load.bar ni tampoco que se verifique si bar.html existe.
Suponga ahora que el usuario navega hacia http://google.com, y despúes hace clic en Atrás. En este punto, la barra de URL mostraráhttp://mozilla.org/bar.html, y la página tendrá un evento
popstate
cuyo state object contiene una copia de stateObj
. La página en si se verá como foo.html
, aunque la página podria modificar su contenido durante el evento popstate
event.
Si hacemos clic en "atrás" nuevamente, la URL cambiará a http://mozilla.org/foo.html, y el documento generará otro evento
popstate
event, esta vez con un state object nulo. Aquí también, ir atrás no cambia el contenido del documento con respecto al paso anterior, aunque el documento permite actualizar su contenido manualmente después de recibir el evento popstate
.El método pushState()
pushState()
toma tres parámetros: un objeto estado, un título (el cual es normalmente ignorado), y (opcionalmente) una URL. Vamos a examinar cada uno de estos tres parametros en más detalle:- object estado — El objeto estado es un objeto JavaScript el cual esta asociado con la nueva entrada asociada al historial creada por
pushState()
. Cada vez que el usuario navega hacia un nuevo estado, un eventopopstate
event se dispara, y la propiedadstate
del evento contiene una copia del historial de entradas del objeto estado.El objeto estado puede ser cualquier cosa que puedas pasar aJSON.stringify
. Porque Firefox guarda los objetos estado en el disco del usuario, entonces puede ser restaurado después de que el usuario reinicie su navegador, imponemos un tamaño límite de 640K caracteres en representacion JSON de un objeto estado. Si pasas un objeto estado cuya representación es más larga que esto apushState()
, el método arrojará una excepción. Si necesitas más espacio, te recomendaos usarsessionStorage
y/olocalStorage
. - título — Firefox frecuentemente ignora este parámetro, aunque podriá usarse en el futuro. Pasar una cadena de caracteres vacia aqui podría asegurar en un futuro estar a salvo en contra a futuros cambios en este método. Alternativamente podrías pasar un título corto del estado hacia el cual te estas moviendo.
- URL — El nuevo historial de entradas URL está dado por este parámetro. Note que el browser no permitirá cargar esta URL después de llamar a
pushState()
, pero podría intentar cargar la URL más tarde, por ejemplo, después de que el usuario reinicie su navegador. La nueva URL no necesita ser absoluta; si es relativ, es resuelta relativamente a la actual URL. La nueva URL debe ser del mismo origen de la actual URL; de otra forma,pushState()
no lanzará una excepción. Este parámetro es opcional; si no se especifica, se sitúa a la URL actual del documento.
En un sentido, llamar
pushState()
es similar a asignar window.location = "#foo"
,en tanto que también se va a crear y activar otra entrada al historial asociada con el documento actual. Pero pushState()
tiene las siguientes ventajas:- La nueva URL puede ser cualquier URL en el mismo origen de la actual URL. En contraste, asignar
window.location
te mantiene en el mismodocument
solamente si modificas unicamente el hash. - Tu no tienes que cambiar la URL si no deseas. En contraste, asignar
window.location = "#foo"; solamente crea una nueva entrada en el historial si el hash actual no es
#foo
. - Puedes asociar datos arbitrarios con tu nuevo historial de entrada. Con el enfoque hash-based, tu necesitas codificar todos datos relevantes dentro de una cadena de caracteres corta.
Note que
pushState()
nunca provoca un evento hashchange
para ser notificado, inclusive si la nueva URL difiere de la antigua URL únicamente en su hash.El método replaceState()
history.replaceState()
trabaja exactamente igual a history.pushState()
excepto que replaceState()
modifica la entrada al historial actual en lugar de crear una nueva.replaceState()
es particularmente útil si deseas actualizar el objeto estado o la URL del la actual entrada al historial en respuesta a alguna acción del usuario.El evento popstate
Un evento
popstate
es dirigido a la ventana cada vez que la entrada al historial cambia. Si la entrada al historial es activada y fué creada por un llamado apushState
o afectada por una llamada a replaceState
, la propiedad state del evento popstate
contiene una copia del historial de entradas del objeto estado.
No hay comentarios:
Publicar un comentario