Android中Java和JavaScript交互

转载 2015年07月08日 14:30:18

转自:http://blog.csdn.net/ljz2009y/article/details/39926039

Android提供了一个很强大的WebView控件用来处理Web网页,而在网页中,JavaScript又是一个很举足轻重的脚本。本文将介绍如何实现Java代码和Javascript代码的相互调用。

如何实现

实现Java和js交互十分便捷。通常只需要以下几步。

  • WebView开启JavaScript脚本执行
  • WebView设置供JavaScript调用的交互接口。
  • 客户端和网页端编写调用对方的代码。

本例代码

为了便于讲解,先贴出全部代码

Java代码

lineos:false
<span class="line-number" style="font-family:inherit;color:#586e75;margin: 0px; padding: 0px; border: 0px currentColor; line-height: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; vertical-align: baseline;">1</span>
<span class="line-number" style="font-family:inherit;color:#586e75;margin: 0px; padding: 0px; border: 0px currentColor; line-height: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; vertical-align: baseline;">2</span>
<span class="line-number" style="font-family:inherit;color:#586e75;margin: 0px; padding: 0px; border: 0px currentColor; line-height: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; vertical-align: baseline;">3</span>
<span class="line-number" style="font-family:inherit;color:#586e75;margin: 0px; padding: 0px; border: 0px currentColor; line-height: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; vertical-align: baseline;">4</span>
<span class="line-number" style="font-family:inherit;color:#586e75;margin: 0px; padding: 0px; border: 0px currentColor; line-height: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; vertical-align: baseline;">5</span>
<span class="line-number" style="font-family:inherit;color:#586e75;margin: 0px; padding: 0px; border: 0px currentColor; line-height: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; vertical-align: baseline;">6</span>
<span class="line-number" style="font-family:inherit;color:#586e75;margin: 0px; padding: 0px; border: 0px currentColor; line-height: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; vertical-align: baseline;">7</span>
<span class="line-number" style="font-family:inherit;color:#586e75;margin: 0px; padding: 0px; border: 0px currentColor; line-height: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; vertical-align: baseline;">8</span>
<span class="line-number" style="font-family:inherit;color:#586e75;margin: 0px; padding: 0px; border: 0px currentColor; line-height: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; vertical-align: baseline;">9</span>
<span class="line-number" style="font-family:inherit;color:#586e75;margin: 0px; padding: 0px; border: 0px currentColor; line-height: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; vertical-align: baseline;">10</span>
<span class="line-number" style="font-family:inherit;color:#586e75;margin: 0px; padding: 0px; border: 0px currentColor; line-height: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; vertical-align: baseline;">11</span>
<span class="line-number" style="font-family:inherit;color:#586e75;margin: 0px; padding: 0px; border: 0px currentColor; line-height: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; vertical-align: baseline;">12</span>
<span class="line-number" style="font-family:inherit;color:#586e75;margin: 0px; padding: 0px; border: 0px currentColor; line-height: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; vertical-align: baseline;">13</span>
<span class="line-number" style="font-family:inherit;color:#586e75;margin: 0px; padding: 0px; border: 0px currentColor; line-height: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; vertical-align: baseline;">14</span>
<span class="line-number" style="font-family:inherit;color:#586e75;margin: 0px; padding: 0px; border: 0px currentColor; line-height: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; vertical-align: baseline;">15</span>
<span class="line-number" style="font-family:inherit;color:#586e75;margin: 0px; padding: 0px; border: 0px currentColor; line-height: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; vertical-align: baseline;">16</span>
<span class="line-number" style="font-family:inherit;color:#586e75;margin: 0px; padding: 0px; border: 0px currentColor; line-height: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; vertical-align: baseline;">17</span>
<span class="line-number" style="font-family:inherit;color:#586e75;margin: 0px; padding: 0px; border: 0px currentColor; line-height: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; vertical-align: baseline;">18</span>
<span class="line-number" style="font-family:inherit;color:#586e75;margin: 0px; padding: 0px; border: 0px currentColor; line-height: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; vertical-align: baseline;">19</span>
<span class="line-number" style="font-family:inherit;color:#586e75;margin: 0px; padding: 0px; border: 0px currentColor; line-height: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; vertical-align: baseline;">20</span>
<span class="line-number" style="font-family:inherit;color:#586e75;margin: 0px; padding: 0px; border: 0px currentColor; line-height: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; vertical-align: baseline;">21</span>
<span class="line-number" style="font-family:inherit;color:#586e75;margin: 0px; padding: 0px; border: 0px currentColor; line-height: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; vertical-align: baseline;">22</span>
<span class="line-number" style="font-family:inherit;color:#586e75;margin: 0px; padding: 0px; border: 0px currentColor; line-height: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; vertical-align: baseline;">23</span>
<span class="line-number" style="font-family:inherit;color:#586e75;margin: 0px; padding: 0px; border: 0px currentColor; line-height: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; vertical-align: baseline;">24</span>
<span class="line-number" style="font-family:inherit;color:#586e75;margin: 0px; padding: 0px; border: 0px currentColor; line-height: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; vertical-align: baseline;">25</span>
<span class="line-number" style="font-family:inherit;color:#586e75;margin: 0px; padding: 0px; border: 0px currentColor; line-height: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; vertical-align: baseline;">26</span>
<span class="line-number" style="font-family:inherit;color:#586e75;margin: 0px; padding: 0px; border: 0px currentColor; line-height: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; vertical-align: baseline;">27</span>
<span class="line-number" style="font-family:inherit;color:#586e75;margin: 0px; padding: 0px; border: 0px currentColor; line-height: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; vertical-align: baseline;">28</span>
<span class="line-number" style="font-family:inherit;color:#586e75;margin: 0px; padding: 0px; border: 0px currentColor; line-height: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; vertical-align: baseline;">29</span>
<span class="line-number" style="font-family:inherit;color:#586e75;margin: 0px; padding: 0px; border: 0px currentColor; line-height: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; vertical-align: baseline;">30</span>
<span class="line-number" style="font-family:inherit;color:#586e75;margin: 0px; padding: 0px; border: 0px currentColor; line-height: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; vertical-align: baseline;">31</span>
<span class="line-number" style="font-family:inherit;color:#586e75;margin: 0px; padding: 0px; border: 0px currentColor; line-height: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; vertical-align: baseline;">32</span>
<span class="line-number" style="font-family:inherit;color:#586e75;margin: 0px; padding: 0px; border: 0px currentColor; line-height: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; vertical-align: baseline;">33</span>
<span class="line-number" style="font-family:inherit;color:#586e75;margin: 0px; padding: 0px; border: 0px currentColor; line-height: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; vertical-align: baseline;">34</span>
<span class="line-number" style="font-family:inherit;color:#586e75;margin: 0px; padding: 0px; border: 0px currentColor; line-height: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; vertical-align: baseline;">35</span>
<span class="line-number" style="font-family:inherit;color:#586e75;margin: 0px; padding: 0px; border: 0px currentColor; line-height: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; vertical-align: baseline;">36</span>
<span class="line-number" style="font-family:inherit;color:#586e75;margin: 0px; padding: 0px; border: 0px currentColor; line-height: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; vertical-align: baseline;">37</span>
<span class="line-number" style="font-family:inherit;color:#586e75;margin: 0px; padding: 0px; border: 0px currentColor; line-height: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; vertical-align: baseline;">38</span>
<span class="line-number" style="font-family:inherit;color:#586e75;margin: 0px; padding: 0px; border: 0px currentColor; line-height: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; vertical-align: baseline;">39</span>
<span class="line-number" style="font-family:inherit;color:#586e75;margin: 0px; padding: 0px; border: 0px currentColor; line-height: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; vertical-align: baseline;">40</span>
<span class="line-number" style="font-family:inherit;color:#586e75;margin: 0px; padding: 0px; border: 0px currentColor; line-height: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; vertical-align: baseline;">41</span>
<span class="line-number" style="font-family:inherit;color:#586e75;margin: 0px; padding: 0px; border: 0px currentColor; line-height: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; vertical-align: baseline;">42</span>
<span class="line-number" style="font-family:inherit;color:#586e75;margin: 0px; padding: 0px; border: 0px currentColor; line-height: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; vertical-align: baseline;">43</span>
<span class="line-number" style="font-family:inherit;color:#586e75;margin: 0px; padding: 0px; border: 0px currentColor; line-height: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; vertical-align: baseline;">44</span>
<span class="line-number" style="font-family:inherit;color:#586e75;margin: 0px; padding: 0px; border: 0px currentColor; line-height: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; vertical-align: baseline;">45</span>
<span class="line-number" style="font-family:inherit;color:#586e75;margin: 0px; padding: 0px; border: 0px currentColor; line-height: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; vertical-align: baseline;">46</span>
<span class="line-number" style="font-family:inherit;color:#586e75;margin: 0px; padding: 0px; border: 0px currentColor; line-height: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; vertical-align: baseline;">47</span>
<span class="line-number" style="font-family:inherit;color:#586e75;margin: 0px; padding: 0px; border: 0px currentColor; line-height: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; vertical-align: baseline;">48</span>
<span class="line-number" style="font-family:inherit;color:#586e75;margin: 0px; padding: 0px; border: 0px currentColor; line-height: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; vertical-align: baseline;">49</span>
<span class="line-number" style="font-family:inherit;color:#586e75;margin: 0px; padding: 0px; border: 0px currentColor; line-height: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; vertical-align: baseline;">50</span>
<span class="line-number" style="font-family:inherit;color:#586e75;margin: 0px; padding: 0px; border: 0px currentColor; line-height: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; vertical-align: baseline;">51</span>
<span class="line-number" style="font-family:inherit;color:#586e75;margin: 0px; padding: 0px; border: 0px currentColor; line-height: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; vertical-align: baseline;">52</span>
<span class="line-number" style="font-family:inherit;color:#586e75;margin: 0px; padding: 0px; border: 0px currentColor; line-height: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; vertical-align: baseline;">53</span>
<span class="line-number" style="font-family:inherit;color:#586e75;margin: 0px; padding: 0px; border: 0px currentColor; line-height: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; vertical-align: baseline;">54</span>
<span class="line-number" style="font-family:inherit;color:#586e75;margin: 0px; padding: 0px; border: 0px currentColor; line-height: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; vertical-align: baseline;">55</span>
<span class="line-number" style="font-family:inherit;color:#586e75;margin: 0px; padding: 0px; border: 0px currentColor; line-height: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; vertical-align: baseline;">56</span>
<span class="line-number" style="font-family:inherit;color:#586e75;margin: 0px; padding: 0px; border: 0px currentColor; line-height: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; vertical-align: baseline;">57</span>
<span class="line-number" style="font-family:inherit;color:#586e75;margin: 0px; padding: 0px; border: 0px currentColor; line-height: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; vertical-align: baseline;">58</span>
<span class="line-number" style="font-family:inherit;color:#586e75;margin: 0px; padding: 0px; border: 0px currentColor; line-height: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; vertical-align: baseline;">59</span>
<span class="line-number" style="font-family:inherit;color:#586e75;margin: 0px; padding: 0px; border: 0px currentColor; line-height: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; vertical-align: baseline;">60</span>
<span class="line-number" style="font-family:inherit;color:#586e75;margin: 0px; padding: 0px; border: 0px currentColor; line-height: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; vertical-align: baseline;">61</span>
<span class="line-number" style="font-family:inherit;color:#586e75;margin: 0px; padding: 0px; border: 0px currentColor; line-height: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; vertical-align: baseline;">62</span>
<span class="line-number" style="font-family:inherit;color:#586e75;margin: 0px; padding: 0px; border: 0px currentColor; line-height: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; vertical-align: baseline;">63</span>
<span class="line-number" style="font-family:inherit;color:#586e75;margin: 0px; padding: 0px; border: 0px currentColor; line-height: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; vertical-align: baseline;">64</span>
package com.example.javajsinteractiondemo;

