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个事件。 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
}

不要忘记在页面加载时调用replaceState，以便在返回初始页面加载时可以处理popstate。

$(function() { history.replaceState({ myTag: true }); });

Answer 2

我实际上在pjax内找到了解决方案。

而不是：

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

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

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

Answer 3

最好的长期解决方案是向上投票https://code.google.com/p/chromium/issues/detail?id=63040让Google解决此问题。他们已经知道他们已经不再遵守HTML5规范大约两年了。

Answer 4

为了解决初始页面加载作为safari和chrome浏览器中的popstate，我们可以使用 SetTimeOut 函数。

这简直有效!!

  setTimeout( function() {
      window.addEventListener( 'popstate', myFunction, false );
    }, 500 );

Answer 5

var StateHelper = {

    pushState: function(url) {
        if(window.history.pushState) {
            window.history.pushState({"popstate": true}, '', url);
        }
    },

    updateStateData: function(stateData) {
        if(window.history.replaceState) {
            window.history.replaceState(stateData, '', window.location.href);
        }
    }
};

/**
 * NOTE: Webkit fires popstate event initial. So we modify the current state, but in the
 * event we still get null. So we can differentiate.
 */
StateHelper.updateStateData({"popstate": true});
window.addEvent('popstate', function(e) {
    if(e.event.state && e.event.state.popstate) {
        window.fireEvent('pophistory', e);
    }
});

（一个mootools解决方案）

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

5 个答案: