用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組件顯示普通網(wǎng)頁時一般會出現(xiàn)橫向滾動條，這樣會導致頁面查看起來非常不方便。LayoutAlgorithm是一個枚舉，用來控制html的布局，總共有三種類型 沒有作用
//settings.setLayoutAlgorithm(WebSettings.LayoutAlgorithm.SINGLE_COLUMN);
settings.setUseWideViewPort(true); //將圖片調整到適合webview的大小
settings.setLoadWithOverviewMode(true); // 縮放至屏幕的大小
//WebView兩種緩存（網(wǎng)頁、H5）方式，此處網(wǎng)頁不緩存
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，有效值區(qū)間在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數(shù)據(jù)的三個方法
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/
如果請求網(wǎng)絡url webView.loadUrl("http://www.baidu.com");webView.loadDataWithBaseURL 加載HTML數(shù)據(jù)
例子：webView.loadDataWithBaseURL(數(shù)據(jù)源路徑, 數(shù)據(jù), "text/html; charset=UTF-8", null, null);loadData() 加載html數(shù)據(jù)
不支持#、%、\、? 四種字符
webView.loadData(helper.getHtmlForData(), "text/html; charset=UTF-8", null);webView.postUrl加載帶參數(shù)的post接口
String postDate = "name=zhangsan&age=18&sex=1";
webView.postUrl("www.test.com",postData.getByte());
loadData與loadDataWithBaseURL區(qū)別
獲取到使用html字符串數(shù)據(jù)，使用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()多兩個參數(shù)，可以指定HTML代碼片段中相關資源的相對根路徑，也可以指定歷史Url。兩個方法的其余三個參數(shù)相同。
‘
在使用loadDataWithBaseURL 時候 是要將加載的js的路徑給String baseUrl 這樣 在加載的時候 才找的到js
loadDataWithBaseURL 中的 baseUrl 不為空 并且可以找到js
baseUrl是Html數(shù)據(jù)源路徑，歷史路徑可以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()方式
該方法的執(zhí)行不會使頁面刷新，而第一種方法（loadUrl ）的執(zhí)行則會
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中帶參數(shù)的方法
當調用H5中帶參數(shù)的方法時，勢必要傳入一個字符串，當傳入固定字符串時，用單引號括起來即可；當傳入變量名時，需要用到轉義符.
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">昌平區(qū)立湯路</td>
</tr>
<tr>
<td>換件件數(shù)</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">
保險合同當事人各方經(jīng)協(xié)商，同意以本確認書的換件及修理費金額作為確定本次事故損失范圍的依據(jù)，本確認書所列修理費總計金額均已包含各項稅費，其為保險公司認定的損失最高賠付金額，超過此金額部分，保險公司不予賠付。實際賠款金額按照保險條款約定計算確認。
</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">短信確認：尊敬的（車號）車主您好，我公司根據(jù)您愛車（出險日期）所發(fā)生事故的損失情況，經(jīng)綜合評定，現(xiàn)確認車輛事故總損失為
元，特此告知。如您對損失確認金額存在異議，請與我公司工作人員聯(lián)系，電話：。
</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代碼為例 我們來動態(tài)改變Html字段數(shù)據(jù)
其實很簡單，我就直接貼代碼了
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;
}
- 在來一個動態(tài)插入圖片（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) + "'>");
}
