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...
Related
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.
I have a rails app with a notification drop down (similar to facebook or most other social sites) which uses javascript to post the notifications. On most page loads this feature doesn't load until I refresh the page. Any idea why this might be?
I'm not hugely familiar with js to know off-hand so it may be a simple fix.
You have Turbolinks enabled I guess. To resolve this problem you have to load your javascript field not only on document ready but also on page fetch.
In your .js files add loader for page:load
# will load .js content on document ready
$(function(){
yourJavascriptFileNameInitialize();
});
# will load content when your route changes using Turbolinks
$(document).on("page:load",function(){
yourJavascriptFileNameInitialize();
});
function yourJavascriptFileNameInitialize(){
# put here your code
}
Turbolinks is by default enabled, it uses ajax to fetch new content for the page you load, to reduce content it loads from server (makes your app faster). When this happens you need to again load your .js files because they are loaded but no document ready has been recorded. Thus you have to load also when page:load events happens.
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.
I trying to open a txt document in a enyo application for mobile and I didn't found anything, so can I open that file on the mobile browser or inside the application using javascript or other way?
Thanks!
You should be able to use Ajax to request the file and the place the response into the content of an instance of a Control. i.e.:
{name: "textfile"}
...
this.$.textfile.setContent(inResponse.data);
If you wanted to have HTML in it then you'll need to set the allowHtml property to true.
Check out https://github.com/enyojs/enyo/wiki/Consuming-Web-Services for more info on Ajax. And, yes, you use Ajax to request local (on device) files, too.
A bit of an unusual setup:
I'm writing in an html page that in turn loads another html page, parses it, analyzes it, and displays information about it.
The parsing is fairly easy using jQuery. I just need to figure out how to load the external page - that is, when page A is displayed in the browser, it needs to load page B, analyze page B, and display information about page B.
Both pages are local (not served via a web server).
Both load and ajax from jQuery run into the cross-origin permission issue:
XMLHttpRequest cannot load file://localhost/Users/me/test.html. Origin null is not allowed by Access-Control-Allow-Origin.
I can load the page with a script tag, but then I don't know how to access it so I can parse it:
<script type="text/html" src="test.html"></script>
Any ideas?
Have you thought about using JavaScript/jQuery to create an iframe? (You can use CSS to make the iframe hidden to the end user.) Then you can listen for the iframe's onload event, and parse it through the iframe's contentDocument element (I believe).