android开发 jsbridge的使用及webview与android的交互

1. jsbridge框架的基本使用

框架地址 https://github.com/lzyzsd/JsBridge

导入省略。

使用BridgeWebView来代替webview控件。
在js中初始化WebViewJavascriptBridge。

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

1. android调用js

        bwv.callHandler("functionInJs", "data from Java"+ "哈哈", new CallBackFunction() {
            @Override
            public void onCallBack(String data) {
                Log.i("12312", "reponse data from js " + data);
            }
        });

对应js代码，以handlerName匹配对应。这里handlerName为functionInJs。

        connectWebViewJavascriptBridge(function(bridge) {

            bridge.init(function(message, responseCallback) {
                console.log('JS got a message', message);
            });
            //对应的
            bridge.registerHandler("functionInJs", function(data, responseCallback) {

                if (responseCallback) {
                    var responseData = "Javascript Says Right back aka!";
                    responseCallback(responseData);
                }
            });
        })

2. js调用android

//js
        function  onClickForTest(){

           window.WebViewJavascriptBridge.callHandler(
                'submitFromWeb'
                , {'param': '来自html'}
                , function(responseData) {

                }
            );
        }

触发上面js方法，就会触发下面的handler方法执行。调用匹配就是通过handlerName来确认的。这里handlerName是submitFromWeb。

        bridgeWebView.registerHandler("submitFromWeb", new BridgeHandler() {
            @Override
            public void handler(String data, CallBackFunction function) {
				//  handler: {"param":"来自html"}
                Log.d("submitFromWeb", "handler: "+data);
            }
        });

2.原生webview与android交互

1. android调用js

	//js代码
   function   callJS(){

      alert("android调用js");
   }

方式有二：
（1）、webview的loadUrl()
loadUrl()网页后，loadUrl()调用 js

	wv.loadUrl("javascript:callJS()");

如果调用js的alert，开启JavaScript后，要允许js弹窗，调用setWebChromeClient，重写WebChromeClient的onJsAlert()，使用AlertDialog.Builder实现弹窗
.
（2）、webview的evaluateJavascript() android4.4后才可使用

        wv.evaluateJavascript("javascript:callJS()", new ValueCallback<String>() {
            @Override
            public void onReceiveValue(String value) {
                //js返回值
            }
        });

2. js调用android
   有三种方式：
   （1）webview的addJavascriptInterface（此方法在4.2版本之前有漏洞）

创建JsCallAndroid ，定义js需要调用的方法，并添加注解JavascriptInterface

public class JsCallAndroid {
    @JavascriptInterface
    public void test(String data) {

        Log.d("JsCallAndroid", data);
    }
}

js代码

   function   testAndroid(){
      test.test("js调用了Android的方法");
   }

通过点击html的button来触发

<button type="button" id="button1" onclick="testAndroid()" />

使用addJavascriptInterface

 wv.addJavascriptInterface(new JsCallAndroid(),"test");

（2）WebViewClient的shouldOverrideUrlLoading（）
android代码

//这个android 5.0 以上使用
        wv.setWebViewClient(new WebViewClient() {

            @Override
            public boolean shouldOverrideUrlLoading(WebView view, WebResourceRequest request) {

                Log.d("request", request.toString() + "");
                return super.shouldOverrideUrlLoading(view, request);
            }

            @Override
            public boolean shouldOverrideUrlLoading(WebView view, String url) {
                return super.shouldOverrideUrlLoading(view, url);
            }
        });

js代码

<button type="button" id="button1" title="test"  onclick="testAndroid()" />


   function   testAndroid(){

      document.location = "js://sendName?name=111&age=222";
   }

（3）通过WebChromeClient的onJsAlert、onJsConfirm、onJsPrompt

   function   testAndroid(){

      var result=prompt("请输入");
   }

<button type="button" id="button1"  onclick="testAndroid()" >test</button>

对应android代码

        wv.setWebChromeClient(new WebChromeClient(){
            @Override
            public boolean onJsPrompt(WebView view, String url, String message, String defaultValue, JsPromptResult result) {
                return super.onJsPrompt(view, url, message, defaultValue, result);
            }
        });

alert()、confirm()对应onJsAlert、onJsConfirm