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

来源：互联网发布：店铺被淘宝封了怎么办编辑：程序博客网时间：2024/05/21 13:21

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

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

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

html 文件

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

<!DOCTYPE html><html><head>    <meta charset="utf-8">    <title>测试</title>    <h1 id="name" ></h1>    <h1 id="age"></h1>    <h1 id="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    public String getAge() {        return age;    }    public void setAge(String age) {        this.age = age;    }    public void setSex(String sex) {        this.sex = sex;    }    @JavascriptInterface    public String getSex() {        return sex;    }    @JavascriptInterface    public String getName() {        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>    <meta charset="utf-8">    <title>测试</title>    <h1 id="name" ></h1>    <h1 id="age"></h1>    <h1 id="sex"></h1>    <h1>List传值测试</h1>    <h1 id="name1" ></h1>    <h1 id="age1"></h1>    <h1 id="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    public Person getPersonObject(int index) {        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 MainActivity extends 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    public Person getPersonObject(int index) {        return list.get(index);    }    @JavascriptInterface    public int getSize() {        return list.size();    }}

效果图

到这里我想大家就大致明白了什么意思了吧？赶紧去试试吧。

有兴趣的同学可以去研究一下，或者欢迎关注我的微信公众号来跟我一起交流技术，一起分享学习。

欢迎大家关注我的技术分享公众号：非著名程序员（smart_android）。技术文章均先首发于我的技术分享的微信公众号。

阅读全文

2 1