WebViewJavascriptBridge 原理分析
2015-04-29 14:00
375 查看
网上好多都是在介绍 WebViewJavascriptBridge如何使用,这篇文章就来说说 WebViewJavascriptBridge 设计原理。
主要从两个过程来讲一下:js调用UIViewController中的代码(Native),Native调用js
首先有两个问题:
a.Native(中的UIWebView)是否可以直接调用js method(方法)? 可以。
b.js 是否可以直接调用Native的mthod?不行。
明确上述两个问题,那么上图就不难明白了,webpage中的js method和webview本地的method之间关系。那WebViewJavascriptBridge出现是否解决这个问题(这个问题就是让js可以直接调用native的method)呢?答案是否定的?没有本质还是用uiwebview的代理方法进行字段拦截(判断url的scheme),实现js间接调用native的method。
我们来看WebViewJavascriptBridge提供的demo:
主要的核心是下面两个,接下来我们就来讨论一下其设计原理。
在概述中说过,js是不能直接调用native的method所以,需要借助- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType,这个方法大家不陌生,每次在重新定向URL的时候,这个方法就会被触发,通常情况,我们会在这里做一些拦截完成js和本地的间接交互什么的。那么WebViewJavascriptBridge也不另外,也是这么做。
我们先来看看在ExampleApp.html文件中点击一个按钮发起请求的代码:
?
估计大家大体都能看懂,唯独有疑问的地方是:
?
这段代码先不说,上面代码就是一个按钮的普通单击事件方法。我们一起想一下,如果这个按钮需要被点击之后调用native中的funtion函数,之后需要把这个(native的)funtion函数处理结果返回给js中的方法继续处理。这个是我们需求,带着这个需求我们看一下这个方法,testObjcCallBack这个我们猜测一下应该native中的方法或者一个能够调用到方法的name/id,后面这个是个json{‘foo’:‘ccccccccccccc’},应该是个参数,那么后面这个方法一看log应该知道,是对native返回的result进行处理的方法。拿具体是不是呢?只要找到callHandler方法就知道了。
在文件WebViewJavascriptBridge.js.txt里面我们找找这个方法:
?
这里又多了一个方法叫_doSend连个参数 第1个是字典key-value定义,第二个是一个方法的指针(看看上面的方法你就知道了),那我们必须在同一个文件里面看看能不能找到这个_doSend方法:
?
找到了。
逐行分析一下,变量callbackId是个字符串,responseCallBacks[] 一看就知道是个字典 ,这个字典把回掉(我们猜测)的方法responseCallback给保存起来,这Key(也就是callbackId)应该是唯一的,通过计数和时间应该知道这个字符串应该是唯一的,message也是一个字典,这是给message添加了一个新的key-value。干嘛呢?我也不知道,我们来看看sendMessageQueue是什么,大家一个push就知道应该是个数组。他吧一个字典放到一个消息队列中(数组队列),让后产生一个src(url
scheme)。
有两个变量我们看看:
?
干嘛用,肯定是给webview 的 delegate判断用的,你感觉呢?(肯定是)
下面是在文件:WebViewJavascriptBridge.m
好了到了这里大家猜猜这个要干嘛?肯定是要发url让web截取对吧?那还用问啊,肯定是啊,已经说过了js能不能调用native的funtion函数?不能。我们来看看这个messagingIframe是:
?
原来就是iframe,这个就不同给大家解释了。好了src一产生就会出现什么,uiwebview代理回掉截获,此时我们把目光回到UIWebview的Native下面:
?
一看就头大,哈哈,是,我也头大。看看上面的注释说 会走这里,我们看看为什么会走那里,最外圈的if([url scheme])判断是
#define kCustomProtocolScheme @"wvjbscheme"
这个定义是什么意思,我们先不做解释,刚才我们说过js不能直接调用native的function,大家只要记住这点,接着往下走就是了。至于为什么走这里,自己看代码(上文有提到),我们看看_flushMessageQueue:
?
这下牛逼了,不忍直视啊!这么多,哈哈,多不可怕,可怕是你坚持不下去了。
我们逐行来看:
NSString *messageQueueString = [_webView stringByEvaluatingJavaScriptFromString:@"WebViewJavascriptBridge._fetchQueue();"];
我们必须回去到js文件中去,这里是webview直接调用js中的方法:
?
谢天谢地这个方法代码不多,这个消息很眼熟,SendMessageQueue,刚才我们说什么来?他是一个字典,那里面有哪些东西,我么来看看
handlerName:handlerName,
data:data,
callbackId:callbackId
这个消息字典此时被取出来准备做什么,这里提示下我们已经走到webview 的delegate里面了,所以拿到这些信息肯定是调用native的method对吧?肯定是的。接着往下走,接着会把json字符串转成数组,然后进行判断,
?
有没有responseid,你说又没,肯定没有啊(你不行看看上面),所以就这这里了
?
这部分是重点,到底他是怎么要调用本地function的,callbackId大家熟悉吧,判断是否为空,不为空给他指定一个block,这个不说了,block指定,此时不调用(手动调用才会执行),这个刚才说了用来处理native的function处理的result用于把处理后的值返回给js的,接着往下去,看到handler这个方法会从message找到handlerName,这里我们看一下多了一个_messageHandlers字典,从这个字典获取一个block(WVJBHandler是一个block),直接执行了。那我们看看_messageHandlers是怎么被添加block的:
?
那又是谁调用了这个方法:
找到了(在文件 ExampleAppViewController.m的viewdidload中),这里有方法testObjecCallback
?
有点乱了。刚才我们的思路都是倒推的,如果我们整过来,首先肯定是viewdidload初始化,初始化之后会把这个block加入到_messageHandlers中,之后因为js调用动态读取这个block调用,在调用之前,我们又把定一个block付给回掉处理的responseCallback的block,这个block在handler中调用而调用,有点绕,自己可以多想想。
我们接着来看看:
?
这个就是你绕的地方,他是后被定义的,所以一开不执行,只有在处理数据后回调才会被调用,这里有个方法_queueMessage:
?
这里面还有个方法:
?
我们在回到WebViewJavascriptBridge.js.txt文件中看到
?
再来看看:
?
大家还记得我们返回的对象是:
?
所以这里messageHandlers刚才也说过了用来存方法的,callbackId被换了个名字叫responseId意思一样,只要值没变就行,所以就会执行:
?
中的方法,好了,完了。
总结一下:js这边 先把方法名字、参数、处理方法保存成一个字典在转成json字符串,在通过UIWebview调用js中某个方法把这个json字符串传到Native中去(不是通过url传的,这样太low了),同时把这个处理的方法以key-value形式放到一个js的字典中。
UIWebView在收到这个json之后,进行数据处理、还有js的回掉的处理方法(就是那个callbackId)处理完成后也会拼成一个key-value字典通过调用js传回去(可以直接调用js)。
js在接到这个json后,根据responseId读取responseCallbacks中处理方法进行处理Native code返回的数据。
过程不是直接调用js,也是通过js调用Native过程一样的处理方式。
大体来看一下,先看一个按钮的单击事件:
?
看看callHandler:
?
看看_sendData:
?
到_queueMessage:之后流程就和上面一样了,这里面native也有个:
?
这个和js中的处理思想是一样的。
总结:native将方法名、参数、回到的id放到一个对象中传给js。
js根据方法名字调用相应方法,之后将返回数据和responseId拼装,最后通过src 重定向到UIWebview 的delegate。
native得到数据后根据responseId调用事先装入_responseCallbacks的block,动态读取调用,从而完成交互。
主要从两个过程来讲一下:js调用UIViewController中的代码(Native),Native调用js
1.概述
首先有两个问题:
a.Native(中的UIWebView)是否可以直接调用js method(方法)? 可以。
b.js 是否可以直接调用Native的mthod?不行。
明确上述两个问题,那么上图就不难明白了,webpage中的js method和webview本地的method之间关系。那WebViewJavascriptBridge出现是否解决这个问题(这个问题就是让js可以直接调用native的method)呢?答案是否定的?没有本质还是用uiwebview的代理方法进行字段拦截(判断url的scheme),实现js间接调用native的method。
我们来看WebViewJavascriptBridge提供的demo:
主要的核心是下面两个,接下来我们就来讨论一下其设计原理。
2.js调用Native method
在概述中说过,js是不能直接调用native的method所以,需要借助- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType,这个方法大家不陌生,每次在重新定向URL的时候,这个方法就会被触发,通常情况,我们会在这里做一些拦截完成js和本地的间接交互什么的。那么WebViewJavascriptBridge也不另外,也是这么做。我们先来看看在ExampleApp.html文件中点击一个按钮发起请求的代码:
?
?
在文件WebViewJavascriptBridge.js.txt里面我们找找这个方法:
?
?
逐行分析一下,变量callbackId是个字符串,responseCallBacks[] 一看就知道是个字典 ,这个字典把回掉(我们猜测)的方法responseCallback给保存起来,这Key(也就是callbackId)应该是唯一的,通过计数和时间应该知道这个字符串应该是唯一的,message也是一个字典,这是给message添加了一个新的key-value。干嘛呢?我也不知道,我们来看看sendMessageQueue是什么,大家一个push就知道应该是个数组。他吧一个字典放到一个消息队列中(数组队列),让后产生一个src(url
scheme)。
有两个变量我们看看:
?
下面是在文件:WebViewJavascriptBridge.m
好了到了这里大家猜猜这个要干嘛?肯定是要发url让web截取对吧?那还用问啊,肯定是啊,已经说过了js能不能调用native的funtion函数?不能。我们来看看这个messagingIframe是:
?
?
#define kCustomProtocolScheme @"wvjbscheme"
这个定义是什么意思,我们先不做解释,刚才我们说过js不能直接调用native的function,大家只要记住这点,接着往下走就是了。至于为什么走这里,自己看代码(上文有提到),我们看看_flushMessageQueue:
?
我们逐行来看:
NSString *messageQueueString = [_webView stringByEvaluatingJavaScriptFromString:@"WebViewJavascriptBridge._fetchQueue();"];
我们必须回去到js文件中去,这里是webview直接调用js中的方法:
?
handlerName:handlerName,
data:data,
callbackId:callbackId
这个消息字典此时被取出来准备做什么,这里提示下我们已经走到webview 的delegate里面了,所以拿到这些信息肯定是调用native的method对吧?肯定是的。接着往下走,接着会把json字符串转成数组,然后进行判断,
?
?
?
找到了(在文件 ExampleAppViewController.m的viewdidload中),这里有方法testObjecCallback
?
我们接着来看看:
?
?
?
?
?
?
?
总结一下:js这边 先把方法名字、参数、处理方法保存成一个字典在转成json字符串,在通过UIWebview调用js中某个方法把这个json字符串传到Native中去(不是通过url传的,这样太low了),同时把这个处理的方法以key-value形式放到一个js的字典中。
UIWebView在收到这个json之后,进行数据处理、还有js的回掉的处理方法(就是那个callbackId)处理完成后也会拼成一个key-value字典通过调用js传回去(可以直接调用js)。
js在接到这个json后,根据responseId读取responseCallbacks中处理方法进行处理Native code返回的数据。
3.Native调用js method
过程不是直接调用js,也是通过js调用Native过程一样的处理方式。大体来看一下,先看一个按钮的单击事件:
?
?
?
?
总结:native将方法名、参数、回到的id放到一个对象中传给js。
js根据方法名字调用相应方法,之后将返回数据和responseId拼装,最后通过src 重定向到UIWebview 的delegate。
native得到数据后根据responseId调用事先装入_responseCallbacks的block,动态读取调用,从而完成交互。
相关文章推荐
- WebViewJavascriptBridge 原理分析
- WebViewJavascriptBridge 原理分析
- WebViewJavascriptBridge 原理分析
- WebViewJavascriptBridge 原理分析
- IOS WebViewJavascriptBridge 使用以及原理分析
- WebViewJavascriptBridge 原理分析
- WebViewJavascriptBridge 原理分析
- WebViewJavascriptBridge源码分析
- WebViewJavascriptBridge使用分析(二)
- WebViewJavascriptBridge的使用和原理
- BridgeWebview原理简略分析
- JS与UIWebview交互原理摘记(WebViewJavascriptBridge)
- WebViewJavaScriptBridge的原理解析
- WebViewJavascriptBridge 分析oc向js发送消息处理流程
- iOS关于UIWebView和Javascript相互调用及WebViewJavascriptBridge分析
- WebViewJavascriptBridge之JS与IOS桥接篇
- Android webView与js 交互以及jsbridge框架源码分析
- WebViewJavascriptBridge源码解读
- iOS下JS与OC互相调用(五)--UIWebView + WebViewJavascriptBridge
- Objective-C 与 Javascript 交互之 WebViewJavascriptBridge