Cómo recibir notificaciones sobre cambios en el historial a través del historial.¿pushState?

¿Podrías enlazar al evento window.onpopstate?

Https://developer.mozilla.org/en/DOM%3awindow.onpopstate

De los documentos:

Un controlador de eventos para el popstate evento en la ventana.

Se envía un evento popstate a la ventana cada vez que el historial activo cambios de entrada. Si la entrada del historial ser activado fue creado por una llamada por la historia.pushState () o fue afectado por una llamada a la historia.replaceState(), el evento popstate propiedad del Estado contiene una copia de la entrada del historial objeto de estado.

Solía usar esto:

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');

window.addEventListener('replaceState', function(e) {
    console.warn('THEY DID IT AGAIN!');
});

Es casi lo mismo que galambalazs hizo.

Sin embargo, por lo general es excesivo. Y puede que no funcione en todos los navegadores. (Solo me importa mi versión de mi navegador.)

(Y deja un var _wr, por lo que es posible que desee envolverlo o algo. Eso no me importaba.)

Creo que este tema necesita una solución más moderna.

Estoy seguro de que nsIWebProgressListener estaba por ahí en ese entonces Me sorprende que nadie lo mencionara.

De un framescript (para compatabilidad de e10s):

let webProgress = docShell.QueryInterface(Ci.nsIInterfaceRequestor).getInterface(Ci.nsIWebProgress);
webProgress.addProgressListener(this, Ci.nsIWebProgress.NOTIFY_STATE_WINDOW | Ci.nsIWebProgress.NOTIFY_LOCATION);

Luego escuchando en el onLoacationChange

onLocationChange: function onLocationChange(webProgress, request, locationURI, flags) {
       if (flags & Ci.nsIWebProgressListener.LOCATION_CHANGE_SAME_DOCUMENT

Eso aparentemente atrapará a todos los pushState. Pero hay un comentario que advierte que "TAMBIÉN se activa para pushState". Así que tenemos que hacer un poco más de filtrado aquí para asegurarse de que es sólo pushstate cosas.

Basado en: https://github.com/jgraham/gecko/blob/55d8d9aa7311386ee2dabfccb481684c8920a527/toolkit/modules/addons/WebNavigation.jsm#L18

Y: resource: / / gre / modules / WebNavigationContent.js

Ya que estás preguntando por un complemento de Firefox, aquí está el código que tengo que trabajar. Usar unsafeWindow ya no se recomienda , y se produce un error cuando se llama a pushState desde un script cliente después de ser modificado:

Permiso denegado para acceder al historial de propiedades.pushState

En su lugar, hay una API llamada exportFunction que permite que la función se inyecte en window.history de la siguiente manera:

var pushState = history.pushState;

function pushStateHack (state) {
    if (typeof history.onpushstate == "function") {
        history.onpushstate({state: state});
    }

    return pushState.apply(history, arguments);
}

history.onpushstate = function(state) {
    // callback here
}

exportFunction(pushStateHack, unsafeWindow.history, {defineAs: 'pushState', allowCallbacks: true});

Bueno, veo muchos ejemplos de reemplazar la propiedad pushState de history pero no estoy seguro de que sea una buena idea, preferiría crear un evento de servicio basado en una API similar al historial de esa manera puede controlar no solo el estado de inserción sino también el estado de reemplazo y abrir puertas para muchas otras implementaciones que no dependen de la API de historial global. Por favor revise el siguiente ejemplo:

function HistoryAPI(history) {
    EventEmitter.call(this);
    this.history = history;
}

HistoryAPI.prototype = utils.inherits(EventEmitter.prototype);

const prototype = {
    pushState: function(state, title, pathname){
        this.emit('pushstate', state, title, pathname);
        this.history.pushState(state, title, pathname);
    },

    replaceState: function(state, title, pathname){
        this.emit('replacestate', state, title, pathname);
        this.history.replaceState(state, title, pathname);
    }
};

Object.keys(prototype).forEach(key => {
    HistoryAPI.prototype = prototype[key];
});

Si necesita la definición EventEmitter, el código anterior se basa en el emisor de eventos NodeJS: https://github.com/nodejs/node/blob/36732084db9d0ff59b6ce31e839450cd91a156be/lib/events.js. utils.inherits la implementación se puede encontrar aquí: https://github.com/nodejs/node/blob/36732084db9d0ff59b6ce31e839450cd91a156be/lib/util.js#L970

La respuesta de Galambalazs parches de mono window.history.pushState y window.history.replaceState, pero por alguna razón dejó de funcionar para mí. Aquí hay una alternativa que no es tan agradable porque utiliza encuestas:

(function() {
    var previousState = window.history.state;
    setInterval(function() {
        if (previousState !== window.history.state) {
            previousState = window.history.state;
            myCallback();
        }
    }, 100);
})();

Como estados estándar:

Tenga en cuenta que solo llamar a la historia.pushState () o history.replaceState () no activará un evento popstate. El evento popstate solo se activa haciendo una acción del navegador, como hacer clic en el botón atrás (o llamar al historial).() en JavaScript)

Necesitamos llamar al historial.volver() a trigeer WindowEventHandlers.onpopstate

Así insted de:

history.pushState(...)

Do:

history.pushState(...)
history.pushState(...)
history.back()