Question

我正在使用pushState为我网站上的ajax内容创建有意义的网址。我想在用户点击前进或后退按钮时刷新ajax内容。然而，我遇到了问题，因为在“历史遍历”（前进/后退按钮）和“结束”（页面加载）两者上都有铬（正确）的影响。我想创建一个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。

由于

Answer 1

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

var loaded = false;

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

Answer 2

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

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

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);
     }
}

onpopstate handler - ajax后退按钮

3 个答案: