详解 WebView 与 JS 交互传值问题

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

}

效果图

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!