我一直在试图让前端的浏览器按钮在使用pjax的一个小型网站上工作,并且提出了以下代码来处理类的更改,以及各种叠加层的衰落.
但是我发现Chrome和Safari将初始页面加载为一个弹出窗口,因此导致我的悲伤.有没有阻止这个？
$(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);
}
});
解决方法
在调用pushState()时,标记状态,然后忽略所有没有标签的popstate事件.例如
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
}
不要忘记在页面加载时调用replaceState,以便在回到初始页面加载时可以处理popstate.
$(function() { history.replaceState({ myTag: true }); });
