Prevent client-side caching of javascript within a static file - javascript

I have a web app that makes assorted calls to load in javascript. i.e.:
<script src="test.js"></script>
I know the common solution to prevent caching is this:
<script src="test.js<?=$random_number?>"></script>
My challenge is that my app is not served up by a language like PHP/ASP. It is basically just a flat file. (Because we use the same source code as a PhoneGap app)
Is there a cleaner way to do a script tag other than below?
document.write("<script src='test.js?rnd=" + Math.random() + "'></script>");

use a dom script adder instead of document.write:
function addScript(u,d){(d=document).getElementsByTagName('head')[0].appendChild(d.createElement('script')).src=u}
addScript("test.js?rnd="+Math.random());

Related

Asynchronously load JS

We have our custom JS that are used by our clients on their websites. Is there any way to have the JS load asynchronously on my clients' websites (any configurations from our end) or it needs to be done only by our clients using a cache plugin?
JS Example - <script src="https://cdn.domain.com/5670e553459091885818c74beba82.js"></script>
It's currently render-blocking according to Google's PageSpeed Test and affecting page performance.
Thanks
Add async/defer attribute to the script.
<script async src="https://cdn.domain.com/5670e553459091885818c74beba82.js"></script>
Or
<script defer src="https://cdn.domain.com/5670e553459091885818c74beba82.js"></script>

How to make external javascript link with variable version parameter (changeable parameter)

I want other web sites to link to js file from my domain, like this:
<script language="javascript" src="http://mySite/jsfile.js"></script>
To avoid the cache problem then I need to add a version parameter to the JS file.
But if the version parameter is static then they have to keep updating the link with every new version, so I need a "CHANGEABLE" parameter like this:
<script language="javascript" src="http://mySite/jsfile.js?new Date().getTime()"></script>
How to do that?
in other way: HOW TO MAKE THEM ALWAYS GET THE LATEST VERSION OF MY JS FILE WITHOUT THE NEED TO RE-UPDATE THE JS URL IN THEIR PAGES.
Thanks in advance for your help :)
You can write your <script> tag with js:
<script language="javascript" src="http://mySite/jsfile.js?new Date().getTime()"></script>
with:
<script>
document.write("<script language="javascript" src="http://mySite/jsfile.js?k=" + Date.now() + "'><\/script>");
</script>
this way its posible to add some number or timesamp after your jsfile.
I would make a script, which call my api. Get the lastest js script code, And include it on site,
this way, it's doesn't matter if it's cached the url for the script.
First, Make a .js file, which use Jquery getScript to get and execute. the script you won't have cached .
get the people to use this. then whenever the site is loaded, it get's a new version of the script from your server.
Jobs done.
Im not providing anycode, since, it's more or less using the Jquery getscript. and the docs for that, is better then any sample i could make.

Determine protocol used to load javascript

I have javascript file, located on one domain, e.g:
http://mydomain.com/script.js
Some pages (from other domains) include my javascript using SCRIPT tag. They can include it via http or https
<script src="http://mydomain.com/script.js"></script>
or
<script src="https://mydomain.com/script.js"></script>
Also they can include my script using 3rdparty iframes, e.g:
<iframe src="http://3rdparty.com/frame.php">
where http://3rdparty.com/frame.php outputs
<script src="http://mydomain.com/script.js"></script>
or
<script src="https://mydomain.com/script.js"></script>
I can edit only static javascript file script.js on mydomain.com.
How I can detect what protocol used to load my javascript (https://mydomain.com/script.js or http://mydomain.com/script.js)?
You can use a protocol relative URL:
<script src="//mydomain.com/script.js"></script>
You can use this:
document.location.protocol + "//mydomain.com/script.js"
I do not believe that you have any ability to identify within the code how it has been loaded. The best suggestion I can come up with is to have the http and https point to different locations ( i.e. be different sites ) and have something within the code that indicates which one is being picked up.
var protocol='http'
or
var protocol='https'
It does mean maintaining two files, and two sites though.
ETA: I thought James Wiseman had the answer, but of course that will only return the protocol of the PAGE, not the SCRIPT. If you know these are related, that would work ( often the https is loaded on https pages and vv ). But it is not definitive.
It is a good solution if you can be confident that the protocol on hte page is the same as on the script.

Howto: Javascript files always up-to-date

I have a .NET web applications which uses a lot of javascript. The .aspx and the .js files go hand-in-hand together.
Problem: The .aspx files are always up-to-date on the client (not cached) but the .js files might well be cached. This is even a problem if the files are only cached for one session since users are spending many hours on my site and everytime I update a .aspx/.js pair users are running into a problem.
Now, I found a solution but I am not sure if there is perhaps a better solution or if my solution has a performance drawback.
This is my solution:
.js-References in .aspx:
<script type='text/javascript' src='../scripts/<%# GetScriptLastModified("MyScript.js") %>'></script>
So, the "GetScriptLastModified" will append a ?v= parameter like this:
protected string GetScriptLastModified(string FileName)
{
string File4Info = System.Threading.Thread.GetDomain().BaseDirectory + #"scripts\" + FileName;
System.IO.FileInfo fileInfo = new System.IO.FileInfo(File4Info);
return FileName + "?v=" + fileInfo.LastWriteTime.GetHashCode().ToString();
}
So, the rendered .js-Link would look like this to the client:
<script type='text/javascript' src='/scripts/GamesCharts.js?v=1377815076'></script>
The link will change every time, when I upload a new version and I can be sure that the user immediately gets a new script or image when I change it.
Safari refuses to cache URLs with query parameters. So instead of a query parameter you can use something like a versioned path and use mod_rewrite to remove it.
Something like:
<script type='text/javascript' src='/scripts/1377815076/GamesCharts.js'></script>
And in Apache config file (config for other servers left as homework):
RewriteEngine On
RewriteRule ^/scripts/[0-9]+/(.+)$ /scripts/$1
What we do in our environment is we manually increase the counter in the calling script :
<script type='text/javascript' src='/scripts/GamesCharts.js?v=1'></script>
Whenever there is any update to the js file , we just increment the counter :
<script type='text/javascript' src='/scripts/GamesCharts.js?v=2'></script>
Your method works automatically but it needs to retrieve the LastWriteTime every time the script being called. If its a high traffic site, it will increase the CPU processing.
Just a thought: You could probably just render the JS as an ASPX; I've done this for forceful reload of CSS before with a JSP. Not proud of that solution, but it's worked before.
<script type='text/javascript' src='/mycode/GamesCharts.js.aspx'></script>
Then just render the JS statically in the ASPX file.

Conditional "Get Script File" in Javascript without using a library function

I work at a company that has many clients that have their own website that "plugs in" to our system. In other words they have their own website and they have a link that, when the user clicks it, transitions them over to our site.
There is a feature that I want to track by giving the client a small block of code to put on their homepage. Whenever the homepage is loaded with a certain query string variable I want the block of code to request a file on my server. Then on the server I'll record the tracking info based on the query string.
All this would be really easy if I can guarantee that the client would be using jQuery or some similar library, but there are a lot of clients and I can't really rely on them all using jQuery. At the same time I'd like to limit the size of the block of javascript code that they paste in.
I think the best solution would be to have something like:
if(querystring.substring("Tracking=") > 0)
{
include("blah.aspx?TrackingQS=" + querystring);
}
but I can't find a include function in built-in javascript without calling some library like jQuery.
Any thoughts?? I could do straight up AJAX but I want to limit the number of lines of code for several reasons that I won't bore you with here.
Add a script block programmatically
function include(path) {
var s = document.createElement('script');
s.type = 'text/javascript'
s.src = path;
document.getElementsByTagName('head')[0].appendChild(s);
}
As an enhancement, you can keep track of all the paths that have been added so that you dont accidentally load the same script twice.
Typically one does this by inserting a 1x1 img tag whose src is your blah.aspx.
Write a script that would use the built-in Ajax methods and give your clients this:
<script type="text/javascript" src="yourScript.js"></script>
You could give them something like this:
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1.4.1");
ourJQ = jQuery.noconflict();
//jQuery code
</script>
That will load jQuery from Google which will save them bandwidth and let you use jQuery.

Categories

Resources