Problem jQuery .load() we wszystkich wersjach IE

Question

Próbuję zrobić szablon dynamiczny. Mam łącza na pasku bocznym i chcę dynamicznie ładować zawartość za pomocą .load() w jQuery.

Mam następujący kod jQuery na to:

// 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; 
}); 

zasadzie działa to doskonale z wyjątkiem tych.

Problem występuje, gdy kliknę link, który został najpierw załadowany bez AJAX. Możesz zobaczyć przykład here. Po kliknięciu "Profil/wizja" na pasku bocznym, ponownie załaduje całą witrynę do #content div. Zdarza się tylko w IE, we wszystkich wersjach. W innych przeglądarkach działa normalnie.

Wszelkie pomysły, co może być problemem?

Dziękuję.

Answer 1

wierzę, że jest to problem buforowania ..

Ponieważ adres URL jest taki sam jak aktualnie wyświetlanej strony, IE korzysta z pamięci podręcznej (ze wszystkimi stronie) i wstawia go w #content dz ..

spróbuj dodać znacznik czasu na żądanie .load()

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

Answer 2

możliwość wydaje się polegać na:

X-Requested-With: XMLHttpRequest 

Nagłówek w żądaniu AJAX, aby zdecydować, czy wysłać pełną stronę w odpowiedzi, czy tylko główną treść.

Nie rób tego. Nie jest w 100% niezawodny, że nagłówek przetrwa podróż do serwera, a buforuje buforowanie, jeśli możesz zwrócić różne odpowiedzi w zależności od tego nagłówka. Oto, co dzieje się z IE: próbujesz załadować http://www.youweyoucoding.com/clients/formoda/allermolle/home/profil-vision/ do obszaru zawartości, ale IE ma już w pamięci podręcznej http://www.youweyoucoding.com/clients/formoda/allermolle/home/profil-vision/, ponieważ jest to również adres całej strony. W konsekwencji IE używa buforowanej pełnej strony.

Inne przeglądarki z innymi strategiami buforowania i serwerami proxy mogą również mylić sprawy. Jest tak prawdopodobne, że ktoś będzie przeglądał przeglądarkę w przeglądarce http://www.youweyoucoding.com/clients/formoda/allermolle/home/profil-vision/ i otrzyma buforowaną odpowiedź zawierającą tylko obszar zawartości, dzięki czemu Twoja strona będzie bezużyteczna.

Właściwym sposobem do jednostek odpowiedź, która zależy od nagłówka żądania jest włączenie go w nagłówku Vary reakcji, na przykład:

Vary: X-Requested-With 

Jednak realizacja IE nagłówka Vary jest w zasadzie złamane, więc spowoduje to całkowite złamanie pamięci podręcznej. Zamiast tego lepszym rozwiązaniem jest po prostu mieć inny adres URL dla pełnej wersji strony oraz treści tylko-do-Ajax, np

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

W każdym razie, nie rób tego rodzaju w treści strony nawigacja bez jawnie zapewniających nawigację, bookmarkable, SEO-friendly URLs (na podstawie history.pushState gdzie dostępne i inne #! hash-links).Robisz lepiej niż większość z naiwnych opartych na pseudo-nawigacji witryn, dostarczając alternatywne adresy URL inne niż JS, ale wciąż wkładasz sporo wysiłku w niestandardowy schemat nawigacji, który jest gorszy niż zwykłe linki do stron. . Nie warto sabotować użyteczności twojej strony tylko dla efektu zanikania w zanikach.