webview与JavaScript之间的交互

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

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

java调用JavaScript

  1. 实例化webview,获得WebSettings。通过WebSettings设置可以和JavaScript交互。
            myWebView = (WebView) findViewById(R.id.webview);
            WebSettings webSettings = myWebView.getSettings();
            // 使能使用JavaScript
            webSettings.setJavaScriptEnabled(true);

     

  2. 设置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");

     

  3. 实现第二步里自定义的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>

     

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

JavaScript调用Java

  1. 编写JavaScript代码去调用java中的方法。其实在java调用JavaScript的第三步的html中我们已经调用了。(绿色部分)
  2. 在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文件夹下:

                                webview与JavaScript之间的交互_第1张图片

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

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

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

代码在WebViewActivity中。

 

4.4处理

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

  1. 在WebViewClient的onPageFinished方法中调用JavaScript
            myWebView.setWebViewClient(new WebViewClient() {
    
                @Override
                public void onPageFinished(WebView view, String url) {
                    //当page也加载完后
                    super.onPageFinished(view, url);
                    testEvaluateJavascript( myWebView);
                }
    
            });

     

  2. 实现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);
                }
            });
        }

     

  3. 在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.

 

 

    

你可能感兴趣的:(webview与JavaScript之间的交互)