停止从缓存加载 Javascript 和 HTML

Question

我正在构建一个单页 javascript 应用程序，当应用程序启动时，我使用单个 javascript 文件即时加载我需要的所有其他文件。当我点击刷新时，根据萤火虫，我的 HTML 页面以及 javascript 页面将加载一个 304 Not Modified 错误并且我的 javascript 停止工作。

我知道这是由于浏览器缓存造成的，但我该如何避免呢？我使用单个脚本调用加载初始 HTML 页面

<script src="js/config.js" type="text/javascript"></script>

然后继续从该脚本中动态加载其余部分

window.onload = function () {
    var scripts = ['http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js', 'js/core.js', 'js/sandbox.js']; //Application scripts
    var loaded = 0;
    //Callback is executed after all scripts have been loaded.
    var callback = function () {
        if (loaded + 1 == scripts.length) {
            //Create Modules
            CORE.loader("js/modules/Login.js", function () {
                CORE.createModule('loginForm', Login);
            });

            //Create HTML bindings.
            CORE.createBinding('appContainer', '#Login', 'login.html');
            CORE.bindHTML(window.location.hash); //Loads hash based page on startup
        } else {
            loaded++;
            loadScript(scripts[loaded], callback);
        }
    };

    loadScript(scripts[0], callback);

    function loadScript(scriptSrc, callback) {
        var script = document.createElement('script');
        script.type = 'text/javascript';
        script.async = true;
        script.src = scripts[loaded];

        if (script.readyState) {
            script.onreadystatechange = function () {
                if (script.readyState == 'loaded' || script.readyState == 'complete') {
                    script.onreadystatechange = null;
                    callback();
                }
            };
        } else {
            script.onload = function () {
                callback();
            };
        }

        document.getElementsByTagName('head')[0].appendChild(script);
    }
};

我知道 Gmail 使用 cookie 来防止这种情况。有谁知道如何采用这种方法？我是否应该在服务器上设置 cookie，然后在每个页面加载/刷新时使用 JS 检查它，如果 cookie 告诉我页面是从缓存加载的，则使用 window.location.refresh() 之类的东西？

Answer 1

<META HTTP-EQUIV="PRAGMA" CONTENT="NO-CACHE">  

将此添加到您的 HTML HEAD 中。

Answer 2

出于性能原因，缓存很重要。我建议您在查询字符串中传递一个版本号，并在每次更新时增加版本号。这将强制浏览器重新发送请求，如果它已经具有相同的版本，它将从缓存中加载。

Answer 3

您需要在添加onreadystatechange/onload 处理程序之后设置script.src = scripts[loaded]; 。否则，事件将在添加处理程序之前触发，因为缓存版本会立即加载。

Answer 4

我同意所有其他答案。 304 不是错误，这种行为正确的原因有很多。

话虽如此，您可以使用一个简单的“hack”。只需将唯一的 URL 参数附加到 JS 调用。

var timestamp = +new Date;
var url = "http://mysite.com/myfile.js?t=" + timestamp;

同样，这是一个 hack。性能方面，这太可怕了。

Answer 5

扩展@Ramesh's answer：

要强制重新加载 js 文件，而不是缓存，请使用以下 html：

<script src="js/config.js?v=42" type="text/javascript"></script>

下次您对该文件进行更改时，只需 +1 v。顺便说一句，这也适用于 css 文件。

Answer 6

在为缓存问题苦苦挣扎了几个月之后，尝试了几乎所有的东西（包括使用参数更改 URL 的脚本），我找到了一篇文章，其中解释了如何使用 IIS 来做到这一点。

• 启动 IIS 管理器（开始菜单中的INETMGR 对我有用）
• 在连接树中导航到所需站点
• 打开输出缓存
• 编辑功能设置
• 取消选中启用缓存和启用内核缓存
• 如果您无法保存更改，请确保您的 web.config 文件未标记为只读
• 需要 IISRESET才能进行更改

这是原始帖子，其中提到它与 IIS 7.5（在 Windows 7 中）相关 https://forums.iis.net/t/959070.aspx?How+do+you+disable+caching+in+IIS+

我之前尝试过的其中一件事是在输出缓存中添加 .html 和 .js，并选中“阻止所有缓存”。因此，如果在 IISRESET 之后它不起作用，请尝试一下，尽管我不确定它是否真的需要。

编辑：

如果它不起作用，仍然在 IIS 中转到 HTTP 响应标头并添加新操作：

1. 名称：缓存控制，值：无缓存

2. 名称：过期，值：0

Answer 7

<?php 
$xn = date("YmdHis");

echo  " <script	src='root.js?$xn'></script>";
?>

Answer 8

我建议使用 Javascript 生成一个随机数，使用 Math.random 将它相乘，然后 Math.floor 返回它的整数。然后，我会将此数字作为变量添加到 URL。由于每次页面加载期间数字都会更改，因此不应缓存文件。

<script>
  var url="yourscript.js";
  var extra="?t=";
  var randomNum = String((Math.floor(Math.random() * 200000000000000)));
  document.getElementById('myScript').src = url+extra+randomNum;
</script>
<script id="myScript"></script>