16

我对以下情况有疑问。

  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 事件？
4

1 回答 1

19

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

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

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

希望这可以帮助。

于 2011-07-26T20:31:11.527 回答