import android.annotation.SuppressLint;
import android.app.Activity;
import android.os.Bundle;
import android.util.Log;
import android.view.Menu;
import android.webkit.JavascriptInterface;
import android.webkit.WebChromeClient;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.Toast;

public class MainActivity extends Activity {
  private static final String LOGTAG = "MainActivity";
  @SuppressLint("JavascriptInterface")
  @Override
  protected void onCreate(Bundle savedInstanceState) {
      super.onCreate(savedInstanceState);
      setContentView(R.layout.activity_main);
      final WebView myWebView = (WebView) findViewById(R.id.myWebView);
      WebSettings settings = myWebView.getSettings();
      settings.setJavaScriptEnabled(true);
      myWebView.addJavascriptInterface(new JsInteration(), "control");
      myWebView.setWebChromeClient(new WebChromeClient() {});
      myWebView.setWebViewClient(new WebViewClient() {

          @Override
          public void onPageFinished(WebView view, String url) {
              super.onPageFinished(view, url);
              testMethod(myWebView);
          }
          
      });
      myWebView.loadUrl("file:///android_asset/js_java_interaction.html");
  }
  
  private void testMethod(WebView webView) {
      String call = "javascript:sayHello()";
      
      call = "javascript:alertMessage(\"" + "content" + "\")";
      
      call = "javascript:toastMessage(\"" + "content" + "\")";
      
      call = "javascript:sumToJava(1,2)";
      webView.loadUrl(call);
      
  }
  
