所有IE版本中的jQuery .load（）問題

我試圖做一個動態模板。我有邊欄中的鏈接，我想用jQuery中的.load（）動態加載內容。所有IE版本中的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中。在其他瀏覽器中，它正常工作。

任何想法可能是什麼問題？

謝謝。

來源

2010-10-08 depi

感謝您的提示！ – depi 2010-10-08 18:20:37

我相信這是一個緩存的問題..

由於URL是一樣的當前顯示的頁面，IE使用緩存（所有的頁面），並將其插入在#content DIV ..

嘗試在請求添加時間戳

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

來源

2010-10-08 18:23:52

嗨加比，哇，我怎麼看不到在.load（）的文檔中。它像一個魅力一樣工作！謝謝。 – depi 2010-10-08 18:28:01

@depi，'{noncache：new Date（）。getTime（）}'是第二個參數，它在load（）中是指傳遞給請求頁面的數據。 'nocache'不是一個關鍵字或任何東西..我只是爲了說明的目的而命名參數。:)它可能是任何東西。重要的部分是時間戳，它使請求在每次製作時都是唯一的，因此使緩存無效。 – 2010-10-08 19:17:21

噢，謝謝你的解釋！ :) – depi 2010-10-08 20:09:55

你似乎是依靠：

X-Requested-With: XMLHttpRequest

header在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（其中可用和否則#!散列鏈接））。通過提供非JS替代URL，您比這些天真load()的大多數僞導航網站都做得更好，但是您仍然在爲非標準導航方案付出一些努力，這比僅使用常規頁面鏈接更糟糕。爲了淡化淡出效果，破壞網站的可用性並不值得。

來源

2010-10-08 18:24:44 bobince

好的，我可以在哪裏找到關於您所描述技術的更多信息？我試圖做的是讓導航工作與沒有JS，以及我有。我現在看到的唯一的問題是，Gaby幫助我的是「可收藏的網址」。 – depi 2010-10-08 18:36:39

參見例如http://badassjs.com/post/840846392/location-hash-is-dead-long-live-html5-pushstate – bobince 2010-10-08 19:43:44

所有IE版本中的jQuery .load（）問題

回答

相關問題