Android中Java代码与JavaScript交互

在Android开发中,经常使用WebView展示需要实时更新的网页内容,这样服务端修改就可以而不需要App发新版本,而H5页面里面会有JavaScript代码处理一些业务逻辑。这里就会涉及到Android里面的Java代码与JavaScript交互。例如,点击H5里面的按钮,需要调用Android里面的一些方法,或者Android里面的一些方法,需要把处理结果传给H5使用。那么两者之间是如何交互的呢?请看下面的示例代码。

MainActivity.java代码:

package com.example.androidjstest;

import android.app.Activity;
import android.os.Bundle;
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 WebView myWebView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        myWebView = (WebView) findViewById(R.id.myWebView);
        WebSettings settings = myWebView.getSettings();
        settings.setJavaScriptEnabled(true);
        myWebView.addJavascriptInterface(new JsObject(), "control");
        myWebView.setWebChromeClient(new WebChromeClient() {
        });
        myWebView.setWebViewClient(new WebViewClient() {
            @Override
            public void onPageFinished(WebView view, String url) {
                super.onPageFinished(view, url);
                callJsMethod();
            }
        });

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

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

        String call = "";

        // call = "javascript:sayHello()";

        // 调用JavaScript里面放入sumToJava()方法
        call = "javascript:sumToJava(1,2)";

        myWebView.loadUrl(call);
    }

    class JsObject {
        @JavascriptInterface
        public void toastMessage(String message) {
            Toast.makeText(getApplicationContext(), message, Toast.LENGTH_LONG)
                    .show();
        }

        // JavaScript调用Android里面的Java代码
        @JavascriptInterface
        public void onSumResult(int result) {
            Toast.makeText(getApplicationContext(), result + "",
                    Toast.LENGTH_LONG).show();
        }
    }
}

H5代码,暂时放在App资源文件夹里面,方便调试:

<html>
<!-- js调用Java:调用格式为 window.jsInterfaceName.methodName(parameterValues) -->

<script type="text/javascript">

    function sayHello() {
        alert("Hello")
    }

    function sumToJava(number1, number2){
       window.control.onSumResult(number1 + number2)    
    }
</script>

    Test Java And Javascript Interaction In Android

</html>

settings.setJavaScriptEnabled(true);
myWebView.addJavascriptInterface(new JsObject(), “control”);
这两行代码,使能JavaScript,然后向WebView注册一个名叫“control”的对象,然后在JS中可以访问到control这个对象,就可以调用这个对象的一些方法,最终可以调用到Java代码中,从而实现了JS与Java代码的交互。

通过示例代码能看到,它们在交互的时候,是按照一定格式的。

webView调用js的基本格式为webView.loadUrl(“javascript:methodName(parameterValues)”);
给loadUrl传入字符串参数,methodName是JavaScript中定义的方法名,parameterValues和JavaScript中所调用方法的参数相一致。

js调用Java代码,调用格式为 window.jsInterfaceName.methodName(parameterValues);
jsInterfaceName,也就是Java代码中myWebView.addJavascriptInterface(new JsObject(), “control”)里面的第二个参数,methodName对应Java代码中的方法名,parameterValues是这个方法相对应的参数。

以上就是两者交互的方法。另外,在嵌入H5页面的时候,还要注意一点,就是用addJavascriptInterface可能导致不安全,因为JS可能包含恶意代码,涉及到JS注入漏洞的问题。

posted on 2017-10-24 18:46  lishbo  阅读(351)  评论(0编辑  收藏  举报