如何忽略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 }); });

Answer 2

我实际上在pjax本身中找到了解决方案。

而不是做：

$(window).on('popstate', function() { ... 

它在我执行的初始页面加载时触发了 popstate：

$(window).on('pjax:popstate', function() {...