用webview对HTML展示，利用jsoup对html操作。Android与js进行交互。
展示Html
- 首先初始化webView
webView = (WebView) findViewById(R.id.signature_webview);
WebSettings settings = webView.getSettings();
//支持JavaScript
settings.setJavaScriptEnabled(true);
webView.addJavascriptInterface(new JsSignature(), "android");
webView.setWebViewClient(new WebViewClient());
webView.setWebChromeClient(new WebChromeClient());
settings.setSupportZoom(true);//支持缩放，默认为true。是下面那个的前提。
settings.setBuiltInZoomControls(true);//设置内置的缩放控件。若为false，则该WebView不可缩放
settings.setDisplayZoomControls(false); //隐藏原生的缩放控件
//用WebView组件显示普通网页时一般会出现横向滚动条，这样会导致页面查看起来非常不方便。LayoutAlgorithm是一个枚举，用来控制html的布局，总共有三种类型 没有作用
//settings.setLayoutAlgorithm(WebSettings.LayoutAlgorithm.SINGLE_COLUMN);
settings.setUseWideViewPort(true); //将图片调整到适合webview的大小
settings.setLoadWithOverviewMode(true); // 缩放至屏幕的大小
//WebView两种缓存（网页、H5）方式，此处网页不缓存
settings.setCacheMode(WebSettings.LOAD_NO_CACHE);
// settings.setCacheMode(WebSettings.LOAD_CACHE_ELSE_NETWORK); //关闭webview中缓存
// settings.setAllowFileAccess(true); //设置可以访问文件
// settings.setLoadsImagesAutomatically(true); //支持自动加载图片
// settings.setDefaultTextEncodingName("utf-8");//设置编码格式
//支持手势缩放（如webView中需要手动输入用户名、密码等，则webview必须设置支持获取手势焦点）
webView.requestFocusFromTouch();
- 其他方法
//设置是否支持缩放，我这里为false，默认为true。
mWebView.getSettings().setSupportZoom(false);
//设置是否显示缩放工具，默认为false
mWebView.getSettings().setBuiltInZoomControls(false);
//设置默认的字体大小，默认为16，有效值区间在1-72之间
mWebView.getSettings().setDefaultFontSize(18);
//首先阻塞图片，让图片不显示
mWebSettings.setBlockNetworkImage(true);
//页面加载好以后，在放开图片
mWebSettings.setBlockNetworkImage(false);
//设置自适应屏幕
webSettings.setUseWideViewPort(true);
// 缩放至屏幕的大小
webSettings.setLoadWithOverviewMode(true);
//支持插件
webSettings.setPluginsEnabled(true);
//提高渲染等级
mWebSettings.setRenderPriority(WebSettings.RenderPriority.HIGH);
//禁止webview上面控件获取焦点(黄色边框)
mWebSettings.setNeedInitialFocus(false);
//关闭webview中缓存
webSettings.setCacheMode(WebSettings.LOAD_CACHE_ELSE_NETWORK);
//设置可以访问文件
webSettings.setAllowFileAccess(true);
//支持通过JS打开新窗口
webSettings.setJavaScriptCanOpenWindowsAutomatically(true);
//支持自动加载图片
webSettings.setLoadsImagesAutomatically(true);
//设置编码格式
webSettings.setDefaultTextEncodingName("utf-8");
- WebView加载html数据的三个方法
webView.loadUrl(String url);
webView.loadDataWithBaseURL(String baseUrl, String data,
String mimeType, String encoding, String historyUrl)
webView.loadData(String data, String mimeType, String encoding)
loadUrl(String url)
传入html路径 以 file://
如果在assets文件 file:///android_asset/
如果请求网络url webView.loadUrl("http://www.baidu.com");webView.loadDataWithBaseURL 加载HTML数据
例子：webView.loadDataWithBaseURL(数据源路径, 数据, "text/html; charset=UTF-8", null, null);loadData() 加载html数据
不支持#、%、\、? 四种字符
webView.loadData(helper.getHtmlForData(), "text/html; charset=UTF-8", null);webView.postUrl加载带参数的post接口
String postDate = "name=zhangsan&age=18&sex=1";
webView.postUrl("www.test.com",postData.getByte());
loadData与loadDataWithBaseURL区别
获取到使用html字符串数据，使用loadData或者loadDataWithBaseURL之后，Javascript就不起作用了！
public void loadData (String data, String mimeType, String encoding)
public void loadDataWithBaseURL (String baseUrl, String data, String mimeType, String encoding, String historyUrl)
loadDataWithBaseURL()比loadData()多两个参数，可以指定HTML代码片段中相关资源的相对根路径，也可以指定历史Url。两个方法的其余三个参数相同。
‘
在使用loadDataWithBaseURL 时候 是要将加载的js的路径给String baseUrl 这样 在加载的时候 才找的到js
loadDataWithBaseURL 中的 baseUrl 不为空 并且可以找到js
baseUrl是Html数据源路径，历史路径可以null。
Android与js的交互
java 调用js
- 通过WebView的loadUrl()方式
// 必须另开线程进行JS方法调用(否则无法调用)
mWebView.post(new Runnable() {
@Override
public void run() {
// 注意调用的JS方法名要对应上
// 调用javascript的callJS()方法
webView.loadUrl("javascript:alertMessage(\"Java 调用 JS \")");
}
});
- 通过WebView的evaluateJavascript()方式
该方法的执行不会使页面刷新，而第一种方法（loadUrl ）的执行则会
Android 4.4 后才可使用
mWebView.evaluateJavascript（"javascript:callJS(\"Java 调用 JS \")", new ValueCallback<String>() {
@Override
public void onReceiveValue(String value) {
//此处为 js 返回的结果
}
});
- 设置webView支持js
WebSettings webSettings = mWebView.getSettings();
webView.addJavascriptInterface(new JsSignature(), "android");
调用H5中无参无返回值的方法
mWebView.loadUrl("JavaScript:show()");调用H5中带返回值的方法
mWebView.evaluateJavascript("sum(1,2)",new ValueCallback() {
@Override
public void on ReceiveValue(String value) {
Log.e(TAG,"onReceiveValue value=" + value);
}
});
- 调用H5中带参数的方法
当调用H5中带参数的方法时，势必要传入一个字符串，当传入固定字符串时，用单引号括起来即可；当传入变量名时，需要用到转义符.
mWebView.loadUrl("javascript:alertMessage('哈哈')");
String content="9880";
mWebView.loadUrl( "javascript:alertMessage(\" " +content+ "\")" );
H5调用android中的方法
- 设置支持js
settings.setJavaScriptEnabled(true); - 添加java端的接口 并设置别名（别名需要给前端调用）
webView.addJavascriptInterface(new JsSignature(), "android"); - 编写java代码
public class JsSignature {
@JavascriptInterface
public String company() {
helper.showSignatureDialog(0);
return "";
}
@JavascriptInterface
public String insurant() {
helper.showSignatureDialog(1);
return null;
}
}
h5的代码我也贴出来吧
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title></title>
<meta name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<style>
body,table,h1,ul,li{padding:0px;margin:0px;font-size:12px;}
ul,li{list-style: none;}
.autograph_h1{float:left;width:100%;height:30px;line-height:30px;margin-top:10px;font-size:20px;font-weight:normal;text-align: center;}
.autograph{float:left;width:96%;margin:2%;border:1px solid #ccc;border-width:0px 0px 1px 1px;}
.autograph td{padding:5px 8px;border:1px solid #ccc;border-width: 1px 1px 0px 0px;}
.autograph span{float:left;width:100%;}
.autograph font{float:left;}
.autograph td img{max-width: 20%;}
.autograph ul{float:left;width:100%;}
.autograph li{float:left;width:100%;line-height:30px;}
.autograph_img{width: auto;}
.go{float: right;color:#0099cc;}
</style>
</head>
<body>
<form action="" method="post">
<h1 class="autograph_h1">车辆损失确认书</h1>
<table cellpadding="0" cellspacing="0" class="autograph">
<tr>
<td>报案号</td>
<td id="registNo">1111111111111111</td>
</tr>
<tr>
<td>损失方标志</td>
<td id="loss_tag">标志标志标志标志标志</td>
</tr>
<tr>
<td>日期</td>
<td id="time">2017-11-08</td>
</tr>
<tr>
<td>被保险人</td>
<td id="insured_name">被保险人姓名</td>
</tr>
<tr>
<td>车号</td>
<td id="licenseNo">京A32532</td>
</tr>
<tr>
<td>厂牌型号</td>
<td id="brand_model">厂牌型号</td>
</tr>
<tr>
<td>出险日期</td>
<td id="insured_time">2017-11-08</td>
</tr>
<tr>
<td>出险地点</td>
<td id="insured_location">昌平区立汤路</td>
</tr>
<tr>
<td>换件件数</td>
<td id="change_number">2</td>
</tr>
<tr>
<td>换件金额</td>
<td id="change_price">3500.00</td>
</tr>
<tr>
<td>工时费金额</td>
<td id="hour_price">2200.00</td>
</tr>
<tr>
<td>合计金额</td>
<td id="total">（人民币）大写：叁仟伍佰元<span>￥3500元</span></td>
</tr>
<tr>
<td>残值作价金额</td>
<td id="remaining">（人民币）大写：贰仟贰佰元<span>￥2200元</span></td>
</tr>
<tr>
<td colspan="2">
保险合同当事人各方经协商，同意以本确认书的换件及修理费金额作为确定本次事故损失范围的依据，本确认书所列修理费总计金额均已包含各项税费，其为保险公司认定的损失最高赔付金额，超过此金额部分，保险公司不予赔付。实际赔款金额按照保险条款约定计算确认。
</td>
</tr>
<tr>
<td colspan="2" id="company_signature">
<ul>
<li>保险公司
<div class="go" onclick="company();">去签名</div>
</li>
<li>
<font>签章：</font>
<div id="company_img"></div>
</li>
<li>2017年11月8日</li>
</ul>
</td>
</tr>
<tr>
<td colspan="2" id="insured_signature">
<ul>
<li>被保险人（三者）
<div class="go" onclick="insurant();">去签名</div>
</li>
<li>
<font>签章：</font>
<div id="insurant_img"></div>
</li>
<li>2017年11月8日</li>
</ul>
</td>
</tr>
<tr>
<td colspan="2">短信确认：尊敬的（车号）车主您好，我公司根据您爱车（出险日期）所发生事故的损失情况，经综合评定，现确认车辆事故总损失为
元，特此告知。如您对损失确认金额存在异议，请与我公司工作人员联系，电话：。
</td>
</tr>
</table>
</form>
<script>
// 保险公司签名
function company(){
//调用原生的方法，android为约定的别名；company()为原生的方法
var result=window.android.company();
//将返回结果显示在id为company_img的控件上
//document.getElementById("company_img").append("<img src='data:image/png;base64,"+result+"'>");
};
// 被保险人签名
function insurant(){
//调用原生的方法，android为约定的别名；insurant()为原生的方法
var result=window.android.insurant();
//将返回结果显示在id为insurant_img的控件上
//document.getElementById("insurant_img").innerHTML=result;
};
</script>
</body>
</html>
Jsoup操作Html
以上面的HTML代码为例 我们来动态改变Html字段数据
其实很简单，我就直接贴代码了
private String parseData(JSONObject data) {
String html = "";
try {
InputStream inputStream = context.getAssets().open(RAW_HTML_NAME);
Document document = Jsoup.parse(inputStream, "UTF-8", "");
document.getElementById("registNo").text(data.getString("registNo"));
document.getElementById("loss_tag").text(data.getString("loss_tag"));
document.getElementById("time").text(data.getString("time"));
document.getElementById("insured_name").text(data.getString("insured_name"));
document.getElementById("licenseNo").text(data.getString("licenseNo"));
document.getElementById("brand_model").text(data.getString("brand_model"));
document.getElementById("insured_time").text(data.getString("insured_time"));
document.getElementById("insured_location").text(data.getString("insured_location"));
document.getElementById("change_number").text(data.getString("change_number"));
document.getElementById("change_price").text(data.getString("change_price"));
document.getElementById("hour_price").text(data.getString("hour_price"));
document.getElementById("total").text(data.getString("total"));
document.getElementById("remaining").text(data.getString("remaining"));
html = document.html();
generateHtml(html);
} catch (IOException e) {
e.printStackTrace();
} catch (JSONException e1) {
e1.printStackTrace();
}
return html;
}
- 在来一个动态插入图片（bitmap转换成base64）
html 插入base64的好处是 不需要在引用图片了。图片和html成为一体了。
private void parseBitmap(Bitmap bitmap, int index) {
document.getElementById(index).append("<img src='data:image/png;base64," + FileUtils.bitmapToBase64(bitmap) + "'>");
}