  public class JsInteration {
      
      @JavascriptInterface
      public void toastMessage(String message) {
          Toast.makeText(getApplicationContext(), message, Toast.LENGTH_LONG).show();
      }
      
      @JavascriptInterface
      public void onSumResult(int result) {
          Log.i(LOGTAG, "onSumResult result=" + result);
      }
  }

}

前端网页代码

lineos:false js_java_interaction.html
<span class="line-number" style="font-family:inherit;color:#586e75;margin: 0px; padding: 0px; border: 0px currentColor; line-height: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; vertical-align: baseline;">1</span>
<span class="line-number" style="font-family:inherit;color:#586e75;margin: 0px; padding: 0px; border: 0px currentColor; line-height: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; vertical-align: baseline;">2</span>
<span class="line-number" style="font-family:inherit;color:#586e75;margin: 0px; padding: 0px; border: 0px currentColor; line-height: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; vertical-align: baseline;">3</span>
<span class="line-number" style="font-family:inherit;color:#586e75;margin: 0px; padding: 0px; border: 0px currentColor; line-height: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; vertical-align: baseline;">4</span>
<span class="line-number" style="font-family:inherit;color:#586e75;margin: 0px; padding: 0px; border: 0px currentColor; line-height: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; vertical-align: baseline;">5</span>
<span class="line-number" style="font-family:inherit;color:#586e75;margin: 0px; padding: 0px; border: 0px currentColor; line-height: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; vertical-align: baseline;">6</span>
<span class="line-number" style="font-family:inherit;color:#586e75;margin: 0px; padding: 0px; border: 0px currentColor; line-height: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; vertical-align: baseline;">7</span>
<span class="line-number" style="font-family:inherit;color:#586e75;margin: 0px; padding: 0px; border: 0px currentColor; line-height: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; vertical-align: baseline;">8</span>
<span class="line-number" style="font-family:inherit;color:#586e75;margin: 0px; padding: 0px; border: 0px currentColor; line-height: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; vertical-align: baseline;">9</span>
<span class="line-number" style="font-family:inherit;color:#586e75;margin: 0px; padding: 0px; border: 0px currentColor; line-height: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; vertical-align: baseline;">10</span>
<span class="line-number" style="font-family:inherit;color:#586e75;margin: 0px; padding: 0px; border: 0px currentColor; line-height: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; vertical-align: baseline;">11</span>
<span class="line-number" style="font-family:inherit;color:#586e75;margin: 0px; padding: 0px; border: 0px currentColor; line-height: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; vertical-align: baseline;">12</span>
<span class="line-number" style="font-family:inherit;color:#586e75;margin: 0px; padding: 0px; border: 0px currentColor; line-height: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; vertical-align: baseline;">13</span>
<span class="line-number" style="font-family:inherit;color:#586e75;margin: 0px; padding: 0px; border: 0px currentColor; line-height: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; vertical-align: baseline;">14</span>
<span class="line-number" style="font-family:inherit;color:#586e75;margin: 0px; padding: 0px; border: 0px currentColor; line-height: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; vertical-align: baseline;">15</span>
<span class="line-number" style="font-family:inherit;color:#586e75;margin: 0px; padding: 0px; border: 0px currentColor; line-height: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; vertical-align: baseline;">16</span>
<span class="line-number" style="font-family:inherit;color:#586e75;margin: 0px; padding: 0px; border: 0px currentColor; line-height: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; vertical-align: baseline;">17</span>
<span class="line-number" style="font-family:inherit;color:#586e75;margin: 0px; padding: 0px; border: 0px currentColor; line-height: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; vertical-align: baseline;">18</span>
<span class="line-number" style="font-family:inherit;color:#586e75;margin: 0px; padding: 0px; border: 0px currentColor; line-height: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; vertical-align: baseline;">19</span>
<span class="line-number" style="font-family:inherit;color:#586e75;margin: 0px; padding: 0px; border: 0px currentColor; line-height: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; vertical-align: baseline;">20</span>
<html>
<script type="text/javascript">
    function sayHello() {
        alert("Hello")
    }

    function alertMessage(message) {
        alert(message)
    }

    function toastMessage(message) {
        window.control.toastMessage(message)
    }

    function sumToJava(number1, number2){
       window.control.onSumResult(number1 + number2)
    }
