详解 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();
}
}
效果图
感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！