×

WebViewJavascriptBridge机制解析

96
木夜溯
2015.12.30 14:15* 字数 2151

众所周知WebViewJavaScriptBridge是一个iOS/OSX 在UIWebViews/WebViews中obj-C和javascript发送消息的一个桥接。

WebViewJavaScriptBridge的开源项目在此:这里

下面我们来对WebViewJavaScriptBridge的机制来进行分析:(以UIWebView为例)

一、obj-c调用javascript的机制

UIWebView是iOS最常用的SDK之一,它有一个stringByEvaluatingJavaScriptFromString方法可以将javascript嵌入页面中,通过这个方法我们可以在iOS中与UIWebView中的网页元素交互。

使用stringByEvaluatingJavaScriptFromString方法,需要等UIWebView中的页面加载完成之后去调用。 

使用例子介绍:

[webView stringByEvaluatingJavaScriptFromString:@"document.location.href"]    //获取当前页面的url。

[webview stringByEvaluatingJavaScriptFromString:@"document.title"]    //获取页面title:

[webView stringByEvaluatingJavaScriptFromString:@"document.forms[0].submit();"] //表单提交:

从以上可以看出stringByEvaluatingJavaScriptFromString不仅可以执行js来获取信息,还可以通过调用js对webView执行操作。 所以可以通过此函数来实现obj-c到js的交互。

备注: stringByEvaluatingJavaScriptFromString这个方法有个地方需要注意, 算不上bug, 但确实有问题, 需要注意!

