onpopstate
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since julio de 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;
funcRefes 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 # event-popstate |
| HTML # handler-window-onpopstate |
Compatibilidad con navegadores
Loading…