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

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

上周公司业务需要，要做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以上请看下图：

public void callHandler(String handlerName, String data,final CallBackFunction callBack) {
		if(Build.VERSION.SDK_INT() {
					@Override
					public void onReceiveValue(String value) {
						callBack.onCallBack(value);
					}
				});
			}


		}

	}

在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