Question

我正在尝试制作动态模板。我在侧边栏中有链接，我想在jQuery中使用.load（）动态加载内容。

我有以下jQuery代码：

// Services AJAX page loader
 jQuery('.sidenav a').click(function(){
  $page_url = jQuery(this).attr('href');

  // load page
  jQuery('#content').fadeOut(200, function() {
   jQuery(this).load($page_url, function(response, status, xhr) {
    jQuery(this).fadeIn(200);
   });
  });

  // set pagetitle
  jQuery('.pagetitle span').text(jQuery(this).contents().first().text());

  // change CSS current_page_item
  jQuery('.sidenav li').removeClass('current_page_item');
  jQuery(this).parent().addClass('current_page_item');

  return false;
 });

除了在IE中，它基本上都很好用。

当我点击首次加载没有AJAX的链接时，会出现问题。您可以看到示例here。当您单击侧栏中的“Profil / vision”时，它将再次在#content div中加载整个站点。它只发生在所有版本的IE中。在其他浏览器中它正常工作。

任何想法可能是什么问题？

谢谢。

Answer 1

我认为这是一个缓存问题..

由于url与当前显示的页面相同，因此IE使用缓存（包含所有页面）并将其插入#content div ..

尝试在.load()请求

添加时间戳

.load($page_url,{noncache: new Date().getTime()},function(){..})

Answer 2

您似乎依赖于：

X-Requested-With: XMLHttpRequest

AJAX请求中的

标题，用于决定是发送完整的页面作为响应，还是只发送主要内容。

不要这样做。标头在服务器之前的存在并不是100％可靠，如果你可以根据这个标题返回不同的响应，它就会混淆缓存。 IE正在发生这种情况：您尝试将http://www.youweyoucoding.com/clients/formoda/allermolle/home/profil-vision/加载到内容区域，但IE的缓存中已经有http://www.youweyoucoding.com/clients/formoda/allermolle/home/profil-vision/，因为这也是整页的地址。因此，IE使用缓存的整页。

其他具有其他缓存策略的浏览器和网络代理也可能会混淆问题。您可能会有人在浏览器中导航到http://www.youweyoucoding.com/clients/formoda/allermolle/home/profil-vision/并获得仅包含内容区域的缓存响应，从而使您的网站无用。

制定依赖于请求标头的响应的正确方法是将其包含在Vary响应标头中，例如：

Vary: X-Requested-With

但是，IE的Vary标头的实现基本上已经破解，因此这样做会完全破坏缓存。相反，更好的方法是为整页和仅用于AJAX的内容版本提供不同的URL，例如：

http://www.youweyoucoding.com/clients/formoda/allermolle/home/profil-vision/?xmlhttp=on

在任何情况下，如果没有明确提供可导航，可收藏，SEO友好的URL（基于可用的history.pushState和其他#!哈希链接），请不要进行此类页内导航。通过提供非JS替代URL，你比大多数这些天真的load()伪导航网站做得更好，但你仍然需要付出大量努力才能进入比标准更糟糕的非标准导航方案使用普通页面链接。仅仅为了淡出淡出效果，不值得破坏网站的可用性。

所有IE版本中的jQuery .load（）问题

2 个答案: