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

简介: 版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u010046908/article/details/51759125 最近在做项目中,要使用HightChart来实现心电图,于是,使用WebView加载本地html页面,但是数据是通过蓝牙设备采集的数据,用Java代码获取的数据,需要将数据传到JavaScript中去,使用来绘制心电图。
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u010046908/article/details/51759125

最近在做项目中,要使用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只需要三步

  1. 调用WebView关联的WebSettings中setJavaScriptEnable(true)方法。
  2. 调用WebView关联的WebSettings中addJavaScriptInterface(Object obj,String name)。
  3. 在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文件

<!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方法相互传值,基本上就这么多了。

相关文章
|
2月前
|
移动开发 前端开发 HTML5
Twaver-HTML5基础学习(20)数据容器(3)_数据的批量加载(节省性能方法)
本文介绍了Twaver HTML5中数据的批量加载方法,通过使用`box.startBatch()`可以在大量数据加载时提高性能。文章通过示例代码展示了如何在React组件中使用批量加载功能,以减少界面重绘次数并提升效率。
48 1
Twaver-HTML5基础学习(20)数据容器(3)_数据的批量加载(节省性能方法)
|
3天前
|
程序员 开发工具 Android开发
Android|WebView 禁止长按,限制非白名单域名的跳转层级
如何限制 WebView 仅域名白名单网址能随意跳转,并禁用长按选择文字。
12 2
|
3天前
|
Android开发 UED
Android 中加载 Gif 动画
【10月更文挑战第20天】加载 Gif 动画是 Android 开发中的一项重要技能。通过使用第三方库或自定义实现,可以方便地在应用中展示生动的 Gif 动画。在实际应用中,需要根据具体情况进行合理选择和优化,以确保用户体验和性能的平衡。可以通过不断的实践和探索,进一步掌握在 Android 中加载 Gif 动画的技巧和方法,为开发高质量的 Android 应用提供支持。
|
22天前
|
XML JavaScript 数据格式
jquery中html()方法的使用
jquery中html()方法的使用
16 1
|
2月前
|
存储 编解码 前端开发
HTML颜色的性能优化方法
在网页开发中,虽然颜色选择并非主要性能瓶颈,但合理的颜色优化仍可提升渲染效率与用户体验。本文介绍十种实用技巧,如使用CSS渐变代替图片、运用CSS变量存储颜色、合理选择颜色格式、减少页面颜色种类、按需加载样式表等,帮助改善网页性能。尽管单独来看颜色优化的影响有限,但综合应用这些技巧能够有效提升网页加载速度及整体体验。
|
2月前
|
XML 前端开发 JavaScript
jQuery HTML / CSS 方法
jQuery HTML / CSS 方法
12 2
|
2月前
|
XML 数据格式 Python
Python技巧:将HTML实体代码转换为文本的方法
在选择方法时,考虑到实际的应用场景和需求是很重要的。通常,使用标准库的 `html`模块就足以满足大多数基本需求。对于复杂的HTML文档处理,则可能需要 `BeautifulSoup`。而在特殊场合,或者为了最大限度的控制和定制化,可以考虑正则表达式。
42 12
|
2月前
|
JavaScript 前端开发
HTML 表单和输入与按钮的联动方法汇总
在HTML中,通过JavaScript可以轻松实现表单与输入、按钮的互动。本文介绍了基本表单结构,并展示了如何用JS处理按钮点击、表单提交、动态禁用按钮、表单验证以及使用AJAX和jQuery简化代码等技巧,帮助你更好地控制和优化表单功能。
|
22天前
|
JavaScript 前端开发
DOM的概念?获取html元素的方法有哪些?
DOM的概念?获取html元素的方法有哪些?
28 0
|
2月前
|
XML 前端开发 JavaScript
jQuery HTML / CSS 方法
jQuery HTML / CSS 方法
26 0