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