Force Browser to Reload .swf's with jQuery
Recently, I ran into an issue with one of the flash apps I built. Since, I'm making changes almostdaily, there is always a new version of the swf, and right now there are users actively using this app and they weren't receiving the newest version unless their cache was cleared. The only option is to force the browser to reload the new .swf and so I searched on Google and this seemed to be those most frequent answer, but certainly not the best.
<META HTTP-EQUIV="CACHE-CONTROL" CONTENT="NO-CACHE">
And yes it does work great but only if the user doesn't already have the .swf in their cache and it doesn't always work with Internet Explorer.
A co-worker suggested I try to make a javascript snippet that would append x number of random digits after a "?" to the default.swf file in order to trick the browser into thinking it was a new version of the file.
I decided to use the tools available with the jQuery API along with a simple "for" loop that will append a random 24 digit number to the end of the embed's src like this default.swf?8936273541227119153514771. This was relatively simple to set up. I simply use the .attr("src") function from the jQuery API to pull the source from the element of the #css_id being called. Then a for loop generates 24 random digits and creates a string of them and concanets them to the src of the element using the .attr("src", string) function again, but this time there is a 2nd parameter, and it is a string that will replace the current src of that element.
Here is the Javascript:
-
<script type="text/javascript">
-
$(document).ready(function(){
-
var temp = $("#css_id").attr('src');
-
var rando='';
-
for(i=0; i<=24;i++){
-
rando = rando +((Math.floor(Math.random()*10))+1);
-
}
-
$("#css_id").attr('src', temp + '?' + rando);
-
});
-
</script>
The #css_id is the id for the embed tag in which you are loading the swf file.
<embed id="css_id" src="sites/default/files/default.swf"></embed>That should about cover it! Please note though that this is more of a "hack" then an elegant solution. Each time your user visits your site, they will be downloading a new .swf file even if there is no update. If your site has a lot of loyal traffic and users come to your site several times a week or day, they will be downloading a new .swf each time and that can begin to fil up their temporary internet files pretty quickly. This is a good solution is you are updating the .swf frequently and it is of relatively small size.
Now if you add the meta tag I showed above to your <head>, this should keep the browser from storing each .swf in the cache and thus should resolve this issue of storing too many different .swf's for the same file.
If you know of a better way to do this, I would like to hear it! :D
Comments
a more elegant solution would
a more elegant solution would be to append a version number at the end of the swf when you update it. default.swf?v=25
Yes, I've changed how I do
Yes, I've changed how I do this completely now. I have a variable that I can change in the admin settings for a module, and that variable is just appended to the swf when it is embedded. It works great for when we release new versions. :)
TNX
I'm really glad to see your post! I was searching for something like this for a long time... Thanks a lot to share!
swfobject script
I recently sent the support staff at Magic Point the folowing note:
"I have converted to Joomla17 and finally got my site working (www.jimberglund.com)
Magic Point Header works perfectly on Firefox and Chrome, but IE8 tells me I have to update Flash. (I’m already current, and have searched the internet for solutions but to no avail). I can’t upgrade, so I’m stuck.
If this is a problem you are familiar with, and can offer advice, I’d really appreciate it."
To which they replied,
"Hello Jim,
Try to set the swfobject script to mode 2 or mode 3, because in some versions of IE the swf javascript is not loaded."
To which I replied,
"I don't have a clue how to do this!"
I searched throught the Internet and tried a number of things, none of which made any difference.
Finally, I discovered yours, and read it with great anticipation that it may fix the problem, but alas, I don't understand any of what has been written, although I could tell from the thread that people like what you've done.
So I have three newby questions:
1. Where does this code have to be placed to work?
2. How do I get to that place?
3. Do I just cut & paste, & save, and Hope?
Thanks fort your consideration,
Jim Berglund
Post new comment