Come rilevare quando vengono utilizzati history.pushState e history.replaceState?

Question

C'è qualche evento a cui posso iscrivermi quando lo stato della cronologia viene modificato? Come?

Answer 1

L'evento onpopstate dovrebbe essere licenziato quando cambia la storia, è possibile associare ad esso nel codice come questo:

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

Questo evento può anche essere licenziato al caricamento della pagina, è possibile determinare se l'evento è stato sparato da un caricamento della pagina, oppure utilizzando pushState/replaceState controllando l'oggetto evento per una proprietà dello stato, sarà indefinito se l'evento è stato causato da un caricamento della pagina

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

attualmente v'è nessun caso onpushstate purtroppo , per aggirare questo è necessario avvolgere entrambi i metodi pushState e replaceState per implementare il proprio evento onpushstate.

Ho una libreria che rende un po 'più semplice il lavoro con pushState, potrebbe valere la pena di verificarlo chiamato Davis.js, fornisce una semplice API per lavorare con il routing basato su pushState.

Answer 2

ho usato per usare questo per essere avvisato di quando pushState e replaceState sono chiamati:

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

Di solito è eccessivo, però. E potrebbe non funzionare in tutti i browser. (Mi interessa solo la mia versione del mio browser.)

NB. Inoltre non funziona negli script di contenuto di estensioni di Google Chrome, perché non è consentito modificare l'ambiente JS del sito. Puoi ovviare a ciò inserendo un codice <script> con detto codice, ma questo è ancora più eccessivo.