onpopstate 处理程序 - ajax 后退按钮答案

【问题标题】：onpopstate handler - ajax back buttononpopstate 处理程序 - ajax 后退按钮
【发布时间】：2011-07-12 14:01:25
【问题描述】：

我正在使用 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
}

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

谢谢

【问题讨论】：

标签： javascript ajax html google-chrome

【解决方案1】：

一种方法是在页面加载时将变量初始化为 false，然后在您的 popstate 事件中检查该变量。如果它仍然是假的，请将其设置为真并且什么也不做。从那时起，您的所有其他 popstate 事件都应该仅来自后退/前进事件。

var loaded = false;

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

【讨论】：

在加载时不调用 onpopstate 的 Firefox 等浏览器中呢？这是否意味着第一个合法的历史遍历弹出将被忽略？
我正在为跨浏览器这样做...但我不知道应该针对哪些浏览器...Opera、firefox、safari 和 chrome 可以正常使用以下内容。 window.onpopstate = function(event) { if (!loaded && $.browser.webkit) {
在 Firefox 上失败。要解决此问题，请触发 if (!loaded) { loaded = true; return; } onclick/点击链接。

【解决方案2】：

传递给onpopstate 函数的对象将有一个state 成员，在页面加载时将是null，因此您可以执行以下操作：

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

【讨论】：

我对此感到困惑；我正在点击一些绑定了 click 事件的元素，它们都触发了popstate 事件，它们都有state: null。
使用 history.pushState({'url':url},title,url); 和 url 作为加载内容的 URL（查找 JSON），然后您可以通过以下方式访问：window.onpopstate = function(e) {alert(JSON.stringify(e.state).url);}。

【解决方案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);
     }
}

【讨论】：