如何总是获取CSS而不使用缓存副本?

时间:2015-11-13 16:37:01

标签: javascript jquery css css3

使用HTML5 + CSS3 + jQuery。

由于我经常更改我的CSS文件,我想强制用户'浏览器总是获取CSS文件,从不使用缓存版本。

我发现我应该写这样的东西:

<link rel="stylesheet" type="text/css" href="index.css?t=[...some unique id...]"/>                          

如何自动生成此类唯一ID? (也许是当前时间?)

由于

3 个答案:

答案 0 :(得分:1)

如果您的CSS体积小且动态,那么最佳解决方案是使用<head>标记将其<style>内联注入:https://developer.mozilla.org/en-US/docs/Web/HTML/Element/style

这样,您的样式将在每次刷新页面时更新,您无需等待额外的http请求。

例如,如果您的样式表如下所示:

/* This stuff hardly ever changes */
html {
    background-color: white;
    font-size: 16px;
}

/* This stuff changes all the time */
body {
    background-image: url('todays-image.png');
}

你的HTML看起来像这样:

<html>
    <head>
        <title>My Page</title>
        <link rel="stylesheet" type="text/css" href="index.css" />
    </head>
    <body>
        <h1>My Page</h1>
    </body>
</html>

将css更改为:

/* This stuff hardly ever changes */
html {
    background-color: white;
    font-size: 16px;
}

html看起来像这样:

<html>
    <head>
        <title>My Page</title>
        <link rel="stylesheet" type="text/css" href="index.css" />
        <style>
            /* This stuff changes all the time */
            body {
                background-image: url('todays-image.png');
            }
        </style>
    </head>
    <body>
        <h1>My Page</h1>
    </body>
</html>

如果index.css的所有内容经常更改,您可以完全删除该文件并删除link标记。

答案 1 :(得分:1)

您可以使用服务器时间戳

<link rel="stylesheet" type="text/css" href="style.css?<?php echo date('l jS \of F Y h:i:s A'); ?>" />

更好的想法是使用你的css版本:

<link rel="stylesheet" type="text/css" href="style.css?version=<?php echo $CSS_VERSION; ?>" />

答案 2 :(得分:0)

对于您的特定问题,您可以使用ticks通过javascript注入链接。在此示例中,代码将插入css作为最后处理的样式集。我建议在后端执行此操作。

<html>
    <head>
        <title>Test</title>
        <script type="text/javascript">
            var sourceName = 'test.css?v=' + ((new Date().getTime() * 10000) + 621355968000000000); // using ticks
            var linkElement = document.createElement('link');
            linkElement.setAttribute('type', 'text/css');
            linkElement.setAttribute('rel', 'stylesheet');
            linkElement.setAttribute('href', sourceName);
            document.getElementsByTagName('head')[0].appendChild(linkElement);
        </script>
    </head>
    <body>
        <h1>Test</h1>
    </body>
</html>

我在发布它之前测试了它并经历了各种方法。许多人没有执行href更改。如果将它注入DOM中,它似乎只会执行。