For 2 days I've been looking an answer, but I can't find a good solution to my problem.
I'm developing a web application where I can only use standard front-end files (HTML, CSS, JavaScript (I use jQuery)). There's no back-end script merged with the HTML.
What I'm trying to achieve is to add an <script> tag to my HTML, but with a timestamp added as a variable, such as: <script type="text/javascript" src="js/javascript.js?c=1421656264439"></script>.
With PHP it would be simple to achieve, because you can just add the timestamp along with the HTML. But since I must work with front-end code only, what would be the best way to add a script or link tag with a timestamp, so the script doesn't get loaded from the cache?
Since the client uses Internet Explorer 10, I will need an answer that will work with that...
Could anyone help me out?
While creating an element, setting the attributes and appending it to the document kind of worked, the beforeSend headers weren't set on the AJAX calls in the javascript.js for some reason. This was also the issue by using $.getScripts('js/javascript.js');
I suddenly realised that I could try a simple document.write() within a script tag. Turns out that it works like a charm.
My fix:
<script type="text/javascript">
var _c = new Date().getTime();
document.write('<script type="text/javascript" src="js/javascrtipt.js?c='+_c+'"><\/script>');
</script>
</body>
(I can't believe I couldn't come up with this solution earlier)
Since you are working with jQuery I recommend you to do it this way:
$.getScript( "js/javascript.js" );
From jQuery docs:
By default, $.getScript() sets the cache setting to false. This appends a timestamped query parameter to the request URL to ensure that the browser downloads the script each time it is requested.
Dynamically load the javascript/css. Also while loading add the random version.
e.g. http://www.javascriptkit.com/javatutors/loadjavascriptcss.shtml
Anyway, I believe you already know what you are doing is not the best practice. In case of more specific requirement HTTP header can be set to no-cache for the JS/css files. This information can be set in the HTTP server being used without need of a programming language.
How to control web page caching, across all browsers?
Please take a look at jQuery getScript().
I think it could solve your problem:
By default, $.getScript() sets the cache setting to false. This appends a timestamped query parameter to the request URL to ensure that the browser downloads the script each time it is requested.
Related
I know there is a lot about this, but I can't find a solution that fits my situation. I am following behind someone else's asp.net code. We have a large amount of html and xml files generated by our site that a user can see. In one place, the link dynamically generated to load one of these pages is actually in a miniature form, making the browser think data is being submitted and looking for something 'new.' But the other is a button with the link generated in the vb code behind using a javascript function to open the page in a new window. I have tried simulating a form submit with "?submit=....." at the end but it didn't work.
tl;dr What javascript function can open a page and tell the browser to get the newest version, ignoring cache?
In JavaScript, I think the only way to prevent caching is to modify the url. One trick is to use the current date as timestamp:
url = url + "?_ts="+new Date().getTime();
(of course if your url already includes a querystring then replace the ? with an &)
There is no JavaScript to do what you need. If you need a fresh version, the easiest way is to add a timestamp to the URL's query string.
<script type="text/javascript" src="/js/file?cacheBuster=<?= DateTime.Now ?>" > </script>
For better control, you can use a build version as your cacheBuster param so you don't have to request new files every time.
I read (somewhere else on this site) you can't reload (or inject javascript) onto a page that is already rendered.
Is there any other way of doing this. For instance an iFrame?
I have a recent comment widget.js and I need to constantly get it to reload without reloading the whole page.
Any ideas?
edit: The site has recent comments on it and they are displayed via a recentcomment.js
Once the page is loaded it doesn't update itself unless you reload the page. I want it to update itself, a way to do this is to just reload the js file on the page, correct?
Why do you need to do this? It seems to me that there's probably a more appropriate solution to your problem.
But to answer it:
var elm = document.createElement("script");
elm.src = "Widget.js";
document.getElementsByTagName("head")[0].appendChild(elm);
Hope I didn't write any mistakes...
Rather than reloading the file, you can have all the implementation of the file contained in a function and then call the function every minute using the setTimeout() function.
Alternatively, if you want to reload it because the content of the file might have changed, it would probably be better to move that part of the code out to some external file and then use a function (running every minute with setTimeout()) to load the new content you need.
You can make cross-domain AJAX requests using certain methods, so you could make an AJAX request for the script file and parse it yourself. Parsing it yourself probably isn't an optimal solution, but it looks like you're dealing with a brain-dead service provider anyways.
Look at this guy's jQuery mod for an example:
http://james.padolsey.com/javascript/cross-domain-requests-with-jquery/
Once you get the data from the 3rd party, you could probably use some combination of regex and JSON parser to extract the comments.
For example, having:
<script type="text/javascript"
src="http://somedomain.com/js/somejs.js?14">
</script>
So what does "?14" means here?
Its a url param like any other parameter passed in a url. Sometimes JS scripts are created on the fly using server side technologies other times it is simply a version number to help with browser caching issues.
They are there to fool browsers into thinking that it is a new file.
This is a trick to avoid browser-cached copy when you update the JS file.
It means a variable is being passed to the script via GET, though standard JavaScript files don't support any means of collecting the variable.
You could, however, write a server script in PHP or ASP.NET that sets the content type as application/x-javascript.
Like this in php:
// file: external.php
<?php header("content-type: application/x-javascript"); ?>
// regular javascript here that uses $_GET['variable'];
Then you could put this in your HTML script tag:
<script type="text/javascript" src="external.php?variable=14"></script>
The javascript script is probably generated by a server side script (PHP, CGI, etc.) , which takes 14 as a parameter.
This is a query parameter as the browser will make an http get request to the somedomain.com for the javascript source.
If you load the page with a header browser like fiddler, you will see exactly what's going on.
IMHO, a JavaScript source like this will request "dynamic" content from server, thus the server will not try to use cached version of JavaScript file. Whether or not the parameter really does matter is up to the server.
Very simple Ajax request taking employee id and returning the user info as HTML dumb.
Request ajax("employee/info?emp_id=3543")
Response id = 3543name = some name
This is just another simple JS trick to populate the UI. However i do not understand how something like below is equally able to execute correctly and dump the HTML code.
<script type="text/javascript" src="employee/info?emp_id=3543" />
When page encounters following code it executes like the ajax request is executed and dumps code into page. Only difference is its no more asynchronous as in case of Ajax.
Questions :
Is this correct approach ? its +ves and -ves.
Which are the correct scenarious to user it?
Is this also means that any HTML tag taking "src" tag can be used like this?
I have used this kind of javascript loading for cross domain scripting. Where it is very useful. Here is an example to show what I mean.
[Keep in mind, that JS does not allow cross domain calls from javascript; due to inbuilt security restrictions]
On domain www.xyz.com there lies a service that give me a list of users which can be accessed from http://xyz.com/users/list?age=20
It returns a json, with a wrapping method like following
JSON:
{username:"user1", age:21}
If I request this json wrapped in a method like as follows:
callMyMethod({username:"user1", age:21})
Then this is a wrapped json which if loads on my page; will try to invoke a method called callMyMethod. This would be allowed in a <script src="source"> kind of declaration but would not be allowed otherwise.
So what I can do is as follows
<script language="javascript" src="http://xyz.com/users/list?age=20"></script>
<script language="javascript">
function callMyMethod(data)
{
//so something with the passed json as data variable.
}
</script>
This would allow me to stuff with JSON coming from other domain, which I wouldn't have been able to do otherwise. So; you see how I could achieve a cross domain scripting which would have been a tough nut to crack otherwise.
This is just one of the uses.
Other reasons why someone would do that is:
To version their JS files with
releases.
To uncache the js files so that they are loaded on client as soon as some changes happen to js and params being passed to URL will try to fetch the latest JS. This would enable new changes getting reflected on client immediatly.
When you want to generate conditional JS.
The usage you have specified in example wouldn't probably serve much purpose; would probably just delay the loading of page if processing by server takes time and instead a async ajax call would be much preferred.
Is this correct approach ? its +ves
and -ves.
Depends whether you want to use asynchronous (ajax) way or not. Nothing like +ve or -ve.
The later method takes more time though.
Which are the correct scenarious to
user it?
Ajax way is the correct method there in that sense.
Is this also means that any HTML tag
taking "src" tag can be used like
this?
src is used to specify the source path. That is what it is meant to do.
So I need to pull some JavaScript out of a remote page that has (worthless) HTML combined with (useful) JavaScript. The page, call it, http://remote.com/data.html, looks something like this (crazy I know):
<html>
<body>
<img src="/images/a.gif" />
<div>blah blah blah</div><br/><br/>
var data = { date: "2009-03-15", data: "Some Data Here" };
</body>
</html>
so, I need to load this data variable in my local page and use it.
I'd prefer to do so with completely client-side code. I figured, if I could get the HTML of this page into a local JavaScript variable, I could parse out the JavaScript code, run eval on it and be good to use the data. So I thought load the remote page in an iframe, but I can't seem to find the iframe in the DOM. Why not?:
<script>
alert(window.parent.frames.length);
alert(document.getElementById('my_frame'));
</script>
<iframe name="my_frame" id='my_frame' style='height:1px; width:1px;' frameBorder=0 src='http://remote.com/data.html'></iframe>
The first alert shows 0, the second null, which makes no sense. How can I get around this problem?
Have you tried switching the order - i.e. iframe first, script next? The script runs before the iframe is inserted into the DOM.
Also, this worked for me in a similar situation: give the iframe an onload handler:
<iframe src="http://example.com/blah" onload="do_some_stuff_with_the_iframe()"></iframe>
Last but not least, pay attention to the cross-site scripting issues - the iframe may be loaded, but your JS may not be allowed to access it.
One option is to use XMLHttpRequest to retrieve the page, although it is apparently only currently being implemented for cross-site requests.
I understand that you might want to make a tool that used the client's internet connection to retrieve the html page (for security or legal reasons), so it is a legitimate hope.
If you do end up needing to do it server-side, then perhaps a simple php page that takes a url as a query and returns a json chunk containing the script in a string. That way if you do find you need to filter out certain websites, you need only do this in one place.
The inevitable problem is that some of the users will be hostile, and they then have a license to abuse what is effectively a javascript proxy. As a result, the safest option may be to do all the processing on the server, and not allow certain javascript function calls (eval, http requests, etc).