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.
Related
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 need to process html files that have corrupted script files that are added to it via tag.
Im planning to remove all script tag present in the webpage via phantomjs.
But on opening the webpage via webpage.open(), phantomjs parse error is thrown since it cannot parse the JS content within the script tag.
Here is an example:
<html>
<head>
<script>
corrupted JS
if(dadadd
;
</script>
<body>
some content
</body>
</html>
Can someone help me on suggesting the right way to clean this webpage using phantomjs ?
It's not (easily) possible. You could download (not through opening the page, but rather making an Ajax request in page.evaluate()) the static html, then change according to your needs, then assign it to page.content.
This still might not work, because as soon as you assign it to page.content, you're saying that PhantomJS should interpret this source as a page from an unknown domain (about:blank). Since the page source contains all kinds of links/scripts/stylesheets without a domain name, you'll have to change those too in order for the page to successfully load all kinds of resources.
It might be easier to just have a proxy between PhantomJS and the internet with a custom rule to adjust the page source to your needs.
I am working on Phonegap application and basically I want to embedd an external webpage inside my html page, yes for me various options are available. I tried with <iframe> method, but I am getting below error:
Refused to display 'https://xyz.com' in a frame because it set 'X-Frame-Options' to 'DENY'
Since I don't have control over the server side, loading an webpage inside an iframe is ruled out.
I also tried with ajax method:
$.ajax({
crossOrigin: true,
url: 'https://xyz.com',
success: function(data) {
$( '#bodyFrame' ).html(data);
}
});
It works fine, but the biggest problem is it doesn't render CSS/Javascript, it only displays plain html.
I tried with <link rel="import" href="https://xyz.com"> now I am getting cross-domain issue.
My question is, is there a way to display an external website inside an HTML page with correct css and js rendering (I don't have control on this part on server side) without IFrame/embed/object tags? I searched lot of questions on SO, most of them tell to use ajax but this have css issue. Can anyone help me in this?
Well, I think that you have at least few options.
Do like I just did for my project where I need to be able to show whole pages offline: load the HTML for that page, iterate through it (with regular expressions) to find out all resource links (JS, CSS, images) and download those (store to file system). Once downloaded, change the URL to URI of your local file on initial HTML. After that show that HTML for user.
Few special things to mention about this way in no particular order:
Implement cache of your own to speed this up.
Use blacklisting for URLs that you don't want to download.
caolan's Async.js library is just great for this.
For CSS resources you need still to download images within it and change the links to those too.
Images can be converted just to Base64 representation inside HTML for less callbacks to handle.
This way you can use the iframes.
This is pretty much related to first one but go through the HTML on your success callback and get all the links for JS and CSS and use technique described here to reload those for you.
Here is summary of that method:
var fileref = document.createElement('script');
fileref.setAttribute("type","text/javascript");
fileref.setAttribute("src", filename);
document.getElementsByTagName("head")[0].appendChild(fileref);
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 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...