如果stringByEvaluatingJavaScriptFromString执行的是带参数的js函数, 这个参数里面如果带有(\r \n ')等等, js那边收不到这个值, 这些带\的需要转义,

二、 javascript调用obj-c

UIWebView对URL的跳转进行拦截,可以通过自定义协议来捕获请求,在通过obj-c的stringByEvaluatingJavaScriptFromString来获取js对于obj-c函数的调用。

UIWebView对于跳转的拦截方法:

- (BOOL)webView:(UIWebView*)webView shouldStartLoadWithRequest:(NSURLRequest*)request navigationType:(UIWebViewNavigationType)navigationType {

}

实质上oc与js的通信交互就是发送消息,也即函数调用,只要在交互的过程正确的指定好对方需要调用的函数和参数就ok

oc-->js   stringByEvaluatingJavaScriptFromString,其参数是一NSString 字符串内容是js代码(这又可以是一个js函数、一句js代码或他们的组合),当js函数有返回值或一句js代码有值返回可通过stringByEvaluatingJavaScriptFromString的返回值获取

js-->oc 利用webView的重定向原理(即重新在js中指定document.location的值,此为一url),只要在这个url字符串中按自定义的规则指定好所需调用oc中的函数和参数,然后通过OC中的shouldStartLoadWithRequest函数去捕获处理请求,处理完最后,如果js还想获取一些返回参数的话,同样让oc去通过stringByEvaluatingJavaScriptFromString调用刚js传过来的回调js函数就行,顺道把参数也一起传了。

三、WebViewJavaScriptBridge实现机制

webViewJavaScriptBridge 包含三个文件:

WebViewJavascriptBridge.h

WebViewJavascriptBridge.m

WebViewJavascriptBridge.js.txt

很明显:WebViewJavascriptBridge.js.txt主要用于衔接UIWebView中的web page,而WebViewJavascriptBridge.h/m则主要用于与ObjC的native code打交道。他们作为一个整体,其实起到了一个“桥梁”的作用,这三个文件封装了他们具体的交互处理方式,只开放出一些对外的涉及到业务处理的API,因此你在需要UIWebView与Native code交互的时候,引入该库,则无需考虑太多的交互上的问题。整个的Bridge对你来说都是透明的,你感觉编程的时候,就像是web编程的前端和后端一样清晰。他们使用交互如图所示:

WebViewJavaScriptBridge交互图

下面我们对WebViewJavaScriptBridge的实现做出分析。

3.1 WebViewJavaScriptBridge中的初始化

WebViewJavaScriptBridge的初始化过程如下:

1. 初始化需要使用的数据结果

2. 保存registerHandler的函数名与block

3. webView 加载完成载人js代码

具体流程图如下:

bridge初始化流程图

3.1 obj-c与js的交互

obj-c与js交互使用的机制是一样的,所以单项调用的处理是混在一起,所以现在按照流程单独梳理,最后在以源码为例来说明。

3.1.1 obj-c调用js过程:


1、obj-c保存回调的block,使用唯一码objc_cb_* 标识

2、obj-c拼装data(数据),handlerName(调用名),回调标识等信息

3、 对信息进行json拼装,及js一些字符的转码

4、 执行js端的分发消息的函数

5、js执行完成,执行函数块,调用register的responseCallback,发送responseId和responseData

6、 js拼装信息到消息队列中,URL重定向;obj-c端拦截请求,执行js代码拉取数据

7、obj-c端根据responseId来取得保存的block,执行block

大致流程图如下:

obj-c调用js流程图


3.1.2 js调用obj-c的过程:


1、js端保存data与handlerName的映射

2、js端生成唯一码callbackId保存responseCallback映射,并封装callbackId到发送消息中

3、js端封装后的消息放入发送消息队列中, 并执行URL重定向

4、obj-c端拦截请求,判定是自定义协议后,执行js的_fetchQueue()拉取发送的信息

5、obj-c端重新封装responcallback 的block,执行时调用_queueMessage进行消息分发

6、从obj-c端的注册队列中获取handler的block,并执行

7、执行后回调block,封装了responseId和responseData数据,并进行分发

8、数据的特殊字符处理,调用js的函数_handleMessageFromObjC()来传递消息

9、js获取分发的responseId,获取保存在队列中的function

大致的流程图如下:

js调用obj-c流程图

3.2 源码解读

3.2.1 obj-c端源码

因js调用涉及到自定义协议的重定向,因此定义了协议及host

#define kCustomProtocolScheme @"wvjbscheme"

#define kQueueHasMessage@"__WVJB_QUEUE_MESSAGE__"

WebViewJavaScriptBridge的初始化因为涉及到OSX端WebView与iOS端UIWebView,故根据不同的系统来做变量的统一定义,如下:

OS X与iOS变量重定义

定义block,WVJBResponseCallback定义了回调block,js返回数据后回调。WVJBHandler定义了register的block,用作不同情况下的处理。

typedef   void(^WVJBResponseCallback)(id  responseData);

typedef   void(^WVJBHandler)(id   data,WVJBResponseCallback   responseCallback);

obj-c外部接口,用于native调用使用。其中register与callhandler函数封装数据后调用send处理。

obj-c与js交互函数

send函数发送消息到js端的源码:

send封装到调用js代码

参数data为传递给js函数的参数,可为NSString、NSDictionary等,responseCallback则为obj-C的回调,此回调函数执行流程简述为“js注册函数执行完毕后,会返回带有responseId的消息,最后在obj-c会取出(回调存储在responCallbacks字典中),并执行”,handlerName则为js定义的函数名称。

源码中在_queueMessage方法进行逻辑判断:若在H5頁面或者js资源并未加载完毕时,在obj-C的webview中就调用了js函数,则会把相关的操作(存储为Message格式)存储在startupMessageQueue,等待相关资源加载完毕(即在webview的webViewDidFinishLoad生命周期函数中执行存储在startupMessageQueue的命令数组,执行完毕并清除改队列)再調用js的函数;否則若startupMessageQueue队列为空,则直接执行暴露在js端的webViewJavascriptBridge.handleMessageFromObjC函数,获取被调用的函数名和传人参数,以及在objC的sendData:responseCallback:handlerName中设置的回调函数id—callbackId,最终执行js注册函数,并最终想obj-c端发送“doSend({ responseId:callbackResponseId, responseData:responseData })”格式的消息,待objC接收到消息,解析responseId,执行回调函数。


webView载入H5的delegate函数:

finishLoad函数

H5 页面载入完成后,载入js资源,在对开始消息队列中的数据进行处理,并置nil。 在把delegate抛出。

url拦截

有重定向请求时,首先判断scheme及host是自定的,使用_flushMessageQueue函数处理。

obj-c端对js端处理

这段代码通过回传消息的responseId来判断是回调还是call,来进行不同的解封调用。

3.2.2 js端源码

js端定义的WebViewJavascriptBridge对象:

js端WebViewJavascriptBridge类

js端的交互函数,逻辑处理,一个registerHandler和一个callHandler主要封装。_dosend函数进行消息封装放入发送消息队列,在产生一个src(url scheme),供obj-c端shouldStartLoadWithRequest捕捉

消息交互函数

obj-c端通过_fetchQueue()获取发送的消息

js拉取发送的消息

js中处理来自objc的消息,判断同obj-c获取到js端的消息

_dispatchMessageFromObjC
开发技术
Web note ad 1