当前位置:  首页  >  PHP资讯  >  业界资讯

详解WebView与JS交互传值问题

这篇文章主要介绍了详解WebView与JS交互传值问题的相关资料,需要的朋友可以参考下

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

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

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

html 文件

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

      

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

      

List传值测试

拆分传值

如何拆分呢?就是在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 list = new ArrayList(); @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(); } } 

效果图

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

内容推荐:免费高清PNG素材下载
吐了个 "CAO" !
扫码关注 PHP1 官方微信号
PHP1.CN | 中国最专业的PHP中文社区 | PNG素材下载 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved PHP1.CN 第一PHP社区 版权所有 京ICP备19059560号-4