jquery - 如何忽略 popstate 初始加载，使用 pjax

Question

我一直在尝试使用 pjax 在小型网站上使用前进和后退浏览器按钮，并提出了以下代码来处理类更改以及淡入和淡出各种叠加层。

但是我发现 Chrome 和 Safari 将初始页面加载视为 popstate，因此这让我感到悲伤。有办法阻止这种情况吗？

$(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);
  }
});

Answer 1

在调用 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 }); });