H5页面与原生交互的方法之 二、JsBridge

JsBridge配置方法请看第一篇
H5页面与原生交互的方法之 一、addJavascriptInterface

JsBridge的使用方法

js调用java

1、指定处理者
java创建处理者

        webView.registerHandler("submitFromWeb", new BridgeHandler() {
            @Override
            public void handler(String data, CallBackFunction function) {
                CusToast.showToast("皇上收到请求:" + data);
                function.onCallBack("朕准了");
            }
        });

js指定处理者

        function testClick() {
            var str1 = document.getElementById("text1").value;

            //send message to native
            var data = {str1};
            window.WebViewJavascriptBridge.callHandler('submitFromWeb'
               , {'param': data}
               , function(responseData) {
                    document.getElementById("show").innerHTML = responseData;
               });
        }

html

<input type="text" id="text1" value="请皇上赏赐美女一名" />
<input type="button" id="enter" value="向皇上提出要求" onclick="testClick();"/>

2、不指定处理者
java添加默认处理者

        webView.setDefaultHandler(new BridgeHandler() {
            @Override
            public void handler(String data, CallBackFunction function) {
                CusToast.showToast("收到js发送的信息" + data);
                function.onCallBack("copy that");
            }
        });

js发送信息

        //发送泛消息
        function testClick1() {
            var data = "";
            window.WebViewJavascriptBridge.send(
                    data
                    , function(responseData) {
                        document.getElementById("show").innerHTML = "repsonseData from java, data = " + responseData
                    }
            );
        }

html

<input type="button" id="enter1" value="发送信息" onclick="testClick1();"/>

java调用js

1、指定处理者
js创建处理者

        // 注册回调函数，第一次连接时调用 初始化函数
        connectWebViewJavascriptBridge(function(bridge) {
            // 接收native发来的消息，指定处理者，返回给native结果
            bridge.registerHandler("functionInJs", function(data, responseCallback) {
                document.getElementById("init").innerHTML = ("结果: = " + data);
                if (responseCallback) {
                    var responseData = "被皇上宠幸";
                    responseCallback(responseData);
                }
            });
        })

java指定处理者

        button.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                webView.callHandler("functionInJs", "宣老周进殿", new CallBackFunction() {

                    @Override
                    public void onCallBack(String data) {
                        CusToast.showToast("接收到js返回的数据:" + data);
                    }
                });
            }
        });

2、不指定处理者
js接收native发送的消息

        // 注册回调函数，第一次连接时调用 初始化函数
        connectWebViewJavascriptBridge(function(bridge) {
            //接收native发来的泛消息
            bridge.init(function(message, responseCallback) {
                console.log('JS got a message', message);
                var data = {
                    '皇子': '朱棣',
                    '皇孙': '朱高炽'
                };
                console.log('JS responding with', data);
                responseCallback(data);
            });
        })

java发送消息

        webView.send("朱八八驾崩了", new CallBackFunction() {
            @Override
            public void onCallBack(String data) {
                CusToast.showToast("进京皇子皇孙有：" + data);
            }
        });

js初始化注册事件监听，固定写法

        function connectWebViewJavascriptBridge(callback) {
            if (window.WebViewJavascriptBridge) {
                callback(WebViewJavascriptBridge)
            } else {
                document.addEventListener(
                    'WebViewJavascriptBridgeReady'
                    , function() {
                        callback(WebViewJavascriptBridge)
                    },
                    false
                );
            }
        }