WebView 和 JS 交互，如何将 Java 对象和 List 传值给 JS ？

栏目: Java · 发布时间: 7年前

内容简介：WebView 和 JS 交互，如何将 Java 对象和 List 传值给 JS ？

随着混合开发模式比较流行，很多时候，我们需要在原生的基础上，使用 WebView 加载网页，这样控制更加方便。今天我们来看看，如何将 Java 对象和 List 集合传值给 JS 调用。

如何将 Java 对象实例传值给 JS

其实将我们在 Android 原生中将 Java 对象实例传值给 JS 承认并且可以使用的对象，方法非常简单。我们来举个例子。

html 文件

我们在本地写了一个 html 文件，放在 assets 目录中。

<!DOCTYPE html>
<html>
<head>
    <metacharset="utf-8">
    <title>测试</title>
    <h1id="name"></h1>
    <h1id="age"></h1>
    <h1id="sex"></h1>
    <script>
    // Android需要调用的方法
   function callJS(){
      document.getElementById("age").innerHTML=person.getAge();
      document.getElementById("name").innerHTML=person.getName();
      document.getElementById("sex").innerHTML=person.getSex();
   }
    </script>
</head>
</html>

看到 callJS() 函数中的 person 了吗？它就是我们传值进行的 Java 对象实例。直接就可以使用，获取了年龄，名字，和性别属性。那我们该如何声明该对象，才会被 JS 所承认呢？

Java 对象

来，看看，我们是如何创建 Person 这个实体类的。代码如下：

package com.loonggg.wedswebview;

import android.webkit.JavascriptInterface;

/**
 * Created by loonggg on 2017/5/11.
 */
public class Person{
    private String name;
    private String age;
    private String sex;

    @JavascriptInterface
    publicStringgetAge(){
        return age;
    }

    public void setAge(String age){
        this.age = age;
    }

    public void setSex(String sex){
        this.sex = sex;
    }

    @JavascriptInterface
    publicStringgetSex(){
        return sex;
    }

    @JavascriptInterface
    publicStringgetName(){
        return name;
    }

    public void setName(String name){
        this.name = name;
    }

}

看到我们实体类 Person 中每个get方法的上面有一个 @JavascriptInterface 的注解了吗？它的意思就是告诉 JS ，这个可以用，所以我们在 Html 文件中，使用 person.get()对应的方法，可以获取到内容。

在 WebView 上是这样传值的：

webView.loadUrl("file:///android_asset/test_object.html");
final Person p = new Person();
p.setName("loonggg");
p.setAge("28");
p.setSex("男");

wv.addJavascriptInterface(p, "person");

wv.loadUrl("javascript:callJS()");

wv.addJavascriptInterface(p, “person”); 的意思就是注入 Java 对象 p 给 webview 为 person，在 JS 调用的时候，对应的就是 person 。

wv.loadUrl(“javascript:callJS()”);这句话的意思就是：调用JS中的方法 callJS()函数方法。

Java List如何传给 JS 呢？

其实按道理来说，是不可以将List集合直接传值给 JS 使用，但是既然对象可以传值，JS 可以调用 java 对象，也可以调用 Android 中的方法，那我们就一拆分的形式传过去。

Html 文件

<!DOCTYPE html>
<html>
<head>
    <metacharset="utf-8">
    <title>测试</title>
    <h1id="name"></h1>
    <h1id="age"></h1>
    <h1id="sex"></h1>

    <h1>List传值测试</h1>
    <h1id="name1"></h1>
    <h1id="age1"></h1>
    <h1id="sex1"></h1>
    <script>
    // Android需要调用的方法
   function callJS(){
      document.getElementById("age").innerHTML=person.getAge();
      document.getElementById("name").innerHTML=person.getName();
      document.getElementById("sex").innerHTML=person.getSex();
   }

   function callListJS(){
      document.getElementById("age1").innerHTML=window.javatojs.getPersonObject(0).getAge();
      document.getElementById("name1").innerHTML=window.javatojs.getPersonObject(0).getName();
      document.getElementById("sex1").innerHTML=window.javatojs.getPersonObject(0).getSex()
   }
    </script>
</head>
</html>

拆分传值

如何拆分呢？就是在JS中调用 Android中的方法，里面可以按照索引返回集合中的对象，然后再获取对象中的属性。代码如下：

/**
 * 该方法将在js脚本中，通过window.javatojs.....()进行调用
 *
 * @return
 */
@JavascriptInterface
publicPersongetPersonObject(intindex){
    return list.get(index);
}

@JavascriptInterface
public int getSize(){
    return list.size();
}


 list.add(p);
 wv.addJavascriptInterface(this, "javatojs");
 
 wv.loadUrl("javascript:callListJS()");

整个Acitvity中所有的代码

public class MainActivityextends AppCompatActivity{
    private WebView wv;
    private List<Person> list = new ArrayList<Person>();

    @SuppressLint("JavascriptInterface")
    @Override
    protected void onCreate(Bundle savedInstanceState){
        super.onCreate(savedInstanceState);
        wv = new WebView(this);
        setContentView(wv);
        WebSettings ws = wv.getSettings();
        ws.setJavaScriptEnabled(true);
        ws.setUseWideViewPort(true);//适应分辨率
        ws.setLoadWithOverviewMode(true);

        wv.loadUrl("file:///android_asset/test_object.html");
        final Person p = new Person();
        p.setName("loonggg");
        p.setAge("28");
        p.setSex("男");
        wv.addJavascriptInterface(p, "person");

        list.add(p);
        wv.addJavascriptInterface(this, "javatojs");

        wv.setWebViewClient(new WebViewClient() {
            @Override
            public void onPageFinished(WebView view, String url){
                super.onPageFinished(view, url);
                wv.loadUrl("javascript:callJS()");
                wv.loadUrl("javascript:callListJS()");
            }
        });
    }

    /**
     * 该方法将在js脚本中，通过window.javatojs.....()进行调用
     *
     * @return
     */
    @JavascriptInterface
    publicPersongetPersonObject(intindex){
        return list.get(index);
    }

    @JavascriptInterface
    public int getSize(){
        return list.size();
    }

}

效果图

WebView 和 JS 交互，如何将 Java 对象和 List 传值给 JS ？到这里我想大家就大致明白了什么意思了吧？赶紧去试试吧。

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，也希望大家多多支持码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。

码农书籍

XML 基础教程

（美）雅可布斯 / 许劲松等 / 人民邮电出版社 / 2007-7 / 49.00元

《XML 基础教程:入门、DOM、Ajax与Flash》全面讲述了XML及其在Web开发领域中的作用，同时介绍了一些特定的XML词汇以及相关的XML推荐标准。书中首先解释了XML并介绍了XML文档的不同组成部分；其次讲解了XML应用程序客户端的处理方法，如何使用CSS和 XSLT对XML文档进行显示和转换，如何使用JavaScript操作XML文档等内容；然后介绍了如何在服务器端处理XML；最后深......一起来看看《XML 基础教程》这本书的介绍吧!

码农工具