Using yepnope.js. I need to "refresh" the script, but yepnope prevents files with the same url from being re-loaded.
In the documentation, they suggest using a plugin to allow files to refresh. Is there such a plugin available? What are my other options for refreshing a script during runtime in Javascript?
I tried appending a random number as a query argument to the url. That worked, but made it much more difficult to set breakpoints while debugging, so I'd rather not do this.
Any suggestions? Thanks!
IMHO it is not possible do that using any yepnope method.
I think you only has two possibilities:
Adding a random parameter to the querystring (your current solution)
Changing the yepnope script to:
expose the scriptCache yepnope var
reset the scriptCache[url]
and finally remove the created DOM img node that has your url as src.
In addition set the cache headers to expired, to prevent browser cache.
good luck
Related
I have a website that loads mostly using AJAX calls. The javascript and CSS files are only loaded once when the page first loads.
My issue is that the javascript/CSS can get out of sync with the HTML and server-side code. The page can be using an old versions of the javascript file (from when the page first loaded) while the server-side code and ajax-loaded HTML files always use the latest code and files.
What are some strategies for dealing with this?
I have considered polling the server at set intervals and asking if there is a newer version of the JS. Then, if there is, reloading the page. But, it seems that this can get ugly, with the page suddenly reloading at awkward moments instead of, for example, as the result of a user-initiated call.
Also, there are some changes to the javascript that do not necessarily require that a page be reloaded. For example, the changes might affect a different page/module than the one that the user is on.
Re-loading the javascript with every Ajax call is not viable
I can imagine ugly solutions to this, but thought I'd ask first.
EDIT (in response to comments and suggested answers)
The only way to get the JS back into sync is to reload the page, which then loads the new JS. Adding new JS to an old page won't work as it doesn't get rid of any old functions, listeners, etc. I'm not asking how to reload a page or how to load javascript. I'm asking for a strategy of knowing WHEN to do it, especially in a way that does not seem awkward to the user. Do people incorporate polling to ask if there is a new JS version? Do they then suddenly (from the user's point of view) reload the page? Do they poll even when the tab is hidden? Is this a problem for the server? Where do they keep track of the latest required JS version? Or, do they ask with every AJAX request - hey, should I reload? Did they write a special function for that? Do they keep all new html/server code backwards compatible with the js?
Someone who has dealt with this, how do you do it?
Two possible solutions include
calling $.getScript() to retrieve, update variables at document from at server-side to match variables at document before calling $.ajax(/* settings */) ;
alternatively could use web workers to update original document variables to match server-side variables at beforeSend of $.ajax(/* settings */)
At result of first step of either approach, abort $.ajax() call, call error handlers, notify user, send message to server about error.
var head = document.getElementsByTagName("head")[0],
scripts = {};
function load_script(name){
var myscript = document.createElement('script');
myscript.setAttribute("type","text/javascript");
myscript.setAttribute("src", name);
if (scripts[name]) head.replaceChild(myscript, scripts[name]);
else head.appendChild(myscript);
scripts[name] = myscript;
}
// the first call to load the script code
// and then call if you decide to upgrade a newer version
load_script('js1.js');
load_script('js2.js');
I have seen many websites that include at their JavaScript and CSS external resources things like this:
filename.js?v=3cc1b79c2abb
And:
filename.css?v=7bbb71ecd5eb
The "?v=..." things at the end...
What is this? And for what is this useful?
Thank you!
Cheers :)
These are a form of "Cache Busting" - they force the browser to download the latest version of the file, rather than taking a chance at loading an old file from cache.
There is something more deeper - why do we need cache busting?
For efficiency sake we have to make the browser cache the resource files. For that to work we set last modified date as a very old date (say, 01-Jan-1970 00:00:00.000) and expiry date long into the future. These 2 things will make the browser cache the files so that they are not requested from the server again. That is very efficient. However, that causes a problem when you update the application. None of the resources will be downloaded again! To work around that we configure the build tool to append a version number query string unique to the build at the end of resource URLs. It is typical to use build timestamp or a uuid or the source repository version number (in case of version control tools like SVN which give a unique version number to every commit) as the version number string appended to the end of the resource URLs. That forces the browser to download new version whenever the application is updated.
This is your own version/keyword v=7bbb71ecd5eb of js and css, After use this, there would not be cache in browser with your older javascript and css.
Which means your new update of css and javascript would be applied without any cache.
It's to force the browser to download the file instead of getting it from cache.
For example, you have this url with css : styles.css?v=blablabla, but later you change css and want to have these changes to be seen instantly (instead of waiting when browser cache will expire or forcing user to press Ctrl + F5) you change it to something like styles.css?v=otherblablabla. Browser sees it as different url so it have to download it.
It's just a parameter in query string, and because the url points to static resource, these parameters are ignored by web server.
You could also see something like this image.png?1392469113262. It's just a parameter named 1392469113262 that has no value. image.png is static resource so this parameter will be ignored by server. These numbers are usually some timestamp and it's the often the best way to force browser to not cache image (or any other resource).
I've seen that a lot and I just don't know what it means. This, for example:
<script src="http://server.com/file.js?y=2345678" type="text/javascript"></script>
If it is in deed possible to 'catch' the value of 'y' in the javascript file, how would that be?
Thank you.
PS. I know what mod_rewrite is and that is not the answer, just in case :)
This is to force the browser not to cache the file, by making it believe that it is a dynamic file with get parameter rather than a static one.
This is often used to facilitate caching of the JS file. You set a far-future Expires header which means the browser may cache it for a very long time. If you change something in the file you also update the number in the querystring, which will make the browser refetch the file. This works because caching is for unique filenames and the querystring is part of the filename (as far as the browser is concerned).
A similar approach to this is to use rewrite rules in the web server to have some part of the file name which it doesnät care about. Here's a Nginx rule to show what I mean:
rewrite ^/style\..*\.css$ /style.css;
I use this rule to have filenames like style.42750cad6.css, which always points to the file style.css. The text in the middle is changed whenever I change style.css. The difference between the first approach is that this does not use the querystring so the caching will work in more browsers.
ok the way i see it in two ways.
it can be used to load js without caching
for every request to the server, the server might log information(if logging is enabled), if i am using it for analytics i can therefore use a different parameter for locations and from the log i can analyse and get required details.
I'm working on an asp.net website. I need to make sure my javascript and css updates will be immediately available for returning visitors, without them having to clear their cache to get the latest code. How can I force this when needed, and leave it alone on other occasions?
Thanks in advance.
Stackoverflow does this very elegantly IMO. You can see in there source there is a query-string variable passed.
<script type="text/javascript" src="http://sstatic.net/js/stub.js?v=778aaf5a38e2"></script>
This will force new load if that changes.
In order to reliably force a refresh of cached content on the browser you need to change the name / requested URL of the file somehow.
Often this is done by appending a query string to the URL (which is often ignored)
See When Does Browser Automatically Clear JavaScript Cache? for a more complete discussion.
You'll need to apply no-cache header to those resources, alternatively make the url dynamic somehow.
see - http://www.w3.org/Protocols/rfc2616/rfc2616-sec14.html
I asked this sort of question before ( Application fails to dynamically _re_load JavaScript files ) but I couldn't quite resolve the problem (if it has any solution), so I will put this in another fashion, a simpler one:
Can one unload a file from the browser's memory for posterior reloading?
(Removing the tag is not enough apparently.)
Or more relevant, if a reinsert the tag after removing it, is that code rerun (apparently not)?
How can accomplish the latter?
Thanks in advance.
You could generate a random number and then attach it to the end of the filename like this: .../script.js?r=0.25300762383267283. Then the browser would think it's a new file and not reference it from the cache.
I don't think it is possible to unload a script file.
As to the re-run issue, you could try giving each instance you call a JS file a varying GET parameter (e.g. the current timestamp). That might / should cause the browser to re-execute the file.
What are you trying to achieve? There may be smarter ways than re-loading a script file.