In my application I'm using the overlay effect of jquerytools.
I'm opening an external page inside the overlay as explained in this demo.
In my external page I'm using some javascripts to do validation and so on. My application is using the Struts2 framework.
The problem I have is concerning the performances of the overlay effect. In the web server (apache) I'm using the mod_expires to let the browser cache the resources.
The problem is that while the file jquery-1.7.2.min.js gets cached in all the application when opening the overlay it won't be cached because it's name changes with an dynamically generated numerical string.
For example the file name changes in this way:
Main application: jquery-1.7.2.min.js
Inside the overlay: jquery-1.7.2.min.js?_=1386932790620
This numerical string changes everytime, preventing the browser (Chrome) to cache the resource. So every time a user opens the overlay the jquery-1.7.2.min.js gets downloaded slowing down the performances.
You can see this problem in the attached pictures:
Caching:
Non caching:
I guess that the overlay effect of jquerytools is using AJAX to load an external page, so the question is:
is there a way to remove that numeric string from being attached to the resource name?
There'are other solutions to prevent the overlay effect to download everytime the javascript resource?
You can try adding this to your code -
$.ajaxSetup({ cache: true });
This will ensure that no cache-busting strategy is used by jQuery.
Related
I have developed some websites using custom PHP and YII2. Whenever I have modified any JS or CSS file, it doesn't give any effect on my web pages. To apply the newest version of my code, I have to press ctrl+f5 to refresh it.
I have already gone through the several answers, but no effect.
I have checked the below links:
Force browser to refresh css, javascript, etc
How can I force clients to refresh JavaScript files?
Please help me to solve this.
You can achieve this by setting AssetManager::$appendTimestamp to true. In your web config:
'assetManager' => [
'appendTimestamp' => true,
]
Whether to append a timestamp to the URL of every published asset. When this is true, the URL of a published asset may look like /path/to/asset?v=timestamp, where timestamp is the last modification time of the published asset file. You normally would want to set this property to true when you have enabled HTTP caching for assets, because it allows you to bust caching when the assets are updated.
I am trying to achieve the below in ASP.NET MVC3 web application which uses razor.
1) In my Index.cshtml file, I have the below reference.
<script src="/MySite/Scripts/Main.js"></script>
2) I load my home page for the first time and a http request is made to fetch this file which returns 200.
3) Then, I made some changes to the Main.js and saved it.
4) Now I just reload the home page (please note that I am not refreshing the page) by going to the address bar and typing the home page url and pressing enter. At this point, I want the browser to fetch the updated Main.js file by making a http request again.
How can I achieve this? I don't want to use System.Web.Optimization bundling way. I knew that we can achieve this by changing the URL (appending version or some random number) everytime the file changes.
But the challenge here is the URL is hardcoded in my Index.cshtml file. Everytime when there is a change in Main.js file, how can I change that hardcoded URL in the Index.cshtml file?
Thanks,
Sathya.
What I was trying to achieve is to invalidate browser cache as soon as my application javascript file (which already got cached in the browser) gets modified at the physical location. I understood that this is simply not achievable as no browsers are providing that support currently. To get around this below are the only two ways:
1)Use MVC bundling
2)Everytime the file is modified, modify the URL by just appending the version or any random number to the URL through querystring. This method is explained in the following URL - force browsers to get latest js and css files in asp.net application
But the disadvantage with the 2nd method is, if there are any external applications referring to your application's javascript file, the browser cache will still not be invalidated without refreshing the external application in browser.
Just add a timestamp as a querystring parameter:
var timestamp = System.DateTime.Now.ToString("yyyyMMddHHmmssfff");
<script src="/MySite/Scripts/Main.js?TimeStamp=#timestamp"></script>
Note: Only update TimeStamp parameter value, when the file is updated/modified.
It's not possible without either using bundling (which internally handles version) or manually appending version. You can create a single file bundle as well if you want.
I am trying to use webview element in a universal app using javascript. My aim is to browse some websites adding some content of my own to its html document.
First, I set src attribute of webview to www.example.com and it browses the site. This was just to make sure the webview is capable of browsing the site.
Next, I tried getting the html and load it to webview using navigateToString method like this:
$.get(url, function (data) {
webView.navigateToString(data);
});
This causes the page to be loaded out of shape (aperarently some .js or .css files are not loaded or blocked from running), or it isn't even loaded.
I wonder what is the difference loading the page by its url and loading its html by manually like this. And is there a workaround I can overcome this problem.
Note: I'm new at both js and html.
A web page is usually not made of a single HTML file. In order to make it work, you will have to retrieve not only the HTML but also the javascript and the css files.
This can be a tedious work.
If you are trying to open something from the web, the easiest way is to perform a regular navigate() which will take the URI as parameter and perform a "full" browse (as the browser will do). The retrieval/loading of the CSS/JS will be done for you.
If you want to open a local page (local to your application), navigateToString() is a good path but you will have to host locally all the page dependencies (css/js fiels) or embed all the style and code in the HTML page itself.
Recently I tried to make sure that some of the images on my website are not cached by the browser.
I came across several questions like
Preventing Images being cached in the browser
How to prevent browser image caching?
How to prevent browsers from caching an image?
But since a short time the solution that they provided stoped working for me.
I have serveral images on my website but there is only one that I do not want to cache.
I used <img src="/img/img.jpg?1275332" />
Where the number was the current time stamp.
Is there any other way to prevent the browser from caching?
And does any one has an idea why this isn't working (anymore)?
Edit:
The image that I do not want to cache is not a static image.
When a user changes one of his images, only the changed image need to be updated. Thats why I tried to add a timestamp after the changed image.
The application is also a SPA so there wont be any page refresh.
You can use a application-cache manifest file. For that you need to add it to your html page in following manner :
<!doctype html>
<html manifest="myapp.appcache">
<head>...</head>
<body>...</body>
In your application-cache manifest specify the image in the NETWORK section. The NETWORK section is used to specify urls that must never be cached and should always be retrieved from the network.
CACHE MANIFEST
CACHE:
#html page, scripts etc you want to cache
FALLBACK:
#fallback resource if cached version is not available.
NETWORK:
#image path you don't want to cache
More control of this whole process can be achieved by attaching event handlers to window.applicationCache events like onupdate, oncached, ondownloading, onprogress, onobsolete
I hope this would solve your issue.
I have an application that uses cache.manifest to cache HTML content locally. When I retrieve this content using Jquery .load(), the content is NOT retrieved from the application cache and the call fails if the device is offline.
The files specified in cache.manifest are being loaded, I can see that in charles when I load in the site.
When offline I can enter the cached file URL in the browser and it shows it just fine, just not using .load(), so I am sure that the cache.manifest is loading everything correctly.
My question is, how can I load the HTML pages using jquery or plain JS, and make sure it uses the application cache if the device is offline?
CACHE MANIFEST
/m2/docs/e5a133db912860d8ec124cce9caa78d1/Q00X03.htm
/m2/docs/e5a133db912860d8ec124cce9caa78d1/M00X03.htm
/m2/docs/e5a133db912860d8ec124cce9caa78d1/Q97X01.htm
/m2/docs/e5a133db912860d8ec124cce9caa78d1/M97X01.htm
/m2/style.css
/m2/docs/e5a133db912860d8ec124cce9caa78d1/index.htm
/m2/docs/e5a133db912860d8ec124cce9caa78d1/doc.json
Then calling like this:
$("#docu").load("/m2/docs/e5a133db912860d8ec124cce9caa78d1/M97X01.htm");
Any help is appreciated.
I was able to get it working doing this (rather messy):
In my application I made a hidden iFrame:
<div style="display:none;">
<iframe id="dummyContent"></iframe>
</div>
Setup a listener for this iFrame to read out the BODY and insert it into my display element anytime it loads:
$("#dummyContent").load(function(){
var $con = $("#dummyContent").contents().find("body");
$("#docu").html($con); // docu is my display div
});
Set a click handler for the content retrieval button to set the src of the iFrame to my content:
THIS is loaded from Application Cache as expected.
$("#questionButton").click(function(ev) {
$("#dummyContent").attr("src","/m2/docs/e5a133db912860d8ec124cce9caa78d1/M97X01.htm");
});
I would appreciate it if anyone had a different method, perhaps not using an iFrame. This solution is right up there with using tables to align page content...