onpopstate处理程序 - ajax返回按钮

Question

我正在使用pushState为我的网站上的ajax内容创建有意义的url。当用户点击前进或后退按钮时，我想刷新ajax内容。然而，我遇到了问题，因为chrome（正确地）在“历史遍历”（前进/后退按钮）和“结束”（页面加载）上都实现了onpopstate。我想创建一个onpopstate处理程序，区分页面加载和历史遍历，因为如果我的ajax内容已经成功加载，我不想刷新它。有人可以帮助我区分这两者吗？

window.onpopstate = function (event) {
    // If : Forward/back button pressed
        // Reload any ajax content with new variables
    // Else : Page load complete
        // Do nothing - content already loaded and correct
}

请参见http://code.google.com/p/chromium/issues/detail?id=63040，了解有关Chrome和onpopstate的更多详细信息。

谢谢。

- user623520

Answer 1

一种方法是在页面加载时将变量初始化为false，然后在popstate事件中检查该变量。如果仍然是false，则将其设置为true并不执行任何操作。从那时起，您所有其他的popstate事件都应该只来自于向前/向后事件。

var loaded = false;

window.onpopstate = function(e) {
    if (!loaded) {
        loaded = true;
        return;
    } else {
        // run your stuff...
    }
}

- Matt King

---

在像Firefox这样的浏览器中，如果在加载时未调用onpopstate，会怎么样？这意味着第一次合法的历史遍历弹出将被忽略？ - Spycho

我这样做是为了跨浏览器……但我不知道应该瞄准哪些浏览器……Opera、Firefox、Safari和Chrome使用以下方法都可以正常工作。 window.onpopstate = function(event) { if (!loaded && $.browser.webkit) { - Asad Hasan

它在Firefox上失败了。为了解决这个问题，在单击/轻敲链接时触发if（！loaded）{loaded = true; return;}。 - Binyamin

Answer 2

onpopstate函数接收的对象将会有一个state成员，在页面加载时它将为null，所以你可以像下面这样做：

window.onpopstate = function(event) {
  if(event && event.state) {
    // ...
  }
}

- Ryan A.

---

我对此感到困惑；我正在点击一些绑定了点击事件的元素，它们都触发了 popstate 事件，并且它们的状态都为 null。 - jessica

使用 history.pushState({'url':url},title,url);，其中 url 是已加载内容的 URL（查找 JSON），然后您可以通过以下方式访问它：window.onpopstate = function(e) {alert(JSON.stringify(e.state).url);}。 - John

Answer 3

//示例：http://www.nseri.com/news/5536

window.onpopstate = function(e) {
     var count = String(location.pathname).split('/').length;
     if (count<4) {
          location.href = location.href;
     }else {
          $.ajaxLoad(location.pathname);
     }
}

- Naim Serin