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

最新推荐文章于 2025-07-15 10:32:47 发布

_长风

最新推荐文章于 2025-07-15 10:32:47 发布

阅读量3.3w

点赞数 5

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/u013766357/article/details/52541971

本文分享了作者解决Android与H5交互问题的过程，重点介绍了如何在不同Android版本上使用WebView进行JavaScript调用，包括使用evaluateJavascript方法提高执行效率。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

上周公司业务需要，要做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.4
			Log.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>() {
					@Override
					public 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()方法来监听传递过来的数据。见下图，请仔细看图，内容都在图里。