这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
这篇文章主要介绍了详解 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();
- }
- }
效果图
来源: http://www.phperz.com/article/17/0719/336139.html