Using Android 5.0.2...
The following is not showing up properly. I am unable to see any styling.
<!DOCTYPE html>
<html>
<head>
<style>
.bodyBG{
background: linear-gradient(#88DDFF, #55AAFF);
width:100%;
height:100%;
background-position: 0, 0;
background-size: 100%, 100%;
position: absolute;
}
</style>
</head>
<body>
<div class="bodyBG">
...
</div>
</body>
</html>
The WebView is loaded with the HTML like that.
WebView webView = (WebView) findViewById(R.id.webView);
webView.getSettings().setJavaScriptEnabled(true);
InputStream inputStream = context.getResources().openRawResource(R.raw.html_page);
byte[] bytes = new byte[inputStream.available()];
inputStream.read(bytes);
final String html = new String(bytes);
webView.loadData(html, "text/html", null);
webView.addJavascriptInterface(new JSWebApp(), "app");
How to fix it?
Related
I'm using leafletjs in an Android Application to render local polygons (without CRS Information) in geojson format, without maptiles. Unfortunately, zooming and other touch movement are very laggy. My geojson file contains 3000 polygons. Is there any solution to this problem, the only thing I can find is a solution for markers.
This is how it looks:
Here is my code:
In onCreate:
public void loadMap(){
scanFiles();
checkStoragePermissions();
webview = (WebView) findViewById(R.id.myWebView);
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
// chromium, enable hardware acceleration
webview.setLayerType(View.LAYER_TYPE_HARDWARE, null);
} else {
// older android version, disable hardware acceleration
webview.setLayerType(View.LAYER_TYPE_SOFTWARE, null);
}
WebSettings webSettings =
webview.getSettings();
webSettings.setAllowFileAccess(true);
webSettings.setAllowFileAccessFromFileURLs(true);
webSettings.setJavaScriptEnabled(true);
webview.setWebContentsDebuggingEnabled(BuildConfig.DEBUG);
webview.setWebChromeClient(
new WebChromeClient());
File leafletMap = new File(Environment.getExternalStorageDirectory(), "/LeafletMap/Map.html");
webview.loadUrl("file:///" + leafletMap.getAbsolutePath());
}
And my HTML-File:
<!DOCTYPE html>
<html>
<head>
<title>Leaflet Map</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<link rel="stylesheet" href="file:///android_asset/leaflet/leaflet.css">
<script type="text/javascript" src="file:///android_asset/leaflet/leaflet.js"></script>
<style>
body {
padding: 0;
margin: 0;
}
html, body, #mapid {
height: 100%;
width: 100vw;
}
</style>
</head>
<body>
<div id="mapid"></div>
<script>
var mymap = L.map('mapid', {
crs: L.CRS.Simple
});
//Add local
var layer;
const xhr = new XMLHttpRequest();
xhr.open('GET', 'file:///android_asset/poly.json');
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.responseType = 'json';
xhr.onload = function () {
if (xhr.status !== 200) return
var blahlayer = L.geoJSON(xhr.response).getBounds();
mymap.fitBounds(blahlayer);
L.geoJSON(xhr.response).addTo(mymap);
};
xhr.send();
</script>
</body>
</html>
I have this WebView and I get the HTML from server.
String Body = "<html> <head> <style> body { background-color: clear !important; } p,div,span,li { color:black; font-size:17px !important;background-color: clear !important;} embed, iframe, object, video {height: 160px; width: 355.0px;} img { height: 160px; width: 355.0px; } </style> </head> <body><p>" +
BodyDetails +
"</p>" +
"</div></p></body> </html>";
Log.d("currentContent != null", Body);
CustomTextViewDetail.getSettings().setJavaScriptEnabled(true);
CustomTextViewDetail.loadData("", "text/html; charset=utf-8", "UTF-8");
CustomTextViewDetail.loadData(Body, "text/html; charset=utf-8", "UTF-8");
CustomTextViewDetail.getSettings().setBuiltInZoomControls(true);
CustomTextViewDetail.getSettings().setDisplayZoomControls(false);
My issue is that when I change the HTML content, web view still shows the last content not load the new content!
How to refresh or solve this issue?
Call myWebView.reload() after you change the data.
I have got the following html to be loaded on CSS through android webview . When it comes to the execution. there has no obseravle changes to the font color changes onto my wordings tagged by blockquote
the below is my html code :
<html>
<head>
<title>Example</title>
<link rel="stylesheet" type="text/css" href="file:///android_asset/style.css" />
</head>
<blockquote>拜年根本係學溝通同交際#hehe#</blockquote>
<br/><br/>唔明點解去完親戚屋企拜年 過幾日親戚要黎返我屋企再拜過年 [banghead]
</body>
</html>
CSS:
#CHARSET "UTF-8";
blockquote{
color:#d4d3d3
}
Actual android code
viewHolder.txContent = (WebView) v.findViewById(R.id.replycontent);
WebSettings settings = viewHolder.txContent.getSettings();
settings.setDefaultTextEncodingName("utf-8");
settings.setLayoutAlgorithm(LayoutAlgorithm.SINGLE_COLUMN);
viewHolder.txContent.setFocusable(false);
viewHolder.txContent.setClickable(true);
viewHolder.txContent.setBackgroundColor(Color.parseColor("#00FFFFFF"));
String htmlPreffix = "<html><head><title>Example</title><link rel=\"stylesheet\" type=\"text/css\" href=\"file:///android_asset/style.css\" /></head>";
String htmlSuffixString = "</body></html>";
System.out.println("htmlParsed");
System.out.println(htmlPreffix + htmlParsed + htmlSuffixString);
viewHolder.txContent.loadDataWithBaseURL(null, htmlParsed, "text/html", "utf-8", null);
You're missing the opening <body> tag.
I have developed a media player in Html.Now my job is to play streaming Url in Html coded media player coming from Android activity.So i have need to pass url from android activity to Html media player files where it will be play.I have searched lot but haven't find any good solution.please suggest me. Thanks
Java Code
setContentView(R.layout.main);
// String LocalFile = "file:///android_asset/android.html";
WebView webView = (WebView) findViewById(R.id.webView1);
String html = "<embed src=\"file:///android_asset/"
+ "android.html"
+ " \"play=\"true\" loop=\"true\" width=\"100%\" height=\"100%\"> <embed>";
webView.getSettings().setPluginState(WebSettings.PluginState.OFF);
webView.getSettings().setPluginsEnabled(true);
webView.getSettings().setAllowFileAccess(true);
webView.getSettings().setJavaScriptEnabled(true);
webView.loadDataWithBaseURL("file:///android_asset/", html,
"text/html", "utf-8", null);
String str = "rtmp://23.21.155.146:554/9016012507701502509011502505116016019xm150.sdp";
webView.loadUrl("javascript:passWebUrl('" + str + "')");
My Code for media player
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<style type="text/css" media="screen">
html, body{
margin:0;
padding:0;
height:100%;
}
#altContent{
width:100%;
height:100%;
}
</style>
<title>YOUR TITLE HERE!</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>
<script type="text/javascript">
var flashvars = {};
function passWebUrl(url)
{
alert(url);
}
flashvars.HaloColor = "0x0086db";
flashvars.ToolTips = "true";
flashvars.AutoPlay = "true";
flashvars.VolumeLevel = "50";
flashvars.CaptionURL = "YOUR CAPTION HERE";
flashvars.Title = "YOUR TITLE HERE";
flashvars.Logo = "";
flashvars.SRC = "Here is my url link should comes from Android Activity";
flashvars.BufferTime = "5";
flashvars.AutoHideControls = "false";
flashvars.IsLive = "true";
var params = {};
params.wmode = "transparent";
params.allowfullscreen = "true";
var attributes = {};
attributes.id = "L3MP";
swfobject.embedSWF("http://media-player.cdn.level3.net/flash/v1_1_1/Level3MediaPlayer.swf", "altContent", "100%", "100%", "10.1.0","http://media-player.cdn.level3.net/flash/v1_1_1/expressInstall.swf", flashvars, params, attributes);
</script>
</head>
<body>
<div id="altContent">
<center> <BR><BR><span style="color:red"><b>Please Install Adobe Flash Player</b>
</span><BR><BR>
<img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" />
</center>
</div>
</body>
</html>
</script>
</html>
For passing the value of variable from your java class to the javascript function in your html page you have to use this code. Try this:
String str = "variable_value";
webView.loadUrl("javascript:functionName('"+ str +"')");
EDIT : -
function passWebUrl(url)
{
alert(url);
}
I have a html code which I saved in home.txt file and placed it raw folder. Now I want to display the same in a WebView. I used the following code for it.
homeWebview = (WebView) findViewById(R.id.homeWebview);
InputStream fileStream = getResources().openRawResource(R.raw.home);
int fileLen = fileStream.available();
// Read the entire resource into a local byte buffer.
byte[] fileBuffer = new byte[fileLen];
fileStream.read(fileBuffer);
fileStream.close();
displayText = new String(fileBuffer);
//Display content.
homeWebview.loadData(displayText, "text/html", "utf-8");
It is working fine. Now I have to display some Chinese characters in the html. I added the Chinese character in home.txt. Here it is the html code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Language</title>
<style type="text/css">
body {font-family: HelveticaExt-normal, Helvetica, Arial, sans-serif;margin:0;font-size:20px;color:#000000;}
.mainWrapper {margin:0;}
p {margin: 10px;}
p.bodytext {margin: 0 10px 20px;}
.headerText { background:#eeeeee; background: -webkit-gradient(linear, left top, left bottom, from(#fefefe), to(#e0e0e0));border-top: 2px solid #000000;padding-bottom:7px;}
.headerText p {margin: 10px 10px 0 10px;}
a {color:#324f85;text-decoration:underline;}
.headerbar {border-top:2px solid #000000;border-bottom:2px solid #000000;height:34px;font-family:HelveticaExt-bold, Helvetica, Sans-serif;color:#fff;font-size:18px;padding-left:10px;line-height:34px;margin:0;
background:-webkit-gradient(linear, left top, left bottom, from(#494e4f), to(#787a7c));
}
.navigationList {list-style-type:none;padding:0;margin:0;}
.navigationList li {height:60px;border-bottom:2px solid #e0e0e0;background-position:10px center;background-repeat:no-repeat;padding-left:60px;line-height:28px;
}
</style>
</head>
<body>
<div class="mainWrapper">
<div class="headerText">
<p欢迎您到泰国语言主持人！www.test.com 欲了解更多信息！</p>
</div>
</div>
</body>
Now it is displaying the common characters well, but all the Chinese char is showing as unknown char. What is the prob in my code?
use webView.loadDataWithBaseURL (null, text, "text/html", "utf-8", null);
The home.txt file was not in UTF-8 encoded, I open it in notepad++ and change the encoding. Now it is showing properly.
I think problem in this line:
displayText = new String(fileBuffer);
You should change to
displayText = new String(fileBuffer, "UTF-8");