Question

我们有一个使用Kendo UI的网络应用程序，允许用户切换主题。我们必须为每个不同的Kendo主题添加自定义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 + "?_=" + (new Date()).getTime();

这将避免网址缓存。

jQuery总是从Cache中加载样式表

1 个答案: