Android WebView和JS交互

web.gif

WebView的常规配置就不多说了,这里只说一下WebView和 JS的交互问题,通过 WebView的addJavascriptInterface()进行对象映射的方式进行交互。

步骤

首先要让WebView能够执行javaScript

webSettings.setJavaScriptEnabled(true);

然后定义一个和js交互的类

public class JS2AndroidUtil {

    private Activity mActivity;

    public JS2AndroidUtil(Activity activity) {
        this.mActivity = activity;
    }

    // 定义JS需要调用的方法
    // 被JS调用的方法必须加入@JavascriptInterface注解
    @JavascriptInterface
    public void clickAction(String msg) {
        if (mActivity instanceof WebViewActivity){
            ((WebViewActivity) mActivity).show(msg);
        }
    }

}

然后映射到JS中

// 通过addJavascriptInterface()将Java对象映射到JS对象
        // 参数1:JS调用android中方法对象
        // 参数2:映射到js中的test对象
        webView.addJavascriptInterface(new JS2AndroidUtil(this) , "test");
        webView.loadUrl("file:////android_asset/index.html");

下面看一下H5中的处理:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Carson</title>
    <script>
         <!--由于对象映射,所以调用test对象等于调用Android映射的对象-->
         function callAndroid(){
            test.clickAction("js调用了android中的clickAction方法");
         }
    </script>
</head>
<body>
    <!--点击按钮则调用callAndroid函数-->
    <button type="button"
            id="button1"
            style="width: 500px; height: 100px; font-size:40px; margin-left:40px; margin-top:60px;"
            onclick="callAndroid()">点击调用Android中方法</button>

</body>
</html>

这里面有两个地方需要对应, 第一个是addJavascriptInterface的时候,定义的test对象,是和JS中对应的,第二个是JS2AndroidUtil 中的clickAction方法也要和JS中对应,这样就能实现Android和JS的交互了。当然,在JS2AndroidUtil 也可以定义一个接口回调到Activity中处理,我这里只是简单处理了一下。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容