javascript - onpopstate - pushstate w3schools

¿Cómo detectar cuándo se usan history.pushState y history.replaceState?

Question

Esta pregunta ya tiene una respuesta aquí:

• ¿Cómo recibir notificaciones sobre cambios en el historial a través de history.pushState? 8 respuestas

¿Hay algún evento al que me pueda suscribir cuando se modifique el estado del historial? ¿Cómo?

Answer 1

El evento onpopstate se debe activar cuando el historial cambia, puede enlazarlo en su código de esta manera:

window.onpopstate = function (event) {
  // do stuff here
}

Este evento también puede activarse cuando se carga la página, puede determinar si el evento se desencadenó de una carga de página o al usar pushState / replaceState al marcar el objeto de evento para una propiedad de estado, no estará definido si el evento fue causado por una carga de página

window.onpopstate = function (event) {
  if (event.state) {
    // history changed because of pushState/replaceState
  } else {
    // history changed because of a page load
  }
}

Actualmente, no hay un evento onpushstate desafortunadamente, para evitar esto, debe ajustar tanto los métodos pushState como replaceState para implementar su propio evento onpushstate.

Tengo una biblioteca que hace que trabajar con pushState sea un poco más fácil, podría valer la pena Davis.js , proporciona una API sencilla para trabajar con el enrutamiento basado en pushState.

Answer 2

Solía ​​usar esto para recibir notificaciones cuando se pushState y replaceState :

// Add this:
var _wr = function(type) {
    var orig = history[type];
    return function() {
        var rv = orig.apply(this, arguments);
        var e = new Event(type);
        e.arguments = arguments;
        window.dispatchEvent(e);
        return rv;
    };
};
history.pushState = _wr(''pushState''), history.replaceState = _wr(''replaceState'');

// Use it like this:
window.addEventListener(''replaceState'', function(e) {
    console.warn(''THEY DID IT AGAIN!'');
});

Sin embargo, suele ser exagerado. Y podría no funcionar en todos los navegadores. (Solo me importa mi versión de mi navegador).

NÓTESE BIEN. Tampoco funciona en las secuencias de comandos de contenido de extensión de Google Chrome, porque no está permitido alterar el entorno JS del sitio. Puede solucionarlo insertando un <script> con dicho código, pero eso es aún más exagerado.