WebView 和 JS 交互，如何將 Java 對象和 List 傳值給 JS ？
隨著混合開發模式比較流行，很多時候，我們需要在原生的基礎上，使用 WebView 加載網頁，這樣控制更加方便。今天我們來看看，如何將 Java 對象 和 List 集合傳值給 JS 調用。
如何將 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();
}
}
效果圖
到這里我想大家就大致明白了什么意思了吧？趕緊去試試吧。
來自：http://godcoder.me/2017/06/02/WebView 和 JS 交互，如何將 Java 對象和 List 傳值給 JS/