How to use pushState,replaceState and popState correctly?

Question

I'm trying to use the history API but I can't get it working as I'd expect. I've look at several examples but they all appear to be doing something wrong. That is, this flow doesn't work as expected:

1. On new page call pushState
2. On popState load desired page

What I'm finding happens is that for #2 the URL is not modified to the old state (testing in Firefox). Unless I call pushState, or replaceState again the URL stays where it was. I'm also finding that somehow the first page ends up duplicated in the browser's history (holding down back I can see it).

How exactly should the history be used so that Back/Forward/Reload all work like a traditional page flow?

Answer 1

The problems I'm having relate to the use of an iframe in the page. Each change of the location of the frame creates a new history entry which messages with the desired history. To prevent this one must replace the iframe location instead of assigning a new one.

document.getElementById('content_frame').contentWindow.location.replace( new_path )

Location.replace doesn't create a history entry.