停止从缓存加载Javascript和HTML

Stop Javascript and HTML from Loading From Cache

本文关键字：Javascript HTML 加载缓存更新时间：2023-09-26

我正在构建一个单页javascript应用程序，当应用程序启动时，我使用一个javascript文件来加载我需要的所有其他文件。根据firebug的说法，当我点击刷新时，我的HTML页面和javascript页面将加载一个304未修改错误，我的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（）之类的东西吗？

扩展@Ramesh的答案：

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

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

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

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

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

话虽如此，有一个简单的"黑客"你可以使用。只需在JS调用中附加一个唯一的URL参数。

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

再说一遍，这是一次黑客攻击。就表现而言，这太可怕了。

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

将其添加到您的HTML头中。

<?php 
$xn = date("YmdHis");
echo  " <script	src='root.js?$xn'></script>";
?>

我建议使用Javascript生成一个随机数，使用Math.random将其相乘，然后使用Math.floor返回其整数。然后，我将这个数字作为变量添加到URL中。由于数字在每次页面加载过程中都会发生变化，因此永远不应该缓存该文件。

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

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

在与缓存问题斗争了几个月之后，我尝试了几乎任何事情（包括使用参数更改URL的脚本），发现了一篇文章，解释了如何使用IIS来做到这一点。

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

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

在此之前，我尝试过在Output Caching中添加.html和.js，并选中"Prevent All Caching"。因此，如果在IISRESET之后它不起作用，请尝试，尽管我不确定它是否真的是必需的。

编辑：

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

名称：缓存控制，值：无缓存
名称：过期，值：0