Stop Javascript and HTML from loading from cache

Question

I am creating a single page javascript application, and when the application starts, I use one javascript file to load all the other files that I need on the fly. When I click update according to Firebug, my HTML page as well as javascript pages will load with 304 Not Modified Error and my javascript will stop working.

I understand that this is due to browser caching, but how can I avoid this? I load the original HTML page with one script call

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

and then continue to dynamically load the rest from inside the 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); } }; 

I know that Gmail uses cookies to prevent this. Does anyone know how to take this approach? Should I set a cookie on the server and then check it with JS on each download / update page and use something like window.location.refresh () if the cookie tells me that the page is loading from the cache?

Answer 1

Caching is important for performance reasons. I would recommend that you pass the version number in the query line and increase the version number with each update. This will force the browser to resubmit the request, and it will load from the cache if it already has the same version.

Answer 2

To go to @Ramesh answer :

to force reload js file instead of cache use this html:

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

The next time you make changes to this file, only +1, v . By the way, this also works with css files.

Answer 3

I agree with all the other answers. 304 is not a mistake, and there are many reasons why this behavior is correct.

That being said, there is a simple “hack” that you can use. Just attach a unique url to your JS call.

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

Again, this is a hack. Performance is wise, it's terrible.

Answer 4

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

Add this to your HTML HEAD.

Answer 5

You need to set script.src = scripts[loaded]; after adding onreadystatechange / onload handlers. Otherwise, the event will fire before adding handlers, since the cached version is loaded instantly.

Answer 6

After several problems with the caching problem, having tried almost everything (including a script that changes the URLs using a parameter), I found a message explaining how to do this using IIS .

• Launch IIS Manager (INETMGR from the start menu works for me)
• Navigate to the desired site in the connection tree
• Opening output caching
• Change settings
• Uncheck Enable cache and enable kernel cache
• If you cannot save the changes, make sure your web.config file is not read-only
• IISRESET required for changes.

This is an original post mentioning that it is related to IIS 7.5 (on Windows 7) https://forums.iis.net/t/959070.aspx?How+do+you+disable+caching+in+IIS+

One of the things I tried before this was to add .html and .js to the output caching and the “Prevent all caching” check. Therefore, if it does not work after IISRESET, try this, although I'm not sure if this is really necessary.

EDIT:

If it does not work, still in IIS go to the headers of the HTTP responses and add new actions:

• Name: cache-control, Value: no-cache

• Name: expires, Value: 0

Answer 7

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

Answer 8

I would suggest using Javascript to generate a random number using Math.random, multiply it and then Math.floor to return its integer. Then I will add this number to the URL as a variable. Because the number changes at the time each page loads, the file should never be cached.

 <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>