[javascript] history.pushState를 통해 히스토리 변경 사항에 대한 알림을받는 방법은 무엇입니까?

5.5.9.1 이벤트 정의

popstate 세션 기록 항목을 탐색 할 때 이벤트는 어떤 경우에 발생합니다.

이것에 따르면,를 사용할 때 popstate가 시작될 이유가 없습니다 pushState. 그러나 같은 행사 pushstate가 도움이 될 것입니다. history호스트 개체 이므로 주의해야하지만이 경우 Firefox가 좋은 것 같습니다. 이 코드는 잘 작동합니다.

(function(history){
    var pushState = history.pushState;
    history.pushState = function(state) {
        if (typeof history.onpushstate == "function") {
            history.onpushstate({state: state});
        }
        // ... whatever else you want to do
        // maybe call onhashchange e.handler
        return pushState.apply(history, arguments);
    };
})(window.history);

귀하의 jsfiddle 은 다음과 같습니다.

window.onpopstate = history.onpushstate = function(e) { ... }

window.history.replaceState같은 방법으로 원숭이 패치 를 할 수 있습니다 .

참고 : 물론 onpushstate전역 객체 에 간단하게 추가 할 수 있으며 더 많은 이벤트를 처리하도록 할 수도 있습니다add/removeListener

답변

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

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

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

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

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