如何通过history.pushState获得有关历史记录更改的通知？

你可以绑定到事件吗？window.onpopstate

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

从文档中：

popstate 的事件处理程序 事件。

popstate 事件被调度到 每次活动历史记录的窗口 条目更改。如果历史记录条目 被激活是由调用创建的 到 history.pushState（） 或受到影响 通过调用 history.replaceState（）， popstate 事件的 state 属性 包含历史记录条目的 state 对象。

5.5.9.1 事件定义

在某些情况下，在导航到会话历史记录条目时会触发 popstate 事件。

据此，当您使用 .但是这样的活动会派上用场。因为是一个主机对象，你应该小心它，但在这种情况下，Firefox似乎很好。这段代码工作得很好：pushStatepushstatehistory

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

这几乎和 galambalazs 一样。

不过，这通常是矫枉过正的。它可能不适用于所有浏览器。（我只关心我的浏览器版本。

（它留下了一个 var ，所以你可能想包装它或其他东西。我不在乎这个。_wr

Galambalazs 的答案是猴子补丁和，但由于某种原因它不再为我工作。这是一个不太好的替代方案，因为它使用轮询：window.history.pushStatewindow.history.replaceState

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

既然你问的是Firefox插件，这里是我开始工作的代码。不再建议使用 ，并且在修改后从客户端脚本调用 pushState 时出错：unsafeWindow

访问属性 history.pushState 的权限被拒绝

取而代之的是，有一个名为 exportFunction 的 API，它允许将函数注入到其中，如下所示：window.history

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

我认为这个话题需要一个更现代的解决方案。

我敢肯定当时就在附近，我很惊讶没有人提到它。nsIWebProgressListener

从框架脚本（用于 e10s 兼容性）：

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

然后在onLoacationChange

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

这显然会抓住所有的pushState。但是有一个评论警告说它“也会触发 pushState”。因此，我们需要在这里进行更多的过滤，以确保它只是推送状态的东西。

基于： https://github.com/jgraham/gecko/blob/55d8d9aa7311386ee2dabfccb481684c8920a527/toolkit/modules/addons/WebNavigation.jsm#L18

以及：resource://gre/modules/WebNavigationContent.js

正如标准所述：

请注意，仅调用 history.pushState（） 或 history.replaceState（） 不会触发 popstate 事件。popstate 事件只能通过执行浏览器操作来触发，例如单击后退按钮（或在 JavaScript 中调用 history.back（））

我们需要调用 history.back（） 到 trigeer WindowEventHandlers.onpopstate

因此，而不是：

history.pushState(...)

做：

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

好吧，我看到了很多替换属性的例子，但我不确定这是否是一个好主意，我更愿意创建一个基于与历史类似的 API 的服务事件，这样您不仅可以控制推送状态，还可以控制替换状态，它为许多其他不依赖全局历史 API 的实现打开了大门。请检查以下示例：pushStatehistory

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

如果需要定义，上面的代码基于 NodeJS 事件发射器：https://github.com/nodejs/node/blob/36732084db9d0ff59b6ce31e839450cd91a156be/lib/events.js。 可以在此处找到实现： https://github.com/nodejs/node/blob/36732084db9d0ff59b6ce31e839450cd91a156be/lib/util.js#L970EventEmitterutils.inherits

终于找到了“正确”（没有猴子补丁，没有破坏其他代码的风险）的方法！它需要为您的扩展添加权限（是的，在评论中帮助指出这一点的人，这是针对扩展 API 的），这是所要求的）并使用后台页面（不仅仅是内容脚本），但它确实有效。

所需的事件是 browser.webNavigation.onHistoryStateUpdated，当页面使用 API 更改 URL 时会触发该事件。它只会针对您有权访问的站点触发，如果需要，您还可以使用 URL 过滤器进一步减少垃圾邮件。它需要权限（当然还有相关域的主机权限）。historywebNavigation

事件回调获取选项卡 ID、被“导航到”的 URL 以及其他此类详细信息。如果需要在事件触发时在该页面上的内容脚本中执行操作，请直接从后台页面注入相关脚本，或者让内容脚本在加载时打开后台页面，让后台页面将该端口保存在按选项卡 ID 编制索引的集合中。 并在事件触发时通过相关端口（从后台脚本到内容脚本）发送消息。port

我宁愿不覆盖本机历史记录方法，因此这个简单的实现创建了我自己的名为 eventedPush state 的函数，该函数仅调度一个事件并返回 history.pushState（）。无论哪种方式都可以正常工作，但我发现这种实现更干净一些，因为本机方法将继续按照未来开发人员的期望执行。

function eventedPushState(state, title, url) {
    var pushChangeEvent = new CustomEvent("onpushstate", {
        detail: {
            state,
            title,
            url
        }
    });
    document.dispatchEvent(pushChangeEvent);
    return history.pushState(state, title, url);
}

document.addEventListener(
    "onpushstate",
    function(event) {
        console.log(event.detail);
    },
    false
);

eventedPushState({}, "", "new-slug"); 

根据 @gblazex 给出的解决方案，如果您想遵循相同的方法，但使用箭头函数，请在 javascript 逻辑中遵循以下示例：

private _currentPath:string;    
((history) => {
          //tracks "forward" navigation event
          var pushState = history.pushState;
          history.pushState =(state, key, path) => {
              this._notifyNewUrl(path);
              return pushState.apply(history,[state,key,path]); 
          };
        })(window.history);

//tracks "back" navigation event
window.addEventListener('popstate', (e)=> {
  this._onUrlChange();
});

然后，实现另一个函数，该函数在更新当前页面 url 时触发您可能需要的任何所需操作（即使页面根本没有加载）_notifyUrl(url)

  private _notifyNewUrl (key:string = window.location.pathname): void {
    this._path=key;
    // trigger whatever you need to do on url changes
    console.debug(`current query: ${this._path}`);
  }

由于我只是想要新的 URL，因此我调整了 @gblazex 和 @Alberto S. 的代码来获得这个：

(function(history){

  var pushState = history.pushState;
    history.pushState = function(state, key, path) {
    if (typeof history.onpushstate == "function") {
      history.onpushstate({state: state, path: path})
    }
    pushState.apply(history, arguments)
  }
  
  window.onpopstate = history.onpushstate = function(e) {
    console.log(e.path)
  }

})(window.history);

我认为即使可以修改本机函数也不是一个好主意，并且您应该始终保留您的应用程序范围，因此一个好的方法是不使用全局 pushState 函数，而是使用您自己的函数之一：

function historyEventHandler(state){ 
    // your stuff here
} 

window.onpopstate = history.onpushstate = historyEventHandler

function pushHistory(...args){
    history.pushState(...args)
    historyEventHandler(...args)
}

<button onclick="pushHistory(...)">Go to happy place</button>

请注意，如果任何其他代码使用本机 pushState 函数，您将不会获得事件触发器（但如果发生这种情况，您应该检查您的代码）

除了其他答案。我们可以使用 History 接口，而不是存储原始函数。

history.pushState = function()
{
    // ...

    History.prototype.pushState.apply(history, arguments);
}

我用简单的代理来做到这一点。这是原型的替代方案

window.history.pushState = new Proxy(window.history.pushState, {
  apply: (target, thisArg, argArray) => {
    // trigger here what you need
    return target.apply(thisArg, argArray);
  },
});

谢谢@KalanjDjordjeDjordje的回答。我试着把他的想法变成一个完整的解决方案：

const onChangeState = (state, title, url, isReplace) => { 
    // define your listener here ...
}

// set onChangeState() listener:
['pushState', 'replaceState'].forEach((changeState) => {
    // store original values under underscored keys (`window.history._pushState()` and `window.history._replaceState()`):
    window.history['_' + changeState] = window.history[changeState]
    
    window.history[changeState] = new Proxy(window.history[changeState], {
        apply (target, thisArg, argList) {
            const [state, title, url] = argList
            onChangeState(state, title, url, changeState === 'replaceState')
            
            return target.apply(thisArg, argList)
        },
    })
})