Android中WebView載入本地Html，與JavaScript與Android方法相互傳值
阿新 • • 發佈：2019-02-06
最近在做專案中，要使用HightChart來實現心電圖，於是，使用WebView載入本地html頁面，但是資料是通過藍芽裝置採集的資料，用Java程式碼獲取的資料，需要將資料傳到JavaScript中去，使用來繪製心電圖。以前都載入伺服器端返回的url地址，使用WebView載入，這次不同了，要自己實現心電圖的繪製。於是細細的學習了JavaScript與Java程式碼相互傳值，最後總結在這裡。
為了讓WebView中的JavaScript指令碼呼叫Android方法，WebView提供了一套WebSettings工具類，該工具了提供了大量的方法來管理WebView的選項設定，其中setJavaScriptEnable(true),是讓WebView中的JavaScript指令碼來呼叫Android方法。
還有一個最重要的方法addJavaScriptInterface(Object obj,String name)方法，該方法負責把object物件暴漏成JavaScript中的name物件。
1.在WebView呼叫Android只需要三步
- 呼叫WebView關聯的WebSettings中setJavaScriptEnable(true)方法。
- 呼叫WebView關聯的WebSettings中addJavaScriptInterface(Object obj,String name)。
- 在JavaScript中通過暴露出來的name呼叫Android中的方法。
1.1首先建立一個Java類
public class MyObject {
private Context mContext;
private String data;
private 1.2建立在Activity中載入HTML頁面
WebSettings wSet =wb .getSettings();
//呼叫WebView關聯的WebSettings中setJavaScriptEnable(true)方法。
wSet.setJavaScriptEnabled(true);
//載入本地HTML頁面
wb.loadUrl("file:///android_asset/xd.html");
if (mList != null && mList.size()>0) {
呼叫WebView關聯的WebSettings中addJavaScriptInterface(Object obj,String name)。
wb.addJavascriptInterface(new MyObject(getActivity(), mList.get(0).getResult(),mList.get(0).getDateTime()),"myObj");//這裡的myObj是javaScript物件，直接呼叫getTime()方法，即 myObj.getTime();
}1.3建立xd.hmtl檔案
<!DOCTYPE HTML>
<html>
<head>
<base href="<%=basePath%>">
<title>心電</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<!--<script src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js"></script>-->
<!--<script src="http://cdn.hcharts.cn/highcharts/highcharts.js"></script>-->
<script type="text/javascript" src="file:///android_asset/js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="file:///android_asset/js/highcharts.js"></script>
<script type="text/javascript">
$(function(){
var data = myObj.getData();
var time = myObj.getTime();
dataHighchartXdDt(data,time);
})
//心電
function dataHighchartXdDt(dtxd,t){
//以下是繪製心電的邏輯
//省略
});
}
</script>
<style></style>
</head>
<body>
<div class="middlecenter-left-data-top" id="container"></div>
</body>
</html>注意：
var data = myObj.getData();
var time = myObj.getTime();以上第一個方法就是獲取心電資料，第二個方法就是獲取測量時間。
2.在Android呼叫JavaScript方法
2.1webView呼叫js的基本格式為
webView.loadUrl(“javascript:methodName(parameterValues)”)2.2呼叫js無參無返回值函式
String call = "javascript:sayHello()";
webView.loadUrl(call);2.3呼叫js有參無返回值函式
注意對於字串作為引數值需要進行轉義雙引號。
String call = "javascript:alertMessage("" + "content" + "")";
webView.loadUrl(call);2.4呼叫js有引數有返回值的函式
Android在4.4之前並沒有提供直接呼叫js函式並獲取值的方法，所以在此之前，常用的思路是 java呼叫js方法，js方法執行完畢，再次呼叫java程式碼將值返回。
2.4.1.Java呼叫js程式碼
String call = "javascript:sumToJava(1,2)";
webView.loadUrl(call);2.4.2 js函式處理，並將結果通過呼叫java方法返回
function sumToJava(number1, number2){
window.control.onSumResult(number1 + number2)
}2.4.3.Java在回撥方法中獲取js函式返回值
@JavascriptInterface
public void onSumResult(int result) {
Log.i(LOGTAG, "onSumResult result=" + result);
}2.5 java程式碼時用evaluateJavascript方法呼叫
function getGreetings() {
return 1;
}
private void testevaluateJavascript(WebView webView) {
webView.evaluateJavascript("getGreetings()", new ValueCallback<String>() {
@Override
public void onReceiveValue(String value) {
Log.i(LOGTAG, "onReceiveValue value=" + value);
}});
}輸出結果
I/MainActivity( 1432): onReceiveValue value=1
注意
上面限定了結果返回結果為String，對於簡單的型別會嘗試轉換成字串返回，對於複雜的資料型別，建議以字串形式的json返回。
evaluateJavascript方法必須在UI執行緒（主執行緒）呼叫，因此onReceiveValue也執行在主執行緒。
總結，JavaScript與Android方法相互傳值，基本上就這麼多了。