javascript - Chrome 35 在点击后退按钮后触发 popstate

Question

我知道有很多与 chrome 和 popstate 事件相关的主题，但在将 chrome 升级到版本 35 后，我遇到了一个新主题。

情况是这样的:

我有一个包含类别和过滤器的列表页面，在您选择类别、页面等后，内容将通过ajax重新加载，并且所有内容都由运行良好的历史API处理。

但是，当您转到列表中项目的详细信息页面时 - 标准请求，整个页面都会重新加载 - 然后按浏览器上的后退按钮，您可以在您上次单击项目但随后触发 popstate 的位置看到列表页面(我在这里不谈论初始页面加载时的 chrome popstate，因为在版本 34 中，popstate 不再在 init 上触发)，并且由于我之前提到的处理类别的代码，整个页面都会重新加载。

所以问题是 chrome 35 在我们按下后退按钮后触发 popstate 事件，我的问题是:

如何检测在用户从详细信息页面返回到我的列表页面而不重新加载此页面后触发此事件。

我尝试使用文档对象引用等，但是当它第一次看起来像解决方案时，总是会出现它不起作用的情况。

Answer 1

我也遇到过这个问题。我的解决方案有点破解，但除此之外它似乎工作得很好。我发现在设置 onpopstate 处理程序之前等待 150 毫秒就足以等待 Chrome 运行其初始 onpopstate 处理程序，您可以利用它来发挥您的“优势”。例如，要检测是否运行了初始 onpopstate:

// wait for page to load
$(function() {
  var no_initial_onpopstate = true;
  var enabled = true;

  window.onpopstate = function() {
    if(!enabled) return;
    console.log("detected initial onpopstate");
    no_initial_onpopstate = false;
  }

  setTimeout(function() {
    enabled = false;
    console.log("No initial onpopstate: ", no_initial_onpopstate);

    // no_initial_onpopstate indicates if the browser emitted an initial
    // onpopstate event. Do with that information what you will

    // 150ms delay seems to be the "magic number" to wait for Chrome to
    // run all of its initial onpopstate handlers (in my tests on localhost, at least)
  }, 150);
});

因此，据我所知，在浏览器的 DOM 就绪事件 150 毫秒后设置“onpopstate”回调将跳过 chrome 的初始 onpopstate。