</script>
Java-Javascript Interaction In Android
</html>

调用示例

js调用Java

调用格式为window.jsInterfaceName.methodName(parameterValues) 此例中我们使用的是control作为注入接口名称。

lineos:false
<span class="line-number" style="font-family:inherit;color:#586e75;margin: 0px; padding: 0px; border: 0px currentColor; line-height: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; vertical-align: baseline;">1</span>
<span class="line-number" style="font-family:inherit;color:#586e75;margin: 0px; padding: 0px; border: 0px currentColor; line-height: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; vertical-align: baseline;">2</span>
<span class="line-number" style="font-family:inherit;color:#586e75;margin: 0px; padding: 0px; border: 0px currentColor; line-height: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; vertical-align: baseline;">3</span>
<span class="line-number" style="font-family:inherit;color:#586e75;margin: 0px; padding: 0px; border: 0px currentColor; line-height: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; vertical-align: baseline;">4</span>
<span class="line-number" style="font-family:inherit;color:#586e75;margin: 0px; padding: 0px; border: 0px currentColor; line-height: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; vertical-align: baseline;">5</span>
<span class="line-number" style="font-family:inherit;color:#586e75;margin: 0px; padding: 0px; border: 0px currentColor; line-height: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; vertical-align: baseline;">6</span>
<span class="line-number" style="font-family:inherit;color:#586e75;margin: 0px; padding: 0px; border: 0px currentColor; line-height: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; vertical-align: baseline;">7</span>
function toastMessage(message) {
  window.control.toastMessage(message)
}

function sumToJava(number1, number2){
   window.control.onSumResult(number1 + number2)
}

Java调用JS

webView调用js的基本格式为webView.loadUrl(“javascript:methodName(parameterValues)”)

调用js无参无返回值函数

lineos:false
<span class="line-number" style="font-family:inherit;color:#586e75;margin: 0px; padding: 0px; border: 0px currentColor; line-height: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; vertical-align: baseline;">1</span>
<span class="line-number" style="font-family:inherit;color:#586e75;margin: 0px; padding: 0px; border: 0px currentColor; line-height: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; vertical-align: baseline;">2</span>
String call = "javascript:sayHello()";
webView.loadUrl(call);

调用js有参无返回值函数

注意对于字符串作为参数值需要进行转义双引号。

lineos:false
<span class="line-number" style="font-family:inherit;color:#586e75;margin: 0px; padding: 0px; border: 0px currentColor; line-height: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; vertical-align: baseline;">1</span>
<span class="line-number" style="font-family:inherit;color:#586e75;margin: 0px; padding: 0px; border: 0px currentColor; line-height: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; vertical-align: baseline;">2</span>
String call = "javascript:alertMessage(\"" + "content" + "\")";
webView.loadUrl(call);

调用js有参数有返回值的函数

Android在4.4之前并没有提供直接调用js函数并获取值的方法,所以在此之前,常用的思路是 java调用js方法,js方法执行完毕,再次调用java代码将值返回。

1.Java调用js代码
lineos:false
<span class="line-number" style="font-family:inherit;color:#586e75;margin: 0px; padding: 0px; border: 0px currentColor; line-height: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; vertical-align: baseline;">1</span>
<span class="line-number" style="font-family:inherit;color:#586e75;margin: 0px; padding: 0px; border: 0px currentColor; line-height: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; vertical-align: baseline;">2</span>
String call = "javascript:sumToJava(1,2)";
webView.loadUrl(call);
2.js函数处理,并将结果通过调用java方法返回
lineos:false
<span class="line-number" style="font-family:inherit;color:#586e75;margin: 0px; padding: 0px; border: 0px currentColor; line-height: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; vertical-align: baseline;">1</span>
<span class="line-number" style="font-family:inherit;color:#586e75;margin: 0px; padding: 0px; border: 0px currentColor; line-height: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; vertical-align: baseline;">2</span>
<span class="line-number" style="font-family:inherit;color:#586e75;margin: 0px; padding: 0px; border: 0px currentColor; line-height: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; vertical-align: baseline;">3</span>
function sumToJava(number1, number2){
       window.control.onSumResult(number1 + number2)
}
3.Java在回调方法中获取js函数返回值
lineos:false
<span class="line-number" style="font-family:inherit;color:#586e75;margin: 0px; padding: 0px; border: 0px currentColor; line-height: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; vertical-align: baseline;">1</span>
<span class="line-number" style="font-family:inherit;color:#586e75;margin: 0px; padding: 0px; border: 0px currentColor; line-height: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; vertical-align: baseline;">2</span>
<span class="line-number" style="font-family:inherit;color:#586e75;margin: 0px; padding: 0px; border: 0px currentColor; line-height: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; vertical-align: baseline;">3</span>
<span class="line-number" style="font-family:inherit;color:#586e75;margin: 0px; padding: 0px; border: 0px currentColor; line-height: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; vertical-align: baseline;">4</span>
@JavascriptInterface
public void onSumResult(int result) {
  Log.i(LOGTAG, "onSumResult result=" + result);
}

4.4处理

Android 4.4之后使用evaluateJavascript即可。这里展示一个简单的交互示例 具有返回值的js方法

lineos:false
<span class="line-number" style="font-family:inherit;color:#586e75;margin: 0px; padding: 0px; border: 0px currentColor; line-height: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; vertical-align: baseline;">1</span>
<span class="line-number" style="font-family:inherit;color:#586e75;margin: 0px; padding: 0px; border: 0px currentColor; line-height: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; vertical-align: baseline;">2</span>
<span class="line-number" style="font-family:inherit;color:#586e75;margin: 0px; padding: 0px; border: 0px currentColor; line-height: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; vertical-align: baseline;">3</span>
function getGreetings() {
      return 1;
}

java代码时用evaluateJavascript方法调用

lineos:false
<span class="line-number" style="font-family:inherit;color:#586e75;margin: 0px; padding: 0px; border: 0px currentColor; line-height: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; vertical-align: baseline;">1</span>
<span class="line-number" style="font-family:inherit;color:#586e75;margin: 0px; padding: 0px; border: 0px currentColor; line-height: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; vertical-align: baseline;">2</span>
<span class="line-number" style="font-family:inherit;color:#586e75;margin: 0px; padding: 0px; border: 0px currentColor; line-height: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; vertical-align: baseline;">3</span>
<span class="line-number" style="font-family:inherit;color:#586e75;margin: 0px; padding: 0px; border: 0px currentColor; line-height: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; vertical-align: baseline;">4</span>
<span class="line-number" style="font-family:inherit;color:#586e75;margin: 0px; padding: 0px; border: 0px currentColor; line-height: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; vertical-align: baseline;">5</span>
<span class="line-number" style="font-family:inherit;color:#586e75;margin: 0px; padding: 0px; border: 0px currentColor; line-height: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; vertical-align: baseline;">6</span>
<span class="line-number" style="font-family:inherit;color:#586e75;margin: 0px; padding: 0px; border: 0px currentColor; line-height: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; vertical-align: baseline;">7</span>
<span class="line-number" style="font-family:inherit;color:#586e75;margin: 0px; padding: 0px; border: 0px currentColor; line-height: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; vertical-align: baseline;">8</span>
private void testEvaluateJavascript(WebView webView) {
  webView.evaluateJavascript("getGreetings()", new ValueCallback<String>() {

  @Override
  public void onReceiveValue(String value) {
      Log.i(LOGTAG, "onReceiveValue value=" + value);
  }});
}

输出结果

lineos:false
<span class="line-number" style="font-family:inherit;color:#586e75;margin: 0px; padding: 0px; border: 0px currentColor; line-height: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; vertical-align: baseline;">1</span>
I/MainActivity( 1432): onReceiveValue value=1

注意

  • 上面限定了结果返回结果为String,对于简单的类型会尝试转换成字符串返回,对于复杂的数据类型,建议以字符串形式的json返回。
  • evaluateJavascript方法必须在UI线程(主线程)调用,因此onReceiveValue也执行在主线程。

疑问解答

Alert无法弹出

你应该是没有设置WebChromeClient,按照以下代码设置

<span class="line-number" style="font-family:inherit;color:#586e75;margin: 0px; padding: 0px; border: 0px currentColor; line-height: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; vertical-align: baseline;">1</span>
myWebView.setWebChromeClient(new WebChromeClient() {});

Uncaught ReferenceError: functionName is not defined

问题出现原因,网页的js代码没有加载完成,就调用了js方法。解决方法是在网页加载完成之后调用js方法

fileos:false
<span class="line-number" style="font-family:inherit;color:#586e75;margin: 0px; padding: 0px; border: 0px currentColor; line-height: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; vertical-align: baseline;">1</span>
<span class="line-number" style="font-family:inherit;color:#586e75;margin: 0px; padding: 0px; border: 0px currentColor; line-height: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; vertical-align: baseline;">2</span>
<span class="line-number" style="font-family:inherit;color:#586e75;margin: 0px; padding: 0px; border: 0px currentColor; line-height: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; vertical-align: baseline;">3</span>
<span class="line-number" style="font-family:inherit;color:#586e75;margin: 0px; padding: 0px; border: 0px currentColor; line-height: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; vertical-align: baseline;">4</span>
<span class="line-number" style="font-family:inherit;color:#586e75;margin: 0px; padding: 0px; border: 0px currentColor; line-height: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; vertical-align: baseline;">5</span>
<span class="line-number" style="font-family:inherit;color:#586e75;margin: 0px; padding: 0px; border: 0px currentColor; line-height: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; vertical-align: baseline;">6</span>
<span class="line-number" style="font-family:inherit;color:#586e75;margin: 0px; padding: 0px; border: 0px currentColor; line-height: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; vertical-align: baseline;">7</span>
<span class="line-number" style="font-family:inherit;color:#586e75;margin: 0px; padding: 0px; border: 0px currentColor; line-height: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; vertical-align: baseline;">8</span>
<span class="line-number" style="font-family:inherit;color:#586e75;margin: 0px; padding: 0px; border: 0px currentColor; line-height: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; vertical-align: baseline;">9</span>
myWebView.setWebViewClient(new WebViewClient() {

  @Override
  public void onPageFinished(WebView view, String url) {
      super.onPageFinished(view, url);
      //在这里执行你想调用的js函数
  }
  
});

Uncaught TypeError: Object [object Object] has no method

安全限制问题

如果只在4.2版本以上的机器出问题,那么就是系统处于安全限制的问题了。Android文档这样说的

Caution: If you’ve set your targetSdkVersion to 17 or higher, you must add the @JavascriptInterface annotation to any method that you want available your web page code (the method must also be public). If you do not provide the annotation, then the method will not accessible by your web page when running on Android 4.2 or higher.

中文大意为

警告:如果你的程序目标平台是17或者是更高,你必须要在暴露给网页可调用的方法(这个方法必须是公开的)加上@JavascriptInterface注释。如果你不这样做的话,在4.2以以后的平台上,网页无法访问到你的方法。

两种解决方法
  • 将targetSdkVersion设置成17或更高,引入@JavascriptInterface注释
  • 自己创建一个注释接口名字为@JavascriptInterface,然后将其引入。注意这个接口不能混淆。

注,创建@JavascriptInterface代码

lineos:false
<span class="line-number" style="font-family:inherit;color:#586e75;margin: 0px; padding: 0px; border: 0px currentColor; line-height: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; vertical-align: baseline;">1</span>
<span class="line-number" style="font-family:inherit;color:#586e75;margin: 0px; padding: 0px; border: 0px currentColor; line-height: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; vertical-align: baseline;">2</span>
<span class="line-number" style="font-family:inherit;color:#586e75;margin: 0px; padding: 0px; border: 0px currentColor; line-height: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; vertical-align: baseline;">3</span>
public @interface JavascriptInterface {

}

代码混淆问题

如果在没有混淆的版本运行正常,在混淆后的版本的代码运行错误,并提示Uncaught TypeError: Object [object Object] has no method,那就是你没有做混淆例外处理。 在混淆文件加入类似这样的代码

lineos:false
<span class="line-number" style="font-family:inherit;color:#586e75;margin: 0px; padding: 0px; border: 0px currentColor; line-height: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; vertical-align: baseline;">1</span>
<span class="line-number" style="font-family:inherit;color:#586e75;margin: 0px; padding: 0px; border: 0px currentColor; line-height: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; vertical-align: baseline;">2</span>
<span class="line-number" style="font-family:inherit;color:#586e75;margin: 0px; padding: 0px; border: 0px currentColor; line-height: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; vertical-align: baseline;">3</span>
-keep class com.example.javajsinteractiondemo$JsInteration {
    *;
}

All WebView methods must be called on the same thread

过滤日志曾发现过这个问题。

lineos:false
<span class="line-number" style="font-family:inherit;color:#586e75;margin: 0px; padding: 0px; border: 0px currentColor; line-height: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; vertical-align: baseline;">1</span>
<span class="line-number" style="font-family:inherit;color:#586e75;margin: 0px; padding: 0px; border: 0px currentColor; line-height: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; vertical-align: baseline;">2</span>
<span class="line-number" style="font-family:inherit;color:#586e75;margin: 0px; padding: 0px; border: 0px currentColor; line-height: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; vertical-align: baseline;">3</span>
<span class="line-number" style="font-family:inherit;color:#586e75;margin: 0px; padding: 0px; border: 0px currentColor; line-height: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; vertical-align: baseline;">4</span>
<span class="line-number" style="font-family:inherit;color:#586e75;margin: 0px; padding: 0px; border: 0px currentColor; line-height: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; vertical-align: baseline;">5</span>
<span class="line-number" style="font-family:inherit;color:#586e75;margin: 0px; padding: 0px; border: 0px currentColor; line-height: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; vertical-align: baseline;">6</span>
<span class="line-number" style="font-family:inherit;color:#586e75;margin: 0px; padding: 0px; border: 0px currentColor; line-height: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; vertical-align: baseline;">7</span>
<span class="line-number" style="font-family:inherit;color:#586e75;margin: 0px; padding: 0px; border: 0px currentColor; line-height: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; vertical-align: baseline;">8</span>
<span class="line-number" style="font-family:inherit;color:#586e75;margin: 0px; padding: 0px; border: 0px currentColor; line-height: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; vertical-align: baseline;">9</span>
E/StrictMode( 1546): java.lang.Throwable: A WebView method was called on thread 'JavaBridge'. All WebView methods must be called on the same thread. (Expected Looper Looper (main, tid 1) {528712d4} called on Looper (JavaBridge, tid 121) {52b6678c}, FYI main Looper is Looper (main, tid 1) {528712d4})
E/StrictMode( 1546):   at android.webkit.WebView.checkThread(WebView.java:2063)
E/StrictMode( 1546):   at android.webkit.WebView.loadUrl(WebView.java:794)
E/StrictMode( 1546):   at com.xxx.xxxx.xxxx.xxxx.xxxxxxx$JavaScriptInterface.onCanGoBackResult(xxxx.java:96)
E/StrictMode( 1546):   at com.android.org.chromium.base.SystemMessageHandler.nativeDoRunLoopOnce(Native Method)
E/StrictMode( 1546):   at com.android.org.chromium.base.SystemMessageHandler.handleMessage(SystemMessageHandler.java:27)
E/StrictMode( 1546):   at android.os.Handler.dispatchMessage(Handler.java:102)
E/StrictMode( 1546):   at android.os.Looper.loop(Looper.java:136)
E/StrictMode( 1546):   at android.os.HandlerThread.run(HandlerThread.java:61)

在js调用后的Java回调线程并不是主线程。如打印日志可验证

lineos:false
<span class="line-number" style="font-family:inherit;color:#586e75;margin: 0px; padding: 0px; border: 0px currentColor; line-height: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; vertical-align: baseline;">1</span>
ThreadInfo=Thread[WebViewCoreThread,5,main]

解决上述的异常,将webview操作放在主线程中即可。

<span class="line-number" style="font-family:inherit;color:#586e75;margin: 0px; padding: 0px; border: 0px currentColor; line-height: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; vertical-align: baseline;">1</span>
<span class="line-number" style="font-family:inherit;color:#586e75;margin: 0px; padding: 0px; border: 0px currentColor; line-height: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; vertical-align: baseline;">2</span>
<span class="line-number" style="font-family:inherit;color:#586e75;margin: 0px; padding: 0px; border: 0px currentColor; line-height: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; vertical-align: baseline;">3</span>
<span class="line-number" style="font-family:inherit;color:#586e75;margin: 0px; padding: 0px; border: 0px currentColor; line-height: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; vertical-align: baseline;">4</span>
<span class="line-number" style="font-family:inherit;color:#586e75;margin: 0px; padding: 0px; border: 0px currentColor; line-height: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; vertical-align: baseline;">5</span>
<span class="line-number" style="font-family:inherit;color:#586e75;margin: 0px; padding: 0px; border: 0px currentColor; line-height: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; vertical-align: baseline;">6</span>
webView.post(new Runnable() {
    @Override
    public void run() {
        webView.loadUrl(YOUR_URL).
    }
});

简单的实现 Js和java交互

效果:点击img标签实现图片的交替显示,实现需要懂点js,哈哈。 //上代码 public class MainActivity extends AppCompatActivity { ...
  • u011057161
  • u011057161
  • 2016年10月17日 18:23
  • 5038

安卓混合开发实例——JS与Java的交互

今天说说安卓混合开发。 曾经有一个话题是web终会一统app,然后我们看到随着时间的推移。web越来越强大(H5啊,JS各种框架啊),但同时原生app也在不断发展。 或许在将来还会再有这种话题论战...
  • lebang08
  • lebang08
  • 2016年10月18日 13:42
  • 1665

本地java代码和javascript进行交互(java和js互调)

  • YANGWEIQIAO
  • YANGWEIQIAO
  • 2016年10月02日 22:26
  • 2411

Android WebView使用以及与JavaScript进行交互实例

最近项目中使用到了WebView,所有就深入研究了Webview的使用以及与JavaScript进行交互的问题。经过研究,自己也做了一个综合性的例子,以此来记录自己的学习成果。此例子主要实现了WebV...
  • dongdengke123789
  • dongdengke123789
  • 2016年11月24日 11:24
  • 681

Android WebView中客户端与JavaScript的基本交互

前言WebView就不向大家介绍了,如果WebView都没了解的小伙伴可以先去看看其他类似关于WebView的使用。这次我们主要是讲一讲Android中当你的App中使用WebView的时候怎么和它去...
  • qq_25867141
  • qq_25867141
  • 2016年02月26日 17:15
  • 2453

android与js交互的方式(包括三种)

关于android月js或者说html交互的方式,在很早的版本中是通过android端添加js支持,然后传递一个js操作本地方法的对象,然后就可以调用本地的方法。在后边的版本为了统一管理,添加了@Ja...
  • u012808234
  • u012808234
  • 2016年12月12日 17:11
  • 616

WebView使用与JavaScript交互详解(附完整Demo代码)

最近项目中需要用到与HTML5交互,也就是WebView的使用,与JS的交互肯定必不可少.开始写项目之前写了个测试Demo,成功完成了Java与JS的相互调用.先看效果图 下面上完整代码: 首先在...
  • liuxu841911548
  • liuxu841911548
  • 2017年02月07日 16:03
  • 883

Android之利用JSBridge库实现Html,JavaScript与Android的所有交互

java 和 js互通框架 WebViewJavascriptBridge是移动UIView和Html交互通信的桥梁,用作者的话来说就是实现java和js的互相调用的桥梁。 替代了WebView的自带...
  • DickyQie
  • DickyQie
  • 2017年04月18日 10:49
  • 736

VC与JavaScript交互(一) ———— 如何实现

为什么要让VC与JavaScript交互? 在Windows平台上用VC开发的程序,如何与JavaScript交互? 关于WebBrowser: 关于IDispatch: 说了这么多COM对象,和VC...
  • CharlesSimonyi
  • CharlesSimonyi
  • 2014年01月18日 15:35
  • 18087

java与js交互,相互调用传参

前言随着前端技术的发展与H5的广泛使用,移动端采用native+h5的方式越来越多了,对于Android来说就涉及到java与js的交互,相互调用传参等。下面就来看一下java与js交互的简单demo...
  • qq_27942511
  • qq_27942511
  • 2017年04月25日 17:02
  • 759
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Android中Java和JavaScript交互
举报原因:
原因补充:

(最多只允许输入30个字)