Duplicate History enteries using History.pushState in Chrome/Safari

Question

I am having a strange problem in Chrome and Safari using History.js from https://github.com/browserstate/history.js/

If I click on several different ".node" items and then look at my browsers history, I have duplicate entries for each click and need to his the back button twice to go back the the last "real" state. I added a console.log(id) in and can confirm that the event is only firing the one time.

In Firefox it works as expected. I am only seeing the duplicate history items in Chrome and Safari.

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

Perren

Any resolution on this? Having a very similar issue. Seems to be cross-browser though. Tested in Chrome, FF, and IE10 – Wendel

Answer 1

I was having a similar problem to this in Chrome (wasn't happening in IE and Firefox) and it turned out the extra history entries weren't being added by pushState but happened when I altered the src attribute on iframes via javascript.

Even though they were loading from a remote site (Vimeo in this case) they were showing up in the back/forward button's history as duplicates of the current page and I'd have to click back multiple times.

I've not tested this further so I don't know if this is unique to iframes or if it could be caused by altering any elements src attributes.

Redound

I have experienced the same issue when using a UIWebView in an iOS app. Extremely annoying. Planning on solving it by checking if the location has really changed after clincking on the back button (using timeouts). – Sulfur

I'm having this issue without any iframes. The only fix I could find was using window.location = hash instead of history.pushState(state, title, hash). It's not the most desirable solution, but it works. – Global