How do I stop js files being cached in IE?

Question

Hello stackers!

I've created a page that uses the CKEditor javascript rich edit control.

It's a pretty neat control, especially seeing as it's free, but I'm having serious issues with the way it allows you to add templates.

To add a template you need to modify the templates js file in the CKEditor templates folder. The documentation page describing it is here.

This works fine until I want to update a template or add a new one (or anything else that requires me to modify the js file).

Internet Explorer caches the js file and doesn't pick up the update. Emptying the cache allows the update to be picked up, but this isn't an acceptable solution. Whenever I update a template I do not want to tell all of the users across the organisation to empty their IE cache. There must be a better way!

Is there a way to stop IE caching the js file? Or is there another solution to this problem?

Update

Ok, I found this section in the CKEditor API that will allow me to use the "insert timestamp into the url" solution suggested by several people.

So the script now looks like this:

config.templates_files =
[
    '/editor_templates/site_default.js?time=' + utcTimeMilliseconds
];

Thanks for your help guys.

Answer 1

.NET / C# :

public static void DisallowBrowserCache( )
{
    HttpContext.Current.Response.Cache.SetCacheability(HttpCacheability.NoCache);
    HttpContext.Current.Response.Cache.SetAllowResponseInBrowserHistory(false);
}

You could make ASP.NET write a js file to the outputstream (http://server.com/jsFile.aspx, set http headers), and control the caching behavior of the response with the above method.

Answer 2

You can add rand seed to your js file. I mean <script src='jsFile.js?seed=12345'
And every time you want to empty cache - change seed number

Update:

as I understood you have to write like this config.templates_files = [ '/mytemplates.js?seed=12345' ];

Answer 3

Set Expires-Header accordingly, e.g. in Apache

ExpiresActive On
ExpiresByType text/javascript access

This is not recommended for a real web application, only for intranet scenarios because the files will not be cachable.

Answer 4

every time you load the js file, pass a variable of a random number as a variable.

src='/libs/js/myfile.js?4859487594573

same trick for ajax loaded files.

Answer 5

Youo can add a timestamp query parameter when you include your .js file..

so instead of <script type="text/javascript" src="somefile.js"></script> you can <script type="text/javascript" src="somefile.js?timestampgoeshere"></script>

this should make the file to always get reloaded (the timestamp needs to be dynamic and changing for each load of the page..)

Answer 6

Multiple methods (don't need to do them all):

1. press ^F5 (control + F5) - that'll load without cache
2. set pragma/cache headers on sending
3. use a random variable in the GET query string

Answer 7

I am afraid you'll have to hack into the FCKEditor code and force the client JavaScript to load fresh copy of the XML file. You can do so by appending a ?random=<a random number> to the URL of the XML file being requested. FCKEditor is opensource so you should be able to locate the lines the request the XML and modify accordingly.