onpopstate
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
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