詳解 WebView 與 JS 交互傳值問題

2019-10-22 18:35:24

字體：大中小

供稿：網(wǎng)友

隨著混合開發(fā)模式比較流行，很多時(shí)候，我們需要在原生的基礎(chǔ)上，使用 WebView 加載網(wǎng)頁，這樣控制更加方便。今天我們來看看，如何將 Java 對(duì)象和 List 集合傳值給 JS 調(diào)用。

如何將 Java 對(duì)象實(shí)例傳值給 JS

其實(shí)將我們?cè)?Android 原生中將 Java 對(duì)象實(shí)例傳值給 JS 承認(rèn)并且可以使用的對(duì)象，方法非常簡(jiǎn)單。我們來舉個(gè)例子。

html 文件

我們?cè)诒镜貙懥艘粋€(gè) html 文件，放在 assets 目錄中。

<!DOCTYPE html><html><head>  <meta charset="utf-8">  <title>測(cè)試</title>  <h1 id="name" ></h1>  <h1 id="age"></h1>  <h1 id="sex"></h1>  <script>  // Android需要調(diào)用的方法  function callJS(){   document.getElementById("age").innerHTML=person.getAge();   document.getElementById("name").innerHTML=person.getName();   document.getElementById("sex").innerHTML=person.getSex();  }  </script></head></html>

看到 callJS() 函數(shù)中的 person 了嗎？它就是我們傳值進(jìn)行的 Java 對(duì)象實(shí)例。直接就可以使用，獲取了年齡，名字，和性別屬性。那我們?cè)撊绾温暶髟搶?duì)象，才會(huì)被 JS 所承認(rèn)呢？

Java 對(duì)象

來，看看，我們是如何創(chuàng)建 Person 這個(gè)實(shí)體類的。代碼如下：

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;  }}

看到我們實(shí)體類 Person 中每個(gè)get方法的上面有一個(gè) @JavascriptInterface 的注解了嗎？它的意思就是告訴 JS ，這個(gè)可以用，所以我們?cè)?Html 文件中，使用 person.get()對(duì)應(yīng)的方法，可以獲取到內(nèi)容。

在 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 對(duì)象 p 給 webview 為 person，在 JS 調(diào)用的時(shí)候，對(duì)應(yīng)的就是 person 。

wv.loadUrl(“JavaScript:callJS()”);這句話的意思就是：調(diào)用JS中的方法 callJS()函數(shù)方法。

Java List如何傳給 JS 呢？

其實(shí)按道理來說，是不可以將List集合直接傳值給 JS 使用，但是既然對(duì)象可以傳值，JS 可以調(diào)用 java 對(duì)象，也可以調(diào)用 Android 中的方法，那我們就一拆分的形式傳過去。

Html 文件

<!DOCTYPE html><html><head>  <meta charset="utf-8">  <title>測(cè)試</title>  <h1 id="name" ></h1>  <h1 id="age"></h1>  <h1 id="sex"></h1>  <h1>List傳值測(cè)試</h1>  <h1 id="name1" ></h1>  <h1 id="age1"></h1>  <h1 id="sex1"></h1>  <script>  // Android需要調(diào)用的方法  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中調(diào)用 Android中的方法，里面可以按照索引返回集合中的對(duì)象，然后再獲取對(duì)象中的屬性。代碼如下：

 /**   * 該方法將在js腳本中，通過window.javatojs.....()進(jìn)行調(diào)用   *   * @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()");

整個(gè)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);//適應(yīng)分辨率    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.....()進(jìn)行調(diào)用   *   * @return   */  @JavascriptInterface  public Person getPersonObject(int index) {    return list.get(index);  }  @JavascriptInterface  public int getSize() {    return list.size();  }}

效果圖

WebView,與,JS,交互傳值,Android,與JS,傳值