jQuery .load () проблема во всех версиях IE

Question

Я пытаюсь сделать динамический шаблон. У меня есть ссылки на боковой панели, и я хочу динамически загружать содержимое с помощью .load () в jQuery.

Для этого у меня есть следующий код 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. Вы можете увидеть пример здесь . Если вы нажмете «Профиль / видение» на боковой панели, он снова загрузит весь сайт в #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 в основном не работает, поэтому это полностью нарушит кэширование.Вместо этого лучше всего использовать другой URL для полной страницы и версий только для содержимого AJAX, например:

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

В любом случае, не делайте такого рода-страница навигации без явного предоставления навигации, закладок, оптимизированных для SEO URL-адресов (на основе history.pushState, где доступно и в противном случае #! хеш-ссылок).Вы добиваетесь большего успеха, чем большинство из этих наивных load() сайтов с псевдонавигацией, предоставляя альтернативные URL, отличные от JS, но все же вы вкладываете массу усилий в нестандартную схему навигации, которая хуже, чем просто использование обычнойссылки на страницы.Не стоит саботировать удобство использования вашего сайта только ради эффекта постепенного исчезновения.