| 注册
请输入搜索内容

热门搜索

Java Linux MySQL PHP JavaScript Hibernate jQuery Nginx
bapi822
7年前发布

WebView 和 JS 交互,如何将 Java 对象和 List 传值给 JS ?

   <p>随着混合开发模式比较流行,很多时候,我们需要在原生的基础上,使用 WebView 加载网页,这样控制更加方便。今天我们来看看,如何将 Java 对象 和 List 集合传值给 JS 调用。</p>    <h3>如何将 Java 对象实例传值给 JS</h3>    <p>其实将我们在 Android 原生中将 Java 对象实例传值给 JS 承认并且可以使用的对象,方法非常简单。我们来举个例子。</p>    <p>html 文件</p>    <p>我们在本地写了一个 html 文件,放在 assets 目录中。</p>    <pre>  <code class="language-java"><!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>  </code></pre>    <p>看到 callJS() 函数中的 person 了吗?它就是我们传值进行的 Java 对象实例。直接就可以使用,获取了年龄,名字,和性别属性。那我们该如何声明该对象,才会被 JS 所承认呢?</p>    <p>Java 对象</p>    <p>来,看看,我们是如何创建 Person 这个实体类的。代码如下:</p>    <pre>  <code class="language-java">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;      }    }  </code></pre>    <p>看到我们实体类 Person 中每个get方法的上面有一个 @JavascriptInterface 的注解了吗?它的意思就是告诉 JS ,这个可以用,所以我们在 Html 文件中,使用 person.get()对应的方法,可以获取到内容。</p>    <p>在 WebView 上是这样传值的:</p>    <pre>  <code class="language-java">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()");  </code></pre>    <p>wv.addJavascriptInterface(p, “person”); 的意思就是注入 Java 对象 p 给 webview 为 person,在 JS 调用的时候,对应的就是 person 。</p>    <p>wv.loadUrl(“javascript:callJS()”);这句话的意思就是:调用JS中的方法 callJS()函数方法。</p>    <h3>Java List如何传给 JS 呢?</h3>    <p>其实按道理来说,是不可以将List集合直接传值给 JS 使用,但是既然对象可以传值,JS 可以调用 java 对象,也可以调用 Android 中的方法,那我们就一拆分的形式传过去。</p>    <p>Html 文件</p>    <pre>  <code class="language-java"><!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>  </code></pre>    <p>拆分传值</p>    <p>如何拆分呢?就是在JS中调用 Android中的方法,里面可以按照索引返回集合中的对象,然后再获取对象中的属性。代码如下:</p>    <pre>  <code class="language-java">/**   * 该方法将在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()");  </code></pre>    <h3>整个Acitvity中所有的代码</h3>    <pre>  <code class="language-java">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();      }    }  </code></pre>    <h3>效果图</h3>    <p><img src="https://simg.open-open.com/show/e19bd4c0fe6c7310f5f7e981c2ff3fea.png"> 到这里我想大家就大致明白了什么意思了吧?赶紧去试试吧。</p>    <p> </p>    <p>来自:http://godcoder.me/2017/06/02/WebView 和 JS 交互,如何将 Java 对象和 List 传值给 JS/</p>    <p> </p>    
 本文由用户 bapi822 自行上传分享,仅供网友学习交流。所有权归原作者,若您的权利被侵害,请联系管理员。
 转载本站原创文章,请注明出处,并保留原始链接、图片水印。
 本站是一个以用户分享为主的开源技术平台,欢迎各类分享!
 本文地址:https://www.open-open.com/lib/view/open1496969443989.html
Java 安卓开发 Java开发 JavaScript