Many of the answers I've been seeing here are 6+ years old so I was wondering if I could get a more recent answer as they haven't been working for me. I have an html file file.html which contains a
<LINK href="stylesheet.css" type="text/css" rel="stylesheet">
for the CSS and the following for the javascript:
<script src="myscript.js"></script>
file.html, stylesheet.css and myscript.js are all stored in app/assets/Content/
So I am trying to run it with:
WebView webView = (WebView) findViewById(R.id.event_webview);
WebSettings webSettings = webView.getSettings();
webSettings.setJavaScriptEnabled(true);
webView.loadUrl("file:///assets/Content/file.html");
However, the WebView is showing the error:
Webpage not available: The webpage at
file:///assets/Content/file.html could not be loaded because
net::ERR_FILE_NOT_FOUND
I have also considered using loadDataWithBaseURL but this requires the data field to contain all of the html which is too big of a file to hardcode.
Does anybody know how I could use html+css+javascript for a WebView?
Your URI for asset folder is incorrect. Change asset to android_asset. As follows:
webView.loadUrl("file:///android_asset/file.html");
Related
I'm having a problem with Android WebView for my websites. When I open my site on any browser, the CSS style sheet, JavaScript and Images load. But when I open for example through Instagram (which uses WebView), I just have the html, naked.
I precise that all my links are in relative (I have a tag which indicates from where to look for the files).
Here, my base is <base href="http://anthony-e-b.rf.gd/" target="_top">
and my CSS, my images, and my JS refer to this as:
<link rel="stylesheet" href="assets/main.css"> (for the CSS).
Same for my pictures : href="assets/pics/mon_image.jpg".
I do not understand, and although I search the Internet I do not see any solution ...
thank you in advance for your help
Try:
WebView myWebView = findViewById(R.id.webview);
WebSettings webSettings = myWebView.getSettings();
webSettings.setJavaScriptEnabled(true);
Hope it will help!
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 try to load in WebView a code HTML with CSS, in local. the file CSS is storage in sdcard0/Style/Template.css. Html code is:
<link rel="stylesheet" type="text/css" href="Style/Template.css" />
Java code is:
webView.loadData(source, "text/html", "UTF-8");
Not works.. i can't use Asset folder, there is any solution?
Have you tried using link href file ?
For my android app I want to load a html file to webview, this html file will be stored in "data/data/com.myapp/files/index.html". I am able to load it with the associated javascript files but when I want to load the image from "data/data/com.myapp/files/img/image.png" it doesn't work.
This is how i'm trying to do it:
webView.loadDataWithBaseURL(getFilesDir()+"/img/", html, "text/html","utf-8", ""); //html is my html string I get from index.html
I've also tried:
webView.loadUrl(getFilesDir()+"/img/"+index.html");
In my html file i have
<img id="image" src="/img/image.png"/>
I've verified and the file is loaded on the disk but i can't display it on webview, the display stays blank for image. I just can't make it work. So my question is: is it even possible? If yes can someone please tell me how?
I've searched and found that others had similar problems but none of the solutions is working.
EDIT: Putting my files in asset directorty is not an option for me, which i've already tested and it works.
I just tried the following code I found here: Load the image saved in sdcard in webview
String base = getFilesDir();
String imagePath = base + "/test.jpg";
String html = ("<html>
<head>
</head>
<body>
<img src=\""+ imagePath + "\">
</body>
</html>
");
mWebView.loadData(html, "text/html","utf-8");
But still no success, apparently it worked for the person who asked the question. I've also tested with the external storage but the result is same. All permissions are there in manifest.xml. So I really don't see what the problem is. Any suggestion or advice will be appreciated.
Consider putting static files in assets folder inside android project, and try loading file using:
mWebView.loadUrl("file:///android_asset/html/index.html");
And then, from HTML file refer to images, styles using relative path.
For example, in your case, you would have follwing directory structure:
PROJECT-ROOT
|-src/
|-assets/
|-html/index.html
|-img/image.png
|-css/style.css
After this, you can use normal html tags inside index.html as you would do to make any web page. Eg. <img id="image" src="img/image.png"/> or <link rel="stylesheet" type="text/css" href="css/style.css">
Don't forget to enable JavaScript using:
WebSettings webSettings = mWebView.getSettings();
webSettings.setJavaScriptEnabled(true);
Problem solved. It was actually coming from bad formatted data, once I checked and added correct files to phone memory it started working.
When you want to save image to internal storage, be sure not to use same code as downloading html file. That's the mistake I made. Instead, use
How to download and save an image in Android
to save your image, then the image should be fine
My app is using JSoup to download the HTML of a message board page (let's say in this case it is a page containing the posts of a given thread). I'd like to take this HTML, strip out unwanted items, and apply custom CSS to style it to be 'mobile' in a WebView.
Should I inject the styles into the HTML as I process it (since I will be processing it anyway) or is there a good way to add a CSS file to my app's assets and simply refer to it. I figure the latter would be ideal, but unsure how to go about it.
I see hints in WebView's loadDataWithBaseURL that you can refer to local assets, but not sure how to utilize it.
You could use WebView.loadDataWithBaseURL
htmlData = "<link rel=\"stylesheet\" type=\"text/css\" href=\"style.css\" />" + htmlData;
// lets assume we have /assets/style.css file
webView.loadDataWithBaseURL("file:///android_asset/", htmlData, "text/html", "UTF-8", null);
And only after that WebView will be able to find and use css-files from the assets directory.
ps And, yes, if you load your html-file form the assets folder, you don't need to specify a base url.
I assume that your style-sheet "style.css" is already located in the assets-folder
load the web-page with jsoup:
doc = Jsoup.connect("http://....").get();
remove links to external style-sheets:
// remove links to external style-sheets
doc.head().getElementsByTag("link").remove();
set link to local style-sheet:
// set link to local stylesheet
// <link rel="stylesheet" type="text/css" href="style.css" />
doc.head().appendElement("link").attr("rel", "stylesheet").attr("type", "text/css").attr("href", "style.css");
make string from jsoup-doc/web-page:
String htmldata = doc.outerHtml();
display web-page in webview:
WebView webview = new WebView(this);
setContentView(webview);
webview.loadDataWithBaseURL("file:///android_asset/.", htmlData, "text/html", "UTF-8", null);
here is the solution
Put your html and css in your /assets/ folder, then load the html file like so:
WebView wv = new WebView(this);
wv.loadUrl("file:///android_asset/yourHtml.html");
then in your html you can reference your css in the usual way
<link rel="stylesheet" type="text/css" href="main.css" />
It's as simple as is:
WebView webview = (WebView) findViewById(R.id.webview);
webview.loadUrl("file:///android_asset/some.html");
And your some.html needs to contain something like:
<link rel="stylesheet" type="text/css" href="style.css" />
If you have your CSS in the internal file storage you can use
//Get a reference to your webview
WebView web = (WebView)findViewById(R.id.webby);
// Prepare some html, it is formated with css loaded from the file style.css
String webContent = "<!DOCTYPE html><html><head><meta charset=\"UTF-8\"><link rel=\"stylesheet\" href=\"style.css\"></head>"
+ "<body><div class=\"running\">I am a text rendered with INDIGO</div></body></html>";
//get and format the path pointing to the internal storage
String internalFilePath = "file://" + getFilesDir().getAbsolutePath() + "/";
//load the html with the baseURL, all files relative to the baseURL will be found
web.loadDataWithBaseURL(internalFilePath, webContent, "text/html", "UTF-8", "");
Is it possible to have all the content rendered in-page, in a given div? You could then reset the css based on the id, and work on from there.
Say you give your div id="ocon"
In your css, have a definition like:
#ocon *{background:none;padding:0;etc,etc,}
and you can set values to clear all css from applying to the content.
After that, you can just use
#ocon ul{}
or whatever, further down the stylesheet, to apply new styles to the content.
You can Use Online Css link To set Style over existing content.
For That you have to load data in webview and enable JavaScript Support.
See Below Code:
WebSettings webSettings=web_desc.getSettings();
webSettings.setJavaScriptEnabled(true);
webSettings.setDefaultTextEncodingName("utf-8");
webSettings.setTextZoom(55);
StringBuilder sb = new StringBuilder();
sb.append("<HTML><HEAD><LINK href=\" http://yourStyleshitDomain.com/css/mbl-view-content.css\" type=\"text/css\" rel=\"stylesheet\"/></HEAD><body>");
sb.append(currentHomeContent.getDescription());
sb.append("</body></HTML>");
currentWebView.loadDataWithBaseURL("file:///android_asset/", sb.toString(), "text/html", "utf-8", null);
Here Use StringBuilder to append String for Style.
sb.append("<HTML><HEAD><LINK href=\" http://yourStyleshitDomain.com/css/mbl-view-content.css\" type=\"text/css\" rel=\"stylesheet\"/></HEAD><body>");
sb.append(currentHomeContent.getDescription());