回到使用 ajax 的 PushState 条目

Question

我对以下情况有疑问。

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

我已经使用 PushState 增强了一个网站的各种功能，结果是一个响应速度惊人的 Web 应用程序，但这个问题阻止了我使用它。

以下是代码示例：

$('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');
}

希望这有帮助。