WebView 和 JS 交互,如何将 Java 对象和 List 传值给 JS
2017-06-12 13:37
423 查看
随着混合开发模式比较流行,很多时候,我们需要在原生的基础上,使用 WebView 加载网页,这样控制更加方便。今天我们来看看,如何将 Java 对象 和 List 集合传值给 JS 调用。
其实将我们在 Android 原生中将 Java 对象实例传值给 JS 承认并且可以使用的对象,方法非常简单。我们来举个例子。
html 文件
我们在本地写了一个 html 文件,放在 assets 目录中。<!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>
看到 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
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;
}
}
看到我们实体类 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()函数方法。
其实按道理来说,是不可以将List集合直接传值给 JS 使用,但是既然对象可以传值,JS 可以调用 java 对象,也可以调用 Android 中的方法,那我们就一拆分的形式传过去。
Html 文件<!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>
拆分传值
如何拆分呢?就是在JS中调用 Android中的方法,里面可以按照索引返回集合中的对象,然后再获取对象中的属性。代码如下:/**
* 该方法将在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()");
这里我想大家就大致明白了什么意思了吧?赶紧去试试吧。
如何将 Java 对象实例传值给 JS
其实将我们在 Android 原生中将 Java 对象实例传值给 JS 承认并且可以使用的对象,方法非常简单。我们来举个例子。html 文件
我们在本地写了一个 html 文件,放在 assets 目录中。<!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>
看到 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
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;
}
}
看到我们实体类 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>
<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>
拆分传值
如何拆分呢?就是在JS中调用 Android中的方法,里面可以按照索引返回集合中的对象,然后再获取对象中的属性。代码如下:/**
* 该方法将在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()");
整个Acitvity中所有的代码
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(); } }
效果图
这里我想大家就大致明白了什么意思了吧?赶紧去试试吧。
相关文章推荐
- WebView 和 JS 交互,如何将 Java 对象和 List 传值给 JS ?
- andorid利用webview实现java和js交互
- android webview js交互 第一节 (java和js交互)
- 在WebView中如何让JS与Java安全地互相调用
- android webview js交互 第一节 (java和js交互)
- android webview js交互 第一节 (java和js交互)
- 在WebView中如何让JS与Java安全地互相调用
- HTML---android webview组件如何使用 Webview与js交互
- 在WebView中如何让JS与Java安全地互相调用
- android webView js方法和java 方法交互
- JS调Native:(1)拦截url:WebViewClient.shouldOverrideUrlLoading (2)绑定Java对象:WebView.addJavascriptInterface
- android webview js交互 第一节 (java和js交互)
- 在WebView中如何让JS与Java安全地互相调用
- 4.2以上版本的sdk使用webview js和java代码交互必须加注解才能生效
- Android WebView JS不能调用Java对象的问题
- 如何在WebView中让JS与Java安全地相互调用
- webview js 与java代码交互问题(成员变量名 和方法名不能重名 啃爹啊)
- android webview的 一些设置(js java交互)
- android webview js交互 第一节 (java和js交互)
- 在WebView中如何让JS与Java安全地互相调用