title: Stop Javascript and HTML from Loading From Cache
body: <p>I am building a single page javascript app and when the application starts I use a single javascript file to load every other file I need on the fly. When I hit refresh, according to firebug, my HTML page as well as javascript pages will load with a 304 Not Modified Error and my javascript stops working.</p>
  
  <p>I understand this is due to browser caching, but how can I avoid this? I load the initial HTML page with a single script call</p>
  
  <pre><code>&lt;script src="js/config.js" type="text/javascript"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>and then continue to load the rest dynamically from within that script</p>
  
  <pre><code>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);
      }
  };
  </code></pre>
  
  <p>I know that Gmail uses cookies to prevent this. Does anyone have any idea how to take that approach? Should I set the cookie on the server and then check it with JS on each page load/refresh and use something like window.location.refresh() if the cookie tells me the page is loaded from cache?</p>