jQueryは常にキャッシュからスタイルシートをロードします

Question

私たちは剣道UIを使用し、テーマを切り替えることができるWebアプリケーションを持っています。異なる剣道テーマごとにカスタムCSSシートを追加する必要がありました。

jQuery appendTo（ "head"）を使用してカスタムスタイルシートを読み込みます。問題は、これらのシートを変更すると、jQueryは実際に変更されても、キャッシュからロードし続けていることです。私たちは特にGoogle Chromeでこの問題を抱えています。私は他のブラウザをテストしていませんが、問題が他のブラウザにもあると思われます。

function changeTheme(skinName, animate) { 
var doc = document, 
    kendoLinks = $("link[href*='kendo.']", doc.getElementsByTagName("head")[0]), 
    commonLink = kendoLinks.filter("[href*='kendo.common']"), 
    skinLink = kendoLinks.filter(":not([href*='kendo.common'])"), 
    href = location.href, 
    skinRegex = /kendo\.\w+(\.min)?\.css/i, 
    vmSkinRegex = /kendo\.\w+(\.min)?\.css/i, 
    extension = skinLink.attr("rel") === "stylesheet" ? ".css" : ".less", 
    url = commonLink.attr("href").replace(skinRegex, "kendo." + skinName + "$1" + extension), 
    vmUrl = commonLink.attr("href").replace(vmSkinRegex, "kendo." + skinName + "$1" + ".vm" + extension); 

vmUrl = vmUrl.replace(".min", ""); 

function preloadStylesheet(file, callback) { 
    var element = $("<link rel='stylesheet' media='print' href='" + file + "' />").appendTo("head"); 

    setTimeout(function() { 
     callback(); 
     element.remove(); 
    }, 100); 
} 

function replaceTheme() { 
    var oldSkinName = $(doc).data("kendoSkin"), 
     newLink, vmLink; 

    if (doc.createStyleSheet) { 
     // < IE 11 
     newLink = doc.createStyleSheet(url); 
     vmLink = doc.createStyleSheet(vmUrl); 
    } else if ($('html').hasClass('k-ie')) { 
     // IE 11 

     newLink = $("<link/>"); 
     newLink.appendTo("head"); 
     newLink.attr({ type: 'text/css', rel: 'stylesheet' }) 
      .attr('href', url); 

     vmLink = $("<link/>"); 
     vmLink.appendTo("head"); 
     vmLink.attr({ type: 'text/css', rel: 'stylesheet' }) 
      .attr('href', vmUrl); 

    } else { 
     // All the smart browsers. 
     newLink = skinLink.eq(0).clone().attr("href", url); 
     vmLink = skinLink.eq(0).clone().attr("href", vmUrl); 
    } 

    newLink.insertBefore(skinLink[0]); 
    vmLink.insertBefore(skinLink[0]); 

    skinLink.remove(); 

    $(doc.documentElement).removeClass("k-" + oldSkinName).addClass("k-" + skinName); 
} 

if (animate) { 
    preloadStylesheet(url, replaceTheme); 
} else { 
    replaceTheme(); 
} 
}; 

Answer 1

CSSのURLの末尾にタイムスタンプを追加してみてください、例えば：

url = url + "?_=" + (new Date()).getTime(); 

これは、URLキャッシュを回避します。