现在HTML5引入了历史。pushState来改变浏览器的历史记录，网站开始与Ajax结合使用，而不是改变URL的片段标识符。
不幸的是，这意味着onhashchange再也不能检测到这些调用了。
我的问题是:有没有可靠的方法(hack?);))来检测网站何时使用history.pushState?规范没有说明引发的任何事件(至少我没有找到任何事件)。 我试图创造一个立面，并替换了窗户。我自己的JavaScript对象的历史，但它根本没有任何影响。
进一步解释:我正在开发一个Firefox插件，它需要检测这些变化并采取相应的行动。 我知道几天前有一个类似的问题，问监听一些DOM事件是否有效，但我宁愿不依赖于它，因为这些事件可以出于许多不同的原因生成。
更新:
这里是一个jsfiddle(使用Firefox 4或Chrome 8)，显示onpopstate没有触发pushState被调用(或我做错了什么?请随意改进!)。
更新2:
另一个问题是那个窗口。使用pushState时，location不会更新(但我已经在这里读到这个，所以我认为)。
当前回答
5.5.9.1事件定义 在导航到会话历史条目时，popstate事件在某些情况下被触发。
根据这个，当你使用pushState时，没有理由触发popstate。但像“推州”这样的事件迟早会派上用场。因为历史记录是一个宿主对象，所以您应该小心使用它，但是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让它处理更多的事件
其他回答
基于@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();
});
然后，实现另一个函数_notifyUrl(url)，该函数在当前页面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}`);
}
你可以绑定到窗户上。onpopstate事件吗?
https://developer.mozilla.org/en/DOM%3awindow.onpopstate
从文档中可以看出:
popstate的事件处理程序 事件。 对象的popstate事件被分派到 窗口每次激活历史记录 输入的变化。如果历史记录条目 被激活是由呼叫创建的 到history.pushState()或被影响 通过调用history.replaceState()， popstate事件的状态属性 包含历史记录项的副本 状态对象。
终于找到了“正确的”(没有monkeypatching，没有破坏其他代码的风险)方法来做到这一点!它需要为你的扩展添加一个特权(是的，有人在评论中指出了这一点，这是为扩展API，这是所要求的)和使用后台页面(不仅仅是一个内容脚本)，但它确实工作。
你想要的事件是browser.webNavigation。onHistoryStateUpdated，当页面使用历史API更改URL时触发。它只会触发你有权限访问的网站，如果需要的话，你还可以使用URL过滤器来进一步减少垃圾邮件。它需要webNavigation权限(当然还有相关域的主机权限)。
The event callback gets the tab ID, the URL that is being "navigated" to, and other such details. If you need to take an action in the content script on that page when the event fires, either inject the relevant script directly from the background page, or have the content script open a port to the background page when it loads, have the background page save that port in a collection indexed by tab ID, and send a message across the relevant port (from the background script to the content script) when the event fires.
5.5.9.1事件定义 在导航到会话历史条目时，popstate事件在某些情况下被触发。
根据这个，当你使用pushState时，没有理由触发popstate。但像“推州”这样的事件迟早会派上用场。因为历史记录是一个宿主对象，所以您应该小心使用它，但是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!');
});
几乎和galambalazs一样。
但这通常是过度的。而且它可能并不适用于所有浏览器。(我只关心我的浏览器版本。)
(它会留下一个var _wr，所以你可能想要把它换行。我不关心这个。)
