How to handle popstate when url ceased to exist?

Question

I would like to be able to do two things with html5 popstate, I'm not using any plugins just these two methods:

Push State:

function contentLoaded(...) {
    ...
    window.history.pushState({ pageUrl: url }, url, url);
    ...
}

Pop State:

$(window).bind("popstate", function (e) {
    if (event.state) {
        loadContent(event.state.pageUrl);
    }
});

Now if I delete a record, I want to avoid popping a state which couldn't be loaded, just skip it and try popping the next one.

The second question would be: How can I avoid try popping from an empty stack (I have a back button inside my app, but I can get rid of it with an appropriate reason), but keeping clear if the content couldn't be loaded OR if there is no more items in the stack.

Answer 1

History is not meant to be changed afterwards. You should separate the push/popstate functionality from the content loading functionality; think the "router" or "navigator" pattern in typical client-side mvc framework. If a state has become invalid, the content loading code can "redirect" to another state (by calling pushState), just as you would do in regular server-side app.

Just to remind, a client-side application should work identically whether the state was internally popped or the page was actually loaded using the same url, i.e. the HTML5 history support must be transparent, or in other words, the url alone must contain all the information to construct a particular view (but in the case of popstate, we can cheat and reuse the existing state to speed up things).