搬回到了AJAX使用一个pushState项 [英] Moving back to a pushState entry that used ajax

问题描述

我在遇到以下情况的问题。

I'm having an issue with the following situation.

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

我已经改装成了使用pushState对各种事物的网站，其结果是一个令人震惊的响应Web应用程序，但这个问题是$ P $使用此pventing我。

I've souped up a site using pushState for various things and the result is a shockingly responsive web app, but this issue is preventing me from using this.

下面是的code的例子：

Here's a sample of the code:

$('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步中未触发这是一个错误？
• 在这个问题只有在阿贾克斯时发生。
• 在我不得不分开popstate功能，这样我就可以pushState后调用它。有没有一种方法来手动触发window.onpopstate事件？

推荐答案

看来，一些浏览器通常通过AJAX和整个页面，装点着它的布局混淆的部分加载。这是因为它们都具有相同的URL。 因此，当上后退按钮，用户点击时，浏览器将不会加载该URL，将只显示部分已经previously通过AJAX下载。

It seems that some browsers often confuse the partial loaded via ajax and the entire page, decorated with its layout. That's because they both have the same URL. So when the user click on the back button, the browser won't load the URL and will just display the partial it has previously downloaded via ajax.

要避免这一点，并维护两个独立的内部缓存（一个用于部分页面，一个用于整个页面），你应该通过AJAX调用时，在URL中添加GET参数。这样在你的code：

To avoid this and maintain two separate internal caches (one for the partial page and one for the entire page), you should add a GET parameter in the URL when calling via ajax. Like this in your code:

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

希望这有助于。

Hope this helps.

这篇关于搬回到了AJAX使用一个pushState项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！