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

【问题标题】：How to ignore popstate initial load, working with pjax如何忽略popstate初始加载，使用pjax
【发布时间】：2012-06-01 04:22:42
【问题描述】：

我一直在尝试让前进和后退浏览器按钮在使用 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);
  }
});

【问题讨论】：

标签： jquery ajax pjax popstate

【解决方案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，以便在返回初始页面加载时处理弹出状态。

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

【讨论】：

我实际上发现解决方案在pjax中。所以而不是做
这是我发现在第一次调用页面后、重新加载后以及在 gecko/webkit/trident 中有效的唯一解决方案。加上不改变浏览器调用 popstate 的行为！很好的解决方案。谢谢！
在我今天的测试中，event.originalEvent 在任何当前浏览器中都不存在。虽然这种变体（使用event.state）似乎在当前版本的Chrome和Firefox中有效，但Safari（8.0.6）将null返回event.state，我找不到any i> 使用pushState 推送的数据供以后参考。 Safari 是新的 IE6。
@AdamTuttle .originalEvent 是 jQuery 事件对象中引用 original DOM 事件的字段。见api.jquery.com/on
啊，很公平，谢谢！我在 vanilla JS 中工作，所以没有可用的。

【解决方案2】：

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

而不是做：

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

在我做的初始页面加载时触发了 popstate：

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

【讨论】：

【解决方案3】：

最好的长期解决方案是对https://code.google.com/p/chromium/issues/detail?id=63040 进行投票以让 Google 解决此问题。他们已经知道自己不符合 HTML5 规范已有大约两年了。

【讨论】：

上面写着 Status: Fixed 并在那里评论：“仍然没有登陆 Chrome 32 stable，修复了 Chrome Canary 34。” - 2014 年 2 月 10 日。

【解决方案4】：

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 解决方案）

【讨论】：

欢迎来到 Stack Overflow！请解释您的代码的作用以及它为什么会解决问题。只包含代码的答案（即使它正在工作）通常不会帮助 OP 理解他们的问题。

【解决方案5】：

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

这很简单！

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

【讨论】：