event.state== null and How to get pushState run correctly at Firefox?

Question

$('.btn').click(function(event){
  var paged = $(this).attr("id");
  history.pushState(paged, "", event.target.href);
  $.ajax({
    do something
  }
});
});
window.onpopstate = function(event) {alert(event.state); };

Use Chrome, Safari, Firefox to check it,

only Chrome and Safari can show the alert (message = paged) when the back button is clicked, but Firefox shows null value for the alert message,

and thus, I cannot use onpopstate to load a previous page content to Firefox when the back button is clicked. Then how to solve it or push the event.state correctly, but not a null value for firefox :)?

Answer 1

This has been answered here: https://lazyfox.io/task/b8r/event-state-null-and-how-to-get-pushstate-run-correctly-at-firefox

Browsers used to handle the popstate event differently on page load, but now they behave the same. Firefox never emitted a popstate event on page load. Chrome did until version 34, while Safari did until version 10.0.

You may have got null when history go back to the initial state.

Though firefox won't push the initail state, you can still force Firefox to push the initial state with history.replaceState() call.

See the link for more details