WebViewJavascriptBridge机制解析

2015-12-30 本文已影响4829人木夜溯

众所周知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函数：