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 */ @JavascriptInterface public 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 */ @JavascriptInterface public 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文件
<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函数返回值
@JavascriptInterfacepublic 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() { @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方法相互传值,基本上就这么多了。
更多相关文章
- Android平台调用so库中函数的流程及一些坑
- Android的反射机制Reflection
- Android的JNI总结
- 框架和流程——OkHttp 源码详解(一)
- Android(安卓)前置摄像头调试纪要
- android activity 应该知道的一切
- Android开发——实现子线程更新UI
- Android(安卓)利用h264流合成mp4
- Android(安卓)6.0(权限申请)反射和注解实现权限封装