回到使用ajax的pushState条目

Question

我遇到以下情况的问题。

1. 用户访问网站
2. 用户点击使用history.pushState更新网址的链接
3. 通过ajax加载的部分页面内容（使用jQuery）
4. 用户点击加载新网页的常规链接
5. 用户单击返回以返回pushState条目
6. 该页面现在仅显示通过ajax
检索的页面部分

我已经使用pushState为各种事情加强了网站，结果是一个令人震惊的响应式网络应用程序，但这个问题阻止我使用它。

以下是代码示例：

$('a').live('click', function(){
  history.pushState({}, '', this.href);
  popstate(this.href);
  return false;
});

popstate = function(url){
  $('#content').load(url);
}
window.onpopstate = function(event){
  popstate(window.location.href);
  event.preventDefault();
}

注意：

• 在window.onpopstate函数中发出警报时，似乎在步骤5中未触发该事件。这是一个错误吗？
• 只有在使用ajax时才会出现此问题。
• 我不得不分开popstate函数，所以我可以在pushState之后调用它。有没有办法手动触发window.onpopstate事件？

Answer 1

似乎有些浏览器经常混淆部分加载的ajax和整个页面，用它的布局装饰。那是因为他们都有相同的URL。 因此，当用户单击后退按钮时，浏览器将不会加载URL，只会显示之前通过ajax下载的部分内容。

为了避免这种情况并维护两个单独的内部缓存（一个用于部分页面，一个用于整个页面），您应该在通过ajax调用时在URL中添加GET参数。在您的代码中像这样：

popstate = function(url){
  $('#content').load(url+'?_ajax=1');
}

希望这有帮助。