webview与JavaScript之间的交互

据说WebView的强大之处就是能和JavaScript进行交互调用。

参考博客：http://droidyue.com/blog/2014/09/20/interaction-between-java-and-javascript-in-android/

java调用JavaScript

实例化webview，获得WebSettings。通过WebSettings设置可以和JavaScript交互。

        myWebView = (WebView) findViewById(R.id.webview);
        WebSettings webSettings = myWebView.getSettings();
        // 使能使用JavaScript
        webSettings.setJavaScriptEnabled(true);

设置webview的 WebViewClient，重写onPageFinished方法。设置当网页加载完后去调用网页中JavaScript。

        myWebView.setWebViewClient(new WebViewClient() {

            @Override
            public void onPageFinished(WebView view, String url) {
                //当page也加载完后
                super.onPageFinished(view, url);
                javaUseJavaScript(myWebView);
            }

        });
        myWebView.loadUrl("file:///android_asset/js_java_interaction.html");

实现第二步里自定义的javaUseJavaScript方法。

    /**
     * java调用js方法
     * 
     * @param webView
     */
    private void javaUseJavaScript(WebView webView) {
        String call = "javascript:sayHello()";

        // call = "javascript:alertMessage("" + "content" + "")";
        //
        // call = "javascript:toastMessage("" + "content" + "")";
        //
        // call = "javascript:sumToJava(1,2)";
        webView.loadUrl(call);
    }

完成了上面的步骤，就能调用JavaScript中sayHello()方法。sayHello方法在哪呢？？就在你myWebView.loadUrl("file:///android_asset/js_java_interaction.html");的html文件中

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

总结：的从上面的代码可以看出，java调js的代码中，java可以给js传递参数，但无法获得返回值。如果必须要返回值，只能反过来通过js调用java。也就是我们下面说的：

JavaScript调用Java

编写JavaScript代码去调用java中的方法。其实在java调用JavaScript的第三步的html中我们已经调用了。（绿色部分）
在java中编写代码，响应JavaScript的调用。

2.1给webview添加JavaScript接口类

myWebView.addJavascriptInterface(new JsInteration(), "control");

2.2编写JavaScript的接口类 JsInteration

  /**
     * 实现js调用java的具体代码
     * @author cyq
     *
     */
    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(TAG, "onSumResult result=" + result);
        }
    }

总结：js调用java代码就是window.在addJavascriptInterface设置的第二个字符参数.在addJavascriptInterface这第一个参数类里的方法.(参数1，参数2.....).
注意：

1要调用WebView的addJavascriptInterface方法。在JavaScript的接口类中的方法前要加上@JavascriptInterface注解。

2html文件要放到Android项目的assets文件夹下：

3 调用JavaScript要在加载完网页之后，就是WebViewClient的onPageFinished方法中。

4 WebView的方法必须在主线程之中，至于为何就不知道了。原本我担心加载网页放在主线程中会导致ANR，其实不用担心这个问题，WebView内部应该做了处理了。

实际代码：https://github.com/bigthing33/StudyDemo.git

代码在WebViewActivity中。

4.4处理

前面说到java调用JavaScript只能传参数，无法得到返回值。如果需要返回值需要反过来JavaScript调用java代码，通过参数传递获得返回值。这在4.4以后有了改进。可以通过下面说的调用JavaScript的方法获得返回值。不过我个人认为还是用传递参数的方法比较好吧。版本兼容嘛。

在WebViewClient的onPageFinished方法中调用JavaScript

        myWebView.setWebViewClient(new WebViewClient() {

            @Override
            public void onPageFinished(WebView view, String url) {
                //当page也加载完后
                super.onPageFinished(view, url);
                testEvaluateJavascript( myWebView);
            }

        });

实现java代码

/**
 * 调用JavaScript方法获得返回值
 * @param myWebView2
 */
    @SuppressLint("NewApi")
    protected void testEvaluateJavascript(WebView myWebView2) {
        myWebView.evaluateJavascript("getReturn(""+"参数1"+"")", new ValueCallback<String>() {
            
            @Override
            public void onReceiveValue(String value) {
                Log.i(TAG, "onReceiveValue value=" + value);
            }
        });
    }

在html中编写JavaScript代码（绿色部分）

<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)
    }
    function getReturn(message) {
        return 1;
    }
</script>
Java-Javascript Interaction In Android
</html>

运行代码，在Android的log中能够看到返回值1.