Question

For chrome the event fires on page load, but in firefox it fires the rightway, only when you press the backward or forward button. So how to write a script that works fine for all browsers?

Answer 1

I’d go browser detection on this one (in fact, I did). I’m using jquery’s .data() to set a boolean flag to test against:

// chrome fires a popstack event on page load, so do a check before proceeding
var is_chrome = navigator.userAgent.toLowerCase().indexOf('chrome') > -1;
if( is_chrome && !$('body').data('allow-popstate-action') ) {
    $('body').data('allow-popstate-action', true);
    return false;
}

I’ve added this conditional clause in the function that is bound to the popstate event, so the first time it’s called in Chrome (which is on page-load), it just exits the function without doing anything. Next time (prev/back buttons), it will work fine.

I’m stuck with an old version of jQuery on this project, so I couldn’t use jQuery.browser.webkit, but you probably can.