詳解WebView與JS交互傳值問(wèn)題

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

成都創(chuàng)新互聯(lián)是一家專注于成都網(wǎng)站設(shè)計(jì)、成都網(wǎng)站建設(shè)與策劃設(shè)計(jì),西盟網(wǎng)站建設(shè)哪家好?成都創(chuàng)新互聯(lián)做網(wǎng)站,專注于網(wǎng)站建設(shè)10余年,網(wǎng)設(shè)計(jì)領(lǐng)域的專業(yè)建站公司;建站業(yè)務(wù)涵蓋:西盟等地區(qū)。西盟做網(wǎng)站價(jià)格咨詢:18980820575

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

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

html 文件

我們?cè)诒镜貙?xiě)了一個(gè) html 文件，放在 assets 目錄中。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>測(cè)試</title>
  <h2 id="name" ></h2>
  <h2 id="age"></h2>
  <h2 id="sex"></h2>
  <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ì)象

來(lái)，看看，我們是如何創(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í)按道理來(lái)說(shuō)，是不可以將List集合直接傳值給 JS 使用，但是既然對(duì)象可以傳值，JS 可以調(diào)用 java 對(duì)象，也可以調(diào)用 Android 中的方法，那我們就一拆分的形式傳過(guò)去。

Html 文件

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>測(cè)試</title>
  <h2 id="name" ></h2>
  <h2 id="age"></h2>
  <h2 id="sex"></h2>

  <h2>List傳值測(cè)試</h2>
  <h2 id="name1" ></h2>
  <h2 id="age1"></h2>
  <h2 id="sex1"></h2>
  <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腳本中，通過(guò)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腳本中，通過(guò)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 交互傳值問(wèn)題

感謝閱讀，希望能幫助到大家，謝謝大家對(duì)本站的支持！

文章標(biāo)題：詳解WebView與JS交互傳值問(wèn)題
文章路徑：http://muchs.cn/article46/gpjieg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站收錄、全網(wǎng)營(yíng)銷推廣、域名注冊(cè)、電子商務(wù)、移動(dòng)網(wǎng)站建設(shè)、關(guān)鍵詞優(yōu)化

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)

成都網(wǎng)站建設(shè)公司