Chrome浏览器中页面加载时的Popstate

Question

Chrome浏览器中页面加载时的Popstate

javascripthtmlgoogle-chromedom-eventsbrowser-history

95

我正在为我的Web应用使用History API，但是有一个问题。我通过Ajax调用更新页面上的一些结果，并使用history.pushState()来更新浏览器的位置栏而不重新加载页面。然后，当单击后退按钮时，我使用window.popstate以便恢复先前的状态。

这个问题是众所周知的——Chrome 和Firefox对popstate事件处理不同。虽然Firefox在第一次加载时不会触发它，但Chrome会。我想要像Firefox一样，不要在加载时触发该事件，因为它只是在加载时更新了完全相同的结果。除了使用History.js之外，是否有其他解决方法？我不想使用它的原因是——它本身需要太多的JS库，而且由于我需要将其实现在已经有太多JS的CMS中，因此我希望将放入其中的JS数量最小化。

所以，我想知道是否有办法使Chrome在加载时不触发popstate，或者是否有人尝试过将所有库混合在一起成为一个文件使用History.js。

- spliter

3

另外，Firefox的行为是规范和正确的行为。自Chrome 34以来，现在已经修复了！感谢Opera开发人员！ - Henry

15个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Jeremy Lynch · Answer 1

这对我解决了问题。我所做的就是设置一个超时函数，延迟执行函数的时间足够长，以错过在页面加载时触发的popstate事件。

if (history && history.pushState) {
  setTimeout(function(){
    $(window).bind("popstate", function() {
      $.getScript(location.href);
    });
  },3000);
}

- user2604836 · Answer 2

所提供的解决方案在页面重新加载时存在问题。以下方法似乎更好，但我只测试了Firefox和Chrome。它利用了这个事实，即e.event.state和window.history.state之间似乎存在差异。

window.addEvent('popstate', function(e) {
    if(e.event.state) {
        window.location.reload(); // Event code
    }
});

- ubershmekel · Answer 3

我知道你反对，但你真的应该使用History.js，因为它可以解决无数浏览器不兼容性问题。我曾经尝试手动修复，但后来发现还有更多问题，只有在很长一段时间后才能发现。现在使用它并不难：

<script src="//cdnjs.cloudflare.com/ajax/libs/history.js/1.8/native.history.min.js" type="text/javascript"></script>

并阅读 https://github.com/browserstate/history.js 上的 API。

- Kinlan · Answer 4

你可以创建一个事件，并在 onload 处理程序之后触发它。

var evt = document.createEvent("PopStateEvent");
evt.initPopStateEvent("popstate", false, false, { .. state object  ..});
window.dispatchEvent(evt);

注意，这在Chrome/Safari中有些问题，但我已经提交了补丁到WebKit中，很快就会可用，但这是“最正确”的方法。

- Alexey · Answer 5

这在Firefox和Chrome中对我有效

window.onpopstate = function(event) { //back button click
    console.log("onpopstate");
    if (event.state) {
        window.location.reload();
    }
};