用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() {
@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的代码我也贴出来吧
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("![](data:image/png;base64," + FileUtils.bitmapToBase64(bitmap) + ")
");
}