For days...I try to find a solution to load a remote url with android webview. But with local css/js/images
But I couldn't.
I think it is impossible because of security issue... right?
I think mybe I could use a trick.
in remote server I just publish my webpage without <head> and <body>:
//<html>
// <head></head>
// <body>
... body code111 ... // there is only this part in remote url page
//</body>
//</html>
and then I create a index.html in android_asset folder:
<html>
<head>
<link css ...
<link java ...
</head>
<body>
... now put code111 here!
</body>
</html>
So now I can use local resource (in head)
I am new in android and java...I couldn't test it...but do you think is it possible?
well, let's start.
The easyer part is part B.
here you can find the answer:
Rendering HTML in a WebView with custom CSS
basically, what you have to do is have the html website on a String variable, ex:
String website = "<html><head>" + "<link rel=\"stylesheet\" type=\"text/css\" href=\"style.css\" />" + <"javascript call to file that i don't remember right now"/>" + "</head>"
and then append to that website, your remote HTML code. you could do it via, for example, any of the Async HTTP libraries ( LoopJ's one is quite good loopj's http library ) .
and then append the rest of your website.
website += retrieved_website
website += "</body></html>"
finally load the website using the .loadDataWithBaseURL() method as explained in the accepted respose.
althought i have to say this is quite a complicated way of loading a website, this would be my approach.
Related
I don't know much about html but there is a small issue and I am unable to find its solution.
This is the iframe that I want to display on static html page:
<!DOCTYPE html>
<html>
<body>
<iframe style="width:120px;height:240px; padding-right:50px; padding-bottom:50px" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" src="//ws-na.amazon-adsystem.com/widgets/q?ServiceVersion=20070822&OneJS=1&Operation=GetAdHtml&MarketPlace=US&source=ac&ref=qf_sp_asin_til&ad_type=product_link&tracking_id=qstore51214-20&marketplace=amazon®ion=US&placement=0553496670&asins=0553496670&linkId=4f9912a00b832e2f8bcb5a9b187511cf&show_border=true&link_opens_in_new_window=true&price_color=333333&title_color=0066c0&bg_color=ffffff">
</iframe>
</body>
</html>
When I add this to html and try to open html page, I get the error:
"File not found".
But when I add this iframe to any live html editor it work perfectly and show the link.
Actually I want to display this iframe in Webview in my Andriod application.
My android code is:
mWebViewTopSeller = (WebView) findViewById(R.id.webViewTopSeller);
mWebViewTopSeller.setWebChromeClient(new WebChromeClient());
mWebViewTopSeller.setWebViewClient(new WebViewClient());
mWebViewTopSeller.getSettings().setJavaScriptEnabled(true);
mWebViewTopSeller.loadUrl("file:///android_asset/TopSeller.html");
Please help. Thanks!
When embedding this iframe, it returns an error:
SEC7111: HTTPS security is compromised by https://ws-na...
So it may have something to do with the browser's mixed-content/same-origin policy.
Possible src values are an absolute URL that points to another web site (like src="http://www.example.com/default.htm")
or an relative URL that points to a file within a web site (like src="default.htm" I think your src path is wrong.
I am trying to generate a PDF from a HTML string using PdfDocument:
https://developer.android.com/reference/android/graphics/pdf/PdfDocument.html
String example:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Example</title>
</head>
<body>
<h1>Hello</h1>
</body>
</html>
I know how to generate a PDF files from a WebView, but not from a string HTML. How i do this?
I don't found in stackoverflow.com or Google how do this with the native class PDFDOCUMENT
This class does what you are looking for.
But to compile, it must be in package ".../java/android/print/"
Here is a simple code example :
PdfConverter converter = PdfConverter.getInstance();
File file = new File(Environment.getExternalStorageDirectory().toString(), "file.pdf");
String htmlString = "<html><body><p>WHITE (default)</p></body></html>";
converter.convert(getContext(), htmlString, file);
// By now the pdf has been printed in the file.
react-native-html-to-pdf works great and has zero iText dependencies.
https://github.com/christopherdro/react-native-html-to-pdf
Renders SVG <svg> ( Very easy to reuse svg code from Google Material Icons in an HTML document )
Renders <img /> using base64 or local files ( make sure you close the img tag )
CSS style works great.
You can Control page breaks from your HTML.
<p style="page-break-before: always;" />
I forked it and added page size and orientation options to Android. I plan to do the same to iOS but it currently has width and height options that can accomplish this same thing.
This is a cross-platform Android and iOS React Native library.
Look in the Android directory if you just need the Java.
I know that for security reasons HTML standard doesn't allow anymore the loading of a local resource as image in a document.
Anyway I found that I have to copy the html files in the android-asset project folder if I want to load local pages in a WebView.
What if I want to use an hybrid approach?
I would to get a HTML document from an uri, replace the value of the src attribute of a img HTML tag with a local path and then load the code in a WebView.
Having a html document like this:
<hmtl>
<head>
</head>
<body>
<img src="http://URL-SITE/img/x.jpg">
</body>
</hmtl>
How can i replace http://URL-SITE/img with the path of a local image resource
before the page is loaded by a WebView?
I already tried putting the local image in the folder android-asset and changing the src value in file:///android_asset/img/x.jpg but it didn't work.
Ok guys, thanks for the comments.
The problem was that I used the command loadData
String html ="<html> <head></head> "
+" <body> <img src=\"file:///android_asset/img/x.jpg\"> "
+"</body> </html>";
myWebView.loadData(html, "text/html; charset=UTF-8", null);
instead of
myWebView.loadDataWithBaseURL(null, html, "text/html", "UTF-8", null);
I am wondering how do I set the path for WebViews loadWithBaseURL correctly.
What I want to do is, to load html in a webview, that uses resources that are stored on the external storage.
For Example:
<html>
<head>
<style>body{ background-image:url(beach.jpg); }</style>
</head>
<body>
<img src="football.jpg" />
</body>
</html>
Where beach.jpg and ball.jpg are stored directly in the "root" directory of the phones external storage (/sdcard/beach.jpg and /sdcard/ball.jpg)
So I tried to load the content as follows:
String html = "<html> ... example from above ... </html>";
String base = Environment.getExternalStorageDirectory().getAbsolutePath().toString();
webView.loadDataWithBaseURL("file://" + base, html, "text/html", "utf-8", null);
However the path seems to be wrong, because I can't see the image in the webview.
Any suggestions?
Have you enabled file access on the webview?
webView.getSettings().setAllowFileAccess(true);
Additionally, if you are constructing the HTML yourself - you might consider using full paths for the images.
String html = "<html>... <img src=\"file://"+base+"/football.jpg\" />";
Have you give internet permission?
<uses-permission android:name="android.permission.INTERNET" />
These may also help..
Android webview loadDataWithBaseURL how load images from assets?
http://myexperiencewithandroid.blogspot.com/2011/09/android-loaddatawithbaseurl.html
Android v2.2-2.3.5: WebView : loadDataWithBaseURL : will only load page once
I want to be able to create an app that uses WebView to request a url
from an external web application which returns html and css that
references images that are assets within the actual application. The
idea is basically to speed up everything so that images never have to
be downloaded.
Here is a simplified example:
Server HTML:
<html>
<head>
<style>
#myImage { background-image: url("file:///android_asset/myImage.jpg"; width: 50px; height: 50px;}
</style>
</head>
<body>
<div id="myImage"></div>
</body>
</html>
So, is there any way to be able to do this? My main goal is to just have the application request all the HTML from a server, but be able to map the image urls to local resources within the application.
Thanks in advance,
Leon
Why not to load all HTML from application side? If you bother that this web page will have no access to network - use WebView.loadDataWithBaseUrl method.
For embed images into a web page you can use data:URI scheme: http://en.wikipedia.org/wiki/Data_URI_scheme
Also you can map your application images even if you are page is loaded remotely. You can use WebView.loadUrl("javascript:....") to "send" images data via JavaScript code (also using data:URI scheme).
EDIT.
Firstly, at HTML side your example with embedded images will look something like this:
<html>
<head>
<style>
#myImage { background-image: url('data:image/png;base64,iVBORw0KG.....'); width: 50px; height: 50px;}
</style>
</head>
<body>
<div id="myImage"></div>
</body>
</html>
When, if you want to store this page at the application side, you can store it somewhere (string resource, asset folder) and when get it.
String pageResource = // get it somehow
WebView myWebView;
myWebView.loadDataWithBaseUrl(
"http://my.site.com", // The base url
pageResource, // page content to load...
"text/html", // it's MIME type...
"UTF-8", // and encoding
"http://my.site.com/page.html");
Now the WebView has loaded your page. It is loaded from local resources but from WebView point of view it is like it is loaded from the network. It has access to network resources and JavaScript code working here as well (this is the main difference between loadData and loadDataWithBaseUrl).