onpopstate
La propiedad onpopstate
es el event handler
para procesar eventos popstate
de la ventana.
Se envía un evento popstate
a la ventana cada vez que la entrada activa de la historia cambia entre otra otras dos entradas del mismo documento. Si la entrada de la historia fue creada al llamar a history.pushState()
, o fue afectada por una llamada a history.replaceState()
, la propiedad state
del evento popstate
contendrá una copia del objeto de estado de la entrada de la hisotria.
Nota:
Llamar a history.pushState()
o a history.replaceState()
no dispararán un evento popstate
. El evento popstate
solamente se dispará realizando una acción de navegador, tal como pulsar el botón volver (o llamando a history.back()
en JavaScript), mientras se navega entre dos entradas de la historia de un mismo documento.
Sintaxis
window.onpopstate = funcRef;
funcRef
es una función manejadora (handler).
El evento popstate
Por ejemplo, la página en http://example.com/example.html
ejecutando el código siguiente, generará alertas como se indica.:
window.onpopstate = function (event) {
alert(
`location: ${document.location}, state: ${JSON.stringify(event.state)}`,
);
};
history.pushState({ page: 1 }, "title 1", "?page=1");
history.pushState({ page: 2 }, "title 2", "?page=2");
history.replaceState({ page: 3 }, "title 3", "?page=3");
history.back(); // alerts "location: http://example.com/example.html?page=1, state: {"page":1}"
history.back(); // alerts "location: http://example.com/example.html, state: null
history.go(2); // alerts "location: http://example.com/example.html?page=3, state: {"page":3}
Tenga en cuenta que, a pesar de que la entrada original (para http://example.com/example.html
) no tiene un objeto de estado asociado, el evento popstate
se dispara igualemente cuando se activa la entrada después de la segunda llamada a history.back()
.
Especificaciones
Specification |
---|
HTML Standard # event-popstate |
HTML Standard # handler-window-onpopstate |
Compatibilidad con navegadores
BCD tables only load in the browser