WindowEventHandlers.onpopstate

La propiedad npopstate del mixin WindowEventHandlers es el EventHandler para procesar eventos popstate de la ventana.

Se evní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 Status Comment
HTML Living Standard
La definición de 'onpopstate' en esta especificación.
Living Standard  

Compatibilidad con navegadores

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome para AndroidFirefox para AndroidOpera para AndroidSafari en iOSSamsung Internet
onpopstateChrome Soporte completo 5Edge Soporte completo 12Firefox Soporte completo 4IE Soporte completo 10Opera Soporte completo 11.5Safari Soporte completo 6WebView Android Soporte completo 37Chrome Android Soporte completo 18Firefox Android Soporte completo 4Opera Android Soporte completo 11.5Safari iOS Soporte completo 5.1Samsung Internet Android ?

Leyenda

Soporte completo  
Soporte completo
Compatibilidad desconocida  
Compatibilidad desconocida

Vea también