Question

I’m using pushState to create meaningful urls for ajax content on my site. I want to refresh the ajax content when the user hits the forward or back buttons. I’m having problems however as chrome (correctly) impliments onpopstate on both ‘history traversal’ (forward/back buttons) and ‘the end’ (page load). I’d like to create an onpopstate handler that differentiates between page load and history traversal, as I don’t want to refresh my ajax content if it’s already just been loaded successfully. Can anybody help me with differentiating between the two?

window.onpopstate = function (event) {
    // If : Forward/back button pressed
        // Reload any ajax content with new variables
    // Else : Page load complete
        // Do nothing - content already loaded and correct
}

See http://code.google.com/p/chromium/issues/detail?id=63040 for more details on chrome and onpopstate.

Thanks

Answer 1

One way would be to initialize a variable to false on page load, and then on your popstate event, check that variable. If it’s still false, set it to true and do nothing. From then on all of your other popstate events should be only from back/forward events.

var loaded = false;

window.onpopstate = function(e) {
    if (!loaded) {
        loaded = true;
        return;
    } else {
        // run your stuff...
    }
}