详解 WebView 与 JS 交互传值问题

所属分类：软件编程 / Android 阅读数： 24

收藏 0赞 0分享

随着混合开发模式比较流行，很多时候，我们需要在原生的基础上，使用 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();
  }

}

效果图