jquery – 如何忽略popstate初始加载,使用pjax

我一直在试图让前端的浏览器按钮在使用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 }); });