In my app, I show an external HTML site in either a CustomTabsIntent or a in a WebView:
if (customTabsIntent != null) customTabsIntent.launchUrl(this, Uri.parse("http://some.where.com/site.html"));
else startActivity(new Intent(Intent.ACTION_VIEW, Uri.parse("http://some.where.com/site.html")));
But the style of that HTML is already updated, but my smartphone shows the old style (old fonts etc.).
In the *.html file there is a *.css referenced:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href='https://my.site.com/assets/css/style.css' rel='stylesheet' type='text/css'>
</head>
And in that *.css file, there is an individual font referenced; e.g.:
#font-face {
font-family: 'MyFontRegular';
src: url('https://www.openfont.org/assets/mail/fonts/MyFontWeb-Regular.woff') format('woff'),
url('https://www.openfont.org/assets/mail/fonts/MyFontWeb-Regular.eot') format('embedded-opentype');
}
As I said, the chrome browser in my smartphone does not show the referenced fonts, because it cuts the http:// or https:// off.
When I prepend that scheme manually into the address bar, the proper style is being shown.
How can I force the https:// scheme in the address field in my android browser, when it was called from my android app ?
It could be cache. If you have control over the html site, change the include to something like:
<link href='https://my.site.com/assets/css/style.css?something=132545' rel='stylesheet' type='text/css'>
After that, try it on the phone. If the cache clears up and pulls the new css file, change the number to a random generated number.
It will load the file each time the "something" variable changes.
If you perform those style updates not so often, make it a fixed number, and keep increasing it each time you update the css file.
Following your information on the fonts not being loaded with https, you could try to override the onReceivedSslError and see it solves the problem:
#Override
public void onReceivedSslError(WebView view, SslErrorHandler handler,
SslError error) {
handler.proceed();
}
Be careful, this completely disables ssl validation... it´s a dangerous route.
Related
I view a lot of htmls with text inside, but there seems to be one html that is not displayed correctly, for some reason all the tilde characters display an unknown character, this is strictly related to that particular html document?
Since all the others htmls are viewed perfectly in webview, i guess it has nothing to do inside android studio?
Intial portion of html document
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head>
<link href="Content/watermark.css" rel="stylesheet" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Código de Proceso Penal</title></head>
<script src="Scripts/jquery-2.1.4.min.js"></script>
CADE
This happens due to fact that Webview is not able to detect encoding.
If you are using Webview loadData() or void loadDataWithBaseURL() method, try passing "UTF-8" as encoding, you can check same here, on developer.android.com..
it this doesn't work try with "iso-8859-1" or "iso-8859-15" encoding
I'm developing an android app using cordova.
The index.html has the following:
<!DOCTYPE html>
<html>
<head>
<title>Mobile</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link type="text/css" rel="stylesheet" media="all" href="/style.css">
...
My problems concerns the link tag. Although logcat output shows the embedhttp server serving up the style.css, the styles don't get applied to the html.
In contrast, the js files I include, seem to be working perfectly fine.
<body>
<script type="text/javascript" src="/cordova.js"></script>
<script type="text/javascript" src="/lib/jquery-2.1.0.min.js"></script>
...
Has anyone else run into this issue?
I was experiencing the same problem and I solved writing the path to the images relative to css file location and not relative to .HTML file location.
I have the following structure:
css
index.css
images
mage1.png
index.html
My css class, declared inside índex.css file, must be like this one:
body {
background: url('../images/image1.png');
}
What you have to be aware of is that cordova counts relative paths differently than your normal browser. So I would recommend not using relative paths for images but use the absolute path from the project "home". Ex:
body {
background: url('images/image1.png');
}
This worked for me as I needed to keep a functioning version for a webapp as well as for a cordova nativified app.
I am working on an application in Android, where I am using a local html file which includes css files, but It won't work and I have no Idea why.
The Java code is like this:
view.loadDataWithBaseURL("file:///android_asset/", content, "text/html", "UTF-8", null);
The HTML code is like this
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<title>Starter Template for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link href="../css/main.css" rel="stylesheet">
<style>
</style>
The path is correct, Eclipse WebBrowser shows the html Page correct but if I test it on my Device it's without styles.
The Logcat throws the Error "Unknown Chromium Error: -6"
Thanks a lot in advance
you cannot refer to this path inside a webview. you probably need to store your css file in assets folder and refer to it dynamically:
put CSS in assets folder, do your manipulation with HTML, but refer to CSS by relative path, and load HTML to WebView by loadDataWithBaseURL() method:
webView.loadDataWithBaseURL("file:///android_asset/", htmlString, "text/html", "utf-8", null);
E.g. you have styles.css file, put it to assets folder, create HTML and load it:
StringBuilder sb = new StringBuilder();
sb.append("<HTML><HEAD><LINK href=\"styles.css\" type=\"text/css\" rel=\"stylesheet\"/></HEAD><body>");
sb.append(tables.toString());
sb.append("</body></HTML>");
webView.loadDataWithBaseURL("file:///android_asset/", sb.toString(), "text/html","utf-8", null);
from: WebView, add local .CSS file to an HTML page?
On a related note, if you're not storing the file in the assets folder and want to use relative paths, Webview on Android sometimes requires dot-slash before relative paths.
<LINK href="./styles/file.css" type="text/css" rel="stylesheet">
See this post
In your case the error -6 means FILE_NOT_FOUND, which probably due to access permission issue on your device.
You may need to put the CSS file under the same folder of your HTML files. For security consideration, webkit engine will apply same-domain policy when accessing local files. i.e. accessing sub-resource files (such as CSS, JS, images) that are not in the same folder of your main HTML file is not allowed.
I'm trying to access the data inside the assets/css from an external HTML file.
The process goes like this:
<html>
<head>
<meta name="viewport" content="target-densitydpi=device-dpi, width=device-width, height=device-height, user-scalable=yes" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>ola</title>
<link rel="stylesheet" type="text/css" href="file:///android_asset/css/main.css" />
<link rel="stylesheet" type="text/css" href="file:///android_asset/css/sch.css" />
<script type="text/javascript" src="file:///android_asset/css/ethan.js" />
<script type="text/javascript" src="scripts/allinone.js" />
</head>
<body>
<input id="btnTest1" name="button" type="button" style="height:0px;width:0px;" />
</body>
</html>
So here the thing is that, I'm actually calling the HTML file using a link (since the HTML file is not locally present). But main.css, sch.css and ethan.js are locally present in the assets/css folder.
What I'm trying to do is to load the allinone.js which is obviously external and the other three files into the which are internal and run the script.
I found "file:///android_asset/css/main.css" but it looks like it doesn't work.
Please help....
I would be curious to know more about the use case here. My understanding is this:
You're loading an externally hosted HTML file into an Android Webview
You need to overlay some local styles/scripts, which can't be hosted on the external site along with the HTML (presumably because you're generating them dynamically).
If that's so -- and given that the logical approach you conceived of using the file:// URI does not work -- there would seem to be two options, each making use of the webView API:
Load the HTML file from the remote source, modify it, then set it as the webView's source. Locate the tag of the remote HTML and inject your local JS / CSS inline there.
Make use of the 'loadUrl' WebView method to inject your CSS/Javascript dynamically (this seems unnecessarily complicated if #1 is an option). For example:
mWebView.loadUrl("javascript:injectJavascript(js)");
where the parameter 'js' is some inline Javascript that you load within your Android code, and injectJavascript is a method in the remote HTML file that actually inserts it into your DOM. Take an analogous approach to insert your CSS ...
Admittedly these approaches are a bit hackish. Ideally you would use a custom method of the WebView class like 'addCssToDom' or something, but as far as I can see, no such methods are available.
I have a WebView which may contain data that appears to be getting "auto linked". Something that looks like an email address is becoming clickable, even though it's now within an <a> tag or has an onclick attribute. How do I disable this auto-linking?
I've looked thorugh the WebView docs, as well as the WebSettings docs, but didn't seem to see anything that mentions this behavior.
alt text http://beautifulpixel.com/assets/5554_Fast-20100706-110228.png
I know this is a bit late, but for future reference, this might be a solution that will work regardless if the links are auto created or defined in the <a>-tag.
myWebView.setWebViewClient(new WebViewClient(){
#Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
// return true; // will disable all links
// disable phone and email links
if(url.startsWith("mailto") || url.startsWith("tel")) {
return true;
}
// leave the decision to the webview
return false;
}
});
To do all the email addresses, add a meta tag:
<meta name="format-detection" content="email=no" />
You can also disable physical address and telephone detection:
<meta name="format-detection" content="telephone=no" />
<meta name="format-detection" content="address=no" />
In my own application, though, I needed PhD's solution to prevent only one email from being linked.
I had the same problem, tried this:
<a onClick=\"return false;\">jorgesys#elnorte.com</a>
it did not worked.
Then tried this:
<a href='javascript:void(0);'>800-644-9737</a>
and it did the trick
Hi Squeaggy why you do want to eliminate that funcionality from the webview, but well a tricky way would be including onClick="return false;" in the anchor tag that contains the email or URL.
<a onClick=\"return false;\">jorgesys#elnorte.com</a>
That appears to be unchangeable functionality of the WebView.
You could do the opposite of this Is there any way to have WebView auto-link URLs and phone numbers in Android? and create a javascript link stripper (instead of the proposed link injector there).
Not sure what else would work for this.