我正在为我的Web应用使用History API，但是有一个问题。我通过Ajax调用更新页面上的一些结果，并使用history.pushState()来更新浏览器的位置栏而不重新加载页面。然后，当单击后退按钮时，我使用window.popstate以便恢复先前的状态。
这个问题是众所周知的——Chrome 和Firefox对popstate事件处理不同。虽然Firefox在第一次加载时不会触发它，但Chrome会。 我想要像Firefox一样，不要在加载时触发该事件，因为它只是在加载时更新了完全相同的结果。除了使用History.js之外，是否有其他解决方法？我不想使用它的原因是——它本身需要太多的JS库，而且由于我需要将其实现在已经有太多JS的CMS中，因此我希望将放入其中的JS数量最小化。
所以，我想知道是否有办法使Chrome在加载时不触发popstate，或者是否有人尝试过将所有库混合在一起成为一个文件使用History.js。
在Google Chrome版本19中，@spliter提供的解决方案已经失效。正如@johnnymire所指出的那样，在Chrome 19中存在history.state，但它是null。
我的解决方法是在检查window.history中是否存在state时添加 window.history.state！== null ：
var popped = ('state' in window.history && window.history.state !== null), initialURL = location.href;
我在所有主流浏览器和 Chrome 版本 19 和 18 中进行了测试。看起来它可以工作。
!= null来简化in和null的检查，因为它也会处理undefined。 - pimvdbhistory.pushState() 方法中始终使用 null，例如 history.pushState(null,null,'http//example.com/) 时，才能使用此功能。尽管这可能是大多数用法（如jquery.pjax.js和其他大多数演示中设置的那样），但如果浏览器实现了 window.history.state（例如FF和Chrome 19+），则在刷新或浏览器重新启动后，window.history.state 可能不为 null。 - unexplainedBacn如果您不想为添加到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在文档加载完成时已经处于“complete”状态，会错误地触发onpopstate事件，因此允许在文档加载完成之前已被触发的opopstate事件，在文档加载完成之前允许onpopstate的调用。
更新2014-04-23: 修复了一个bug，该bug导致如果脚本在页面加载后执行，则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);
});
// 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
}
window.history.ready总是为true。 - Andriy Drozdyukwindow.history.ready 没有定义，只有在处理链接点击之后并在调用 pushState 之前才会定义。如果需要的话，您还应该在 ready 处理程序中加载适当的内容。在此示例中，progress.php 将使用 url 参数（服务器端）进行加载。否则，我们将通过 ajax 加载 url 参数。 - Tom McKenzieWebkit的初始onpopstate事件没有分配状态，因此您可以使用它来检查不需要的行为：
window.onpopstate = function(e){
if(e.state)
//do something
};
一种全面的解决方案，允许返回原始页面的导航，将建立在这个想法之上：
<body onload="init()">
<a href="page1" onclick="doClick(this); return false;">page 1</a>
<a href="page2" onclick="doClick(this); return false;">page 2</a>
<div id="content"></div>
</body>
<script>
function init(){
openURL(window.location.href);
}
function doClick(e){
if(window.history.pushState)
openURL(e.getAttribute('href'), true);
else
window.open(e.getAttribute('href'), '_self');
}
function openURL(href, push){
document.getElementById('content').innerHTML = href + ': ' + (push ? 'user' : 'browser');
if(window.history.pushState){
if(push)
window.history.pushState({href: href}, 'your page title', href);
else
window.history.replaceState({href: href}, 'your page title', href);
}
}
window.onpopstate = function(e){
if(e.state)
openURL(e.state.href);
};
</script>
虽然这个操作可能会触发两次（通过一些巧妙的导航），但只需检查前一个href，就可以简单地处理它。
window.history.state在iOS中也为null。只需检查e.state属性是否为null即可。 - Huskywindow.setTimeout(function() {
window.addEventListener('popstate', function() {
// ...
});
}, 1000);
这是我的解决方案：
var _firstload = true;
$(function(){
window.onpopstate = function(event){
var state = event.state;
if(_firstload && !state){
_firstload = false;
}
else if(state){
_firstload = false;
// you should pass state.some_data to another function here
alert('state was changed! back/forward button was pressed!');
}
else{
_firstload = false;
// you should inform some function that the original state returned
alert('you returned back to the original state (the home state)');
}
}
})
让Chrome在页面加载时不触发popstate的最佳方法是点赞https://code.google.com/p/chromium/issues/detail?id=63040。他们已经知道Chrome没有遵守HTML5规范整整两年了，但仍然没有修复！
如果使用event.state !== null在非移动浏览器中返回到最初加载的页面将无法工作。
我使用sessionStorage来标记ajax导航真正开始的时间。
history.pushState(url, null, url);
sessionStorage.ajNavStarted = true;
window.addEventListener('popstate', function(e) {
if (sessionStorage.ajNavStarted) {
location.href = (e.state === null) ? location.href : e.state;
}
}, false);window.addEventListener('popstate', function(e) {
if (e.state !== null) {
location.href = e.state;
}
}, false); - ilusionist