當前位置：首頁 > 运维知识 > Android >内容正文

Android

Android中WebView加载本地Html，与JavaScript与Android方法相互传值...

發布時間：2025/1/21 Android 77 豆豆

生活随笔收集整理的這篇文章主要介紹了 Android中WebView加载本地Html，与JavaScript与Android方法相互传值... 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

最近在做項目中，要使用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 String time;public MyObject(Context c,String data,String time){this.data = data;this.time = time;mContext = c;}/*** 獲取心電數據* @return*/@JavascriptInterfacepublic String getData(){String[] dd = new String[0];try {dd = data.substring(data.indexOf("Ъ")+2, data.length()-1).split(",");} catch (Exception e) {e.printStackTrace();}return Arrays.toString(dd).toString();}/*** 獲取測量時間* @return*/@JavascriptInterfacepublic String getTime(){return time;} }

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"><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方法調用

輸出結果

I/MainActivity( 1432): onReceiveValue value=1
注意

上面限定了結果返回結果為String，對于簡單的類型會嘗試轉換成字符串返回，對于復雜的數據類型，建議以字符串形式的json返回。
evaluateJavascript方法必須在UI線程（主線程）調用，因此onReceiveValue也執行在主線程。

總結，JavaScript與Android方法相互傳值，基本上就這么多了。

總結

以上是生活随笔為你收集整理的Android中WebView加载本地Html，与JavaScript与Android方法相互传值...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。