I have been trying to get the forward an back browser buttons to work on a small site using pjax and have come up with the following code to handle class changes and fading in and out the various overlays.
However I have found that Chrome and Safari treats the initial page load as a popstate and so it is causing me grief. Is there anyway to stop this?
$(window).on("popstate", function() {
if ($('body').hasClass('info')) {
$('body').removeClass("info").addClass("work");
$('.info_overlay').fadeOut(duration);
alert('popstate');
} else if ($('body').hasClass('work')) {
$('body').removeClass("work").addClass("info");
$('.info_overlay').fadeIn(duration);
} else {
$('body').removeClass("project").addClass("work");
$('.project_overlay').fadeOut(duration);
}
});
Tag the state when you call pushState()
, then ignore all popstate
events that don't have your tag. e.g.
history.pushState({ myTag: true }, ...)
$(window).on("popstate", function(e) {
if (!e.originalEvent.state.myTag) return; // not my problem
// rest of your popstate handler goes here
}
Don't forget to call replaceState
at page load so that you can handle the popstate when you get back to the initial page load.
$(function() { history.replaceState({ myTag: true }); });