JsBridge最详细的解析，高版本webview的evaluateJavascript

来源：互联网发布：二手软件app软件哪个好编辑：程序博客网时间：2024/05/19 01:10

第一次发博客，肯定会有很多问题，还有技术交流方面，我不太会使用专业名词，我会用最通俗的方式来阐明我的观点，一般会把我思路画在图上，如果有用词欠妥的地方希望大家见谅。希望大家多多指正，互帮互助，共同进步。谢谢。

上周公司业务需要，要做android和H5的交互，并且在sdk19以上Native调用js使用webviewde.evaluateJavascript（）实现，这可让我头疼，都不知道在jsbridge的什么地方加。以前我也没做过这种，然后加班加点网上各种找，但没有现成的，只能通过自己先弄懂jsbridge的源码才能在其基础上改进。以下就是我的结果。一定要仔细看图，内容都在图里。

本文基于github上android和javascript最流行的交互方式jsbridge，可能很多同学都已经看过了，但是大都数应该马马虎虎，让他说下jsbridge也许会说出个123，但让他说456，就不太清楚了。本文让大家懂得456，并在其基础上添加API19以上Native调用js的方法。当然再深层次的789,大家根据自行需要或兴趣去探索吧。

交互就得互相交流，先说说android调用javascript的方式：

根据这几天的了解，android调用javascirpt的方法采用loadurl（javacriptCmd）,这种方式的弊端就是没又返回值，得通过js改变iframe.src把结果返回，这样执行效率较低。sdk19以上采用evaluateJavascript方法，在回调方法里又返回值，效率优于前一种，毕竟当前android 4.4还是有少量的用户的。为了兼顾所有用户和执行效率问题，采用两种方式混合使用。android 4.4以下，请看下图：

android 4.4以上请看下图：

<span style="font-size:14px;">public void callHandler(String handlerName, String data,final CallBackFunction callBack) {if(Build.VERSION.SDK_INT<Build.VERSION_CODES.KITKAT){//4.4以下Log.i(TAG,"4.4以下版本，dosend被调用");doSend(handlerName, data, callBack);}else{//4.4以上，包括4.4Log.i(TAG,"4.4以上版本，使用evaluateJavascript方法调js");String jscmd = String.format(BridgeUtil.HIGH_VERSION_CALL_JS,handlerName,data);if (Thread.currentThread() == Looper.getMainLooper().getThread()) {this.evaluateJavascript(jscmd, new ValueCallback<String>() {@Overridepublic void onReceiveValue(String value) {callBack.onCallBack(value);}});}}}</span>

在webviewjavascirptbridge.js中添加19以上需要被andorid调用的方法

 function getHandlerAndHandle(handlerName, data) {//                     var responseCallback = function (reponseToNative) {//                         return reponseToNative;//                     }                       var responseDataH;                    console.log("js中getHandlerAndHandle被调用");                     var handler1 = WebViewJavascriptBridge._messageHandler;                     if (handlerName) {                         handler1 = messageHandlers[handlerName];                     }                     //查找指定handler                     try {                         handler1(data, function (reponseToNative) {                         responseDataH = reponseToNative;                                             console.log(reponseToNative);                                              return reponseToNative;                                                             });                         return responseDataH;                     }                     catch (exception) {                         if (typeof console != 'undefined') {                             console.log("WebViewJavascriptBridge: WARNING: javascript handler threw.", data, exception);                         }                     }                 }

javascript主动调用android里的方法：

javascript调用android方式，大概分成2种：1、在android代码里直接给方法加注解，js就可以调用了，android自带的这种方式安全性和兼容性较差，一般不适用这种方式；2、webview可以监听到h5中url的改变，android端通过拦截url（为区分http，这里协议一般采用自定义方式）来获得js传过来的数据。该框架采用改变iframe的src属性，webview重写shuldoverriderul()方法来监听传递过来的数据。见下图，请仔细看图，内容都在图里。

开始使用as时间不长，不知道为什么demo有70多M，压缩后40M。大家先浪费点时间吧，抱歉。有知道为什么的告诉下我，谢谢。

语言组织的不好。原理都在三张图里，最好下载demo，对着图看。应该就比较清楚了，有问题，欢迎留言讨论。

在webviewjavascirptbridge.js中添加19以上需要被andorid调用的方法

最后贴上demo链接：http://download.csdn.net/detail/u013766357/9631178

2 0