停止从缓存加载Javascript和HTML

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的答案:

要强制重新加载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;

再次，这是一个黑客。性能明智，这太可怕了。