I have a web application where many jquery files needed after login page. Can i include it on the login page so that on the next page the browser don't make a request for the file.
Means the files are used from the browser cache. Is it possible?
Yes, you can (as #Juhana already mentioned).
You can also use a CDN like Google to deliver jQuery or other common libraries. If someone already visited another site including jQuery via Google CDN, it would be already cached by his browser when logging in to your site (if you are also using the CDN of Google).
Yes, it is possible. Since you don't want to slow down login page, it is better to dynamically insert it on the page after it is loaded and rendered so user can interact with it without any delays that loading of this file might impose. Also note that this doesn't give you 100% guarantee that file will be in cache, since browser might choose not to store it or delete it before user visits your next page according to its policies and space limitations.
You can request file anywhere with jquery $.getScript() method. If server caching is ON everything will be fine.
Related
I've implemented this script on my Squarespace website using the wexley template to make images in a gallery act as links (Wexley does not support clickthrough URLs natively).
It works fine, but if I add any thumbnails to the gallery it will not work until the browser cache is cleared.
I am wondering if there is a way to fix this? Perhaps through:
1) setting an expiry on the cache? I am not in developer mode so this would have to go into a header injection
2) Versioning? I tried hosting the javascript as a file elsewhere on my site. This worked (it pulled the script from another location) but still get the same issue, even when I upload a new script file and point to that after updating the page!
You can force the client to download the field again. To accomplish this you need to make the clients browser to think it doesnt have the script in cache. You can do this changing the file name.
Imagine you have this folder structure:
index.html
index.js
If in your index.html you reference the script like src="index.js" you may force clients to download just apendding a query string to the import: src="index.js?0"
Now clients browsers will check if this file is in cache, and since it isnt, they will fetch from the server.
Checking the resource loading on my page I realized that the script was not being cached so it was something else getting cached that was interfering.
Because I am not in dev mode, I implemented a fix that relies on appending the URL with the date of the update, and then setting up 301 redirects.
The URL and redirects (2 total) would have to be updated when any content is added.
If anyone sees issues with this (relating to SEO or some unknown), I would appreciate your feedback.
Is there a way to block a particular line of code from being executed within a third-party website, appearing within an iFrame?
I have an embedded widget which is loading JQuery within the iFrame. I don't need the extra network request, because my site is already loading JQuery.
If I can block only one line of code (in this case, line 77) then I can prevent JQuery from being loaded again.
I imagine this action would take place prior to the iFrame being rendered.
The same-origin policy prevents you from touching any part of an iframe for a third-party website, so there's nothing you can directly do to prevent that request from being sent out. Even if you could, the iframe and your website have no shared state, so the other website will most likely break because it has no way to access your instance of jQuery. Think of what would happen if you loaded the third-party website in a new tab but blocked the request.
There are, however, a few things you can do to ensure the browser uses a cached copy of the library, which doesn't actually send a request anywhere:
If the external library is being loaded from a CDN, there's a good chance some other website has requested that same URL, so that user's browser has a cached copy of it.
Since you yourself use jQuery, you could use the other website's same version of jQuery. That way, a user's browser will have a cached copy of the file already from the CDN and no second request will be made.
Otherwise, if the website is using an old version of jQuery that you cannot yourself use or if it is being self-hosted without a CDN, there's nothing else you can do.
Is there anyway to check on a client if jQuery was loaded before from a CDN? I mean to have code like this:
if (jQuery.isLoadedFromCDN)
//DoNothing
else
//load from internal resource
NOTE that I don't want to check that jQuery is loaded, but specifically if it was loaded from a CDN.
The context is that I have an internal LAN web app that uses jQuery, loading jQuery from the LAN is definitely faster but if it already was downloaded before from a CDN (which is probably the case) then I just want to use that otherwise I want to get it from our internal resource not the cdn. The bandwidth saving is definitely not huge, but I am more curious to know if that's technically possible.
I'm guessing you're checking to see if jQuery was loaded from the Google Libraries API?
Your browser will cache jQuery whether it's from the CDN or from your LAN. If it's already in the cache from a previous retrieval from the CDN, it'll load faster than from your LAN. If it's not already in your cache from either a previous visit to your site, or another site using the same CDN, it'll only need to load once: subsequent visits will load from the cache.
Splitting the URL for jQuery between the CDN and your LAN will just cause two copies to get cached. Let the browser cache do what it was meant to do. :)
This should do it:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.js"></script>
<script>!window.jQuery && document.write(unescape('%3Cscript src="js/libs/jquery-1.4.4.js"%3E%3C/script%3E'))</script>
You need to adapt the path for the fallback, which should be located at your domain.
to my knowledge, that's not really possible.
2 things jump to mind however that can help you:
Use Etags: Identify your resources on the webserver side. This way, your browser does that work for you: identify if a resource is already loaded, regardless from the domain it was loaded from
If you really want to know which domain jQuery was loaded from, you can do dummy AJAX requests. You can only do AJAX requests from the same domain your library was loaded from (except ofcourse when doing a JSONP request). So if your jQuery was loaded from your LAN resource, you will get trplies to AJAX requests to your LAN webserver, and that rules out the CDN.
Hope it helps,
Bart
I want to use the values of one page in another page using cache. Can any one suggest me how to use cache using jQuery?
After searching on several sites, I found this link : http://markdaggett.com/blog/2012/03/28/client-side-request-caching-with-javascript/. It uses a $.Cache.add(key,value); method.
When I used this in my aspx page it is throwing an error. Do I need to add any files to achieve cache?
If you want to store a value in one web page that you can retrieve in another page (on the same domain), you can either store it in a cookie or in local storage.
Browsers cache whole web resources (pages, images, scripts, etc...) not individual pieces of data.
+1 for using the local-storage.
here is a nice little plugin for using the localStorage with jQuery (including docs): http://upstatement.com/blog/2012/01/jquery-local-storage-done-right-and-easy/
this plugin uses cookies as a fallback for browsers which do not support the localStorage-feature
I version all of my client side JS files like "/js/myfile.js?v=3903948" so that my clients don't need to clear their browser cache to ensure they get the updated files. But every time I push an update, without fail, at least one person runs into a problem where they are running the old version and get some kind of error. I used to think that this was just them having already been on the page during the release and just needing to reload the browser, but this happened to me today when I was definitely not previously on the page. I browsed to the live site and was running the old code. I needed to do a browser refresh on that page to get the new file.
What can cause this?
PS I was using Chrome on Win7, but I have seen clients report this before on all different browsers.
If your main web page can also be cached, then the old version of that page can be requesting the old version of the JS file. JS file versioning works best if the page that actually refers to the JS file cannot be cached or has very short caching time.
I agree with jfriend00 about the webpage itself being cashed and thus requesting the old javascript version.
To prevent this, you can have the javascript file loaded by an ajax (Post) request, either requesting the server what is the accurate(latest) version number to download, or requesting the javascript itself and inserting it, e.g. in the head of the page.
Edit: see for example here
I make a quick AJAX request to the server for the version it expects them to have, then force them to refresh the page if the client's script is old.
Seems that proxy or some load balancer is serving old content instead of new. Also check IIS/webserver settings how are these files cached/expired.
You can check what is going on on the wire with tools like Fiddler.