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

Question

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

Answer 1

El evento onpopstate debe ser despedido cuando cambia la historia, se pueden enlazar a ella en su código como este:

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

Este evento también puede ser despedido cuando se carga la página, se puede determinar si el evento fue despedido de una carga de la página, o mediante el uso de pushState/replaceState comprobando el objeto de evento para una propiedad del estado, será indefinido si el evento fue causado por una carga de la página

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

en este momento hay ningún evento onpushstate desgracia , para evitar esto necesitas envolver los métodos pushState y 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 llamarlo Davis.js, proporciona una API sencilla para trabajar con enrutamiento basado en pushState.

Answer 2

Solía ​​usar esto para también ser notificado cuando pushState y replaceState son llamados:

// 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!'); 
}); 

Por lo general es una exageración sin embargo. Y podría no funcionar en todos los navegadores. (Solo me importa mi versión de mi navegador.)

NB. Tampoco funciona en las secuencias de comandos de contenido de extensiones 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.