详解 WebView 与 JS 交互传值问题_app

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

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

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

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

HTML 文件

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

@H_403_12@

<!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 这个实体类的。代码如下：

@H_403_12@

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 上是这样传值的：

@H_403_12@

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 文件

@H_403_12@

<!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中的方法，里面可以按照索引返回集合中的对象，然后再获取对象中的属性。代码如下：

@H_403_12@

 /**   * 该方法将在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中所有的代码

@H_403_12@

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();  }}

效果图

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

总结

以上是内存溢出为你收集整理的详解 WebView 与 JS 交互传值问题全部内容，希望文章能够帮你解决详解 WebView 与 JS 交互传值问题所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。

欢迎分享，转载请注明来源：内存溢出

原文地址: https://outofmemory.cn/web/1146034.html