我正在为我的 Web 应用程序使用 History API，但有一个问题。我执行 Ajax 调用以更新页面上的一些结果并使用history.pushState()它来更新浏览器的位置栏而无需重新加载页面。然后，当然，我使用window.popstate以在单击后退按钮时恢复以前的状态。
这个问题是众所周知的——Chrome 和 Firefox 对该popstate事件的处理方式不同。虽然 Firefox 不会在第一次加载时启动它，但 Chrome 会。我想要 Firefox 风格，而不是在加载时触发事件，因为它只是在加载时使用完全相同的结果更新结果。除了使用History.js之外，还有其他解决方法吗？我不喜欢使用它的原因是——它本身需要太多的 JS 库，而且由于我需要在已经有太多 JS 的 CMS 中实现它，我想尽量减少我放入其中的 JS .
所以，想知道是否有办法让 Chromepopstate在加载时不启动，或者，也许有人尝试使用 History.js，因为所有库都混搭成一个文件。
在版本 19 的 Google Chrome 中，@spliter 的解决方案停止工作。正如@johnnymire 指出的那样，Chrome 19 中的 history.state 存在，但它为空。
我的解决方法是将window.history.state !== null添加到检查 window.history 中是否存在状态：
var popped = ('state' in window.history && window.history.state !== null), initialURL = location.href;
我在所有主流浏览器以及 Chrome 19 和 18 版中对其进行了测试。看起来它可以工作。
如果您不想为添加到 onpopstate 的每个处理程序采取特殊措施，我的解决方案可能对您很有趣。该解决方案的一大优点还在于可以在页面加载完成之前处理 onpopstate 事件。
只需在添加任何 onpopstate 处理程序之前运行此代码一次，一切都应该按预期工作（也就是在 Mozilla ^^ 中）。
(function() {
// There's nothing to do for older browsers ;)
if (!window.addEventListener)
return;
var blockPopstateEvent = document.readyState!="complete";
window.addEventListener("load", function() {
// The timeout ensures that popstate-events will be unblocked right
// after the load event occured, but not in the same event-loop cycle.
setTimeout(function(){ blockPopstateEvent = false; }, 0);
}, false);
window.addEventListener("popstate", function(evt) {
if (blockPopstateEvent && document.readyState=="complete") {
evt.preventDefault();
evt.stopImmediatePropagation();
}
}, false);
})();
怎么运行的：
Chrome、Safari 和其他可能的 webkit 浏览器会在文档加载后触发 onpopstate 事件。这不是故意的，所以我们阻止 popstate 事件，直到文档加载后的第一个事件循环循环。这是通过 preventDefault 和 stopImmediatePropagation 调用完成的（不像 stopPropagation stopImmediatePropagation 立即停止所有事件处理程序调用）。
但是，由于当 Chrome 错误地触发 onpopstate 时，文档的 readyState 已经处于“完成”状态，因此我们允许在文档加载完成之前触发的 opopstate 事件允许在文档加载之前调用 onpopstate。
2014 年 4 月 23 日更新：修复了在页面加载后执行脚本时 popstate 事件被阻止的错误。
仅使用 setTimeout 不是正确的解决方案，因为您不知道加载内容需要多长时间，因此可能会在超时后发出 popstate 事件。
这是我的解决方案：https : //gist.github.com/3551566
/*
* Necessary hack because WebKit fires a popstate event on document load
* https://code.google.com/p/chromium/issues/detail?id=63040
* https://bugs.webkit.org/process_bug.cgi
*/
window.addEventListener('load', function() {
setTimeout(function() {
window.addEventListener('popstate', function() {
...
});
}, 0);
});
在jquery.pjax.js 第 195-225行中找到了解决方案：
// Used to detect initial (useless) popstate.
// If history.state exists, assume browser isn't going to fire initial popstate.
var popped = ('state' in window.history), initialURL = location.href
// popstate handler takes care of the back and forward buttons
//
// You probably shouldn't use pjax on pages with other pushState
// stuff yet.
$(window).bind('popstate', function(event){
// Ignore inital popstate that some browsers fire on page load
var initialPop = !popped && location.href == initialURL
popped = true
if ( initialPop ) return
var state = event.state
if ( state && state.pjax ) {
var container = state.pjax
if ( $(container+'').length )
$.pjax({
url: state.url || location.href,
fragment: state.fragment,
container: container,
push: false,
timeout: state.timeout
})
else
window.location = location.href
}
})
比重新实现 pjax 更直接的解决方案是在 pushState 上设置一个变量，并检查 popState 上的变量，因此初始 popState 不会在加载时不一致地触发（不是特定于 jquery 的解决方案，只是将其用于事件）：
$(window).bind('popstate', function (ev){
if (!window.history.ready && !ev.originalEvent.state)
return; // workaround for popstate on load
});
// ... later ...
function doNavigation(nextPageId) {
window.history.ready = true;
history.pushState(state, null, 'content.php?id='+ nextPageId);
// ajax in content instead of loading server-side
}