在Chrome/Safari中使用History.pushState时出现重复的历史记录条目

Question

我在使用来自https://github.com/browserstate/history.js/的History.js时，在Chrome和Safari中出现了奇怪的问题。

如果我单击多个“.node”项，然后查看浏览器历史记录，每次单击都会有重复的条目，并且需要点击两次后退按钮才能返回到上一个“真实”状态。我添加了console.log（id），可以确认该事件仅触发一次。

在Firefox中，它的工作方式与预期相同。我只在Chrome和Safari中看到重复的历史记录项。

$( "body" ).delegate( ".node" , "click", function(){
    id = $(this).data('id');
    History.pushState({"Foo":"Bar","ID":id}, "Title for "+ id, "/item-"+id);
});

- Alex

---

这个问题有任何解决方案吗？我也遇到了非常类似的问题。不过似乎是跨浏览器的。已在Chrome、FF和IE10中进行了测试。 - Martin Sheeks

Answer 1

我在Chrome中遇到了类似的问题（在IE和Firefox中没有出现），结果发现通过JavaScript更改iframes的src属性时，额外的历史记录条目并未由pushState添加而是发生了变化。即使它们从远程站点（在这种情况下是Vimeo）加载，它们也会作为当前页面的重复项显示在后退/前进按钮的历史记录中，我必须多次单击后退按钮。我还没有进一步测试，因此不知道这是否是iframes独有的问题，或者是否可以通过更改任何元素的src属性引起。

- Iain Y

---

在iOS应用程序中使用UIWebView时，我遇到了同样的问题。非常烦人。计划通过检查位置是否在点击后真正改变（使用超时）来解决它。 - Louis LC

我在没有任何iframe的情况下遇到了这个问题。我能找到的唯一解决方法是使用window.location = hash而不是history.pushState(state, title, hash)。这不是最理想的解决方案，但它可以工作。 - GreenRaccoon23