所有 IE 版本中的 jQuery .load() 问题

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使用缓存（与所有页面）并插入到#contentdiv中..

尝试在.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() 的幼稚伪导航网站做得更好，但您仍然在非标准导航方案中投入大量精力，这比仅使用普通导航方案更糟糕页面链接。仅仅为了淡入淡出效果而破坏您网站的可用性是不值得的。