Question

我正在构建单页javascript应用程序，当应用程序启动时，我使用单个javascript文件来加载我需要的所有其他文件。当我点击刷新时，根据firebug，我的HTML页面以及javascript页面将加载304 Not Modified Error并且我的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

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

Answer 2

展开@Ramesh's answer：

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

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

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

Answer 3

我同意所有其他答案。 304不是错误，并且有很多原因导致此行为正确。

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

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

同样，这是一个黑客。表现明智，这太可怕了。

Answer 4

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

将其添加到HTML HEAD中。

Answer 5

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

Answer 6

在解决了几个月的缓存问题后，几乎尝试了任何事情（包括使用参数更改URL的脚本）我找到了一篇文章，解释了如何使用 IIS 来解决这个问题。 / p>

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

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

我之前尝试过的一件事就是在输出缓存中添加.html和.js，并检查＆＃34;防止所有缓存＆＃34;。因此，如果它在IISRESET之后不起作用，请尝试这样做，但我不确定它是否真的需要。

编辑：

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

名称：缓存控制，值：无缓存
姓名：到期，价值：0

Answer 7

我建议使用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>

Answer 8

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

停止从缓存加载Javascript和HTML

8 个答案: