webview的JS和OC的通信主要通过webview调用stringByEvaluatingJavaScriptFromString方法和OC调用webview的代理方法- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType;实现。
WebViewJavascriptBridge也是通过调用者两个方法实现的JS和OC通信。
WebViewJavascriptBridge结构
WebViewJavascriptBridgeBase_h.png
因为iOS现在有UIWebview和WKWebview(iOS8.0启用)两种webview，所以这个库中有WebViewJavascriptBridge和WKWebViewJavascriptBridge两个对应的bridge。这两个bridge都是通过成为WebViewJavascriptBridgeBase的delegate，实现和WebViewJavascriptBridgeBase通信的。WebViewJavascriptBridge_JS是JS代码，在webview加载完成后通过stringByEvaluatingJavaScriptFromString方法注入这个类里面的JS方法。
代码分析
- 先看几个宏定义
#define kCustomProtocolScheme @"wvjbscheme"
#define kQueueHasMessage @"__WVJB_QUEUE_MESSAGE__"
#define kBridgeLoaded @"__BRIDGE_LOADED__"
OC是通过代理方法实现截获JS请求的。为了实现截获的真的是JS发送通信数据而不截获webview本身自己的网络请求。WebViewJavascriptBridge定义了以上的scheme。当发起网络请求时，通过判断是不是自己定义的scheme来决定需不需要拦截这次请求。
- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType {
if (webView != _webView) { return YES; }
NSURL *url = [request URL];
__strong WVJB_WEBVIEW_DELEGATE_TYPE* strongDelegate = _webViewDelegate;
//先判断是不是kCustomProtocolScheme。如果是才拦截，不是则放过此请求
if ([_base isCorrectProcotocolScheme:url]) {
//判断是否是webview加载完成的url请求。如果是就执行注入JS代码的方法。
if ([_base isBridgeLoadedURL:url]) {
[_base injectJavascriptFile];
//判断是否是需要处理的JS通信请求。
} else if ([_base isQueueMessageURL:url]) {
NSString *messageQueueString = [self _evaluateJavascript:[_base webViewJavascriptFetchQueyCommand]];
[_base flushMessageQueue:messageQueueString];
//未知url，不处理
} else {
[_base logUnkownMessage:url];
}
return NO;
//正常的webview网络请求。
} else if (strongDelegate && [strongDelegate respondsToSelector:@selector(webView:shouldStartLoadWithRequest:navigationType:)]) {
return [strongDelegate webView:webView shouldStartLoadWithRequest:request navigationType:navigationType];
} else {
return YES;
}
}
- 另外需要注意的点是injectJavascriptFile方法
- (void)injectJavascriptFile {
NSString *js = WebViewJavascriptBridge_js();
[self _evaluateJavascript:js];
if (self.startupMessageQueue) {
NSArray* queue = self.startupMessageQueue;
self.startupMessageQueue = nil;
for (id queuedMessage in queue) {
[self _dispatchMessage:queuedMessage];
}
}
}
如果在webview还没有加载完成时，OC就通过bridge对JS发起通信，这个时候通信是无法到达的。bridge的方法是先把这写请求存储在startupMessageQueue数组中，等到webview加载完成后再依次发送这些请求。并且把startupMessageQueue数组置为nil。这样下次再有OC的请求时就直接发送，不再缓存了。这是一个值得学习的设计思路。
- 对于JS，它是给DOM添加了一个iframe标签来实现调用bridge的。具体的方法是
function setupWebViewJavascriptBridge(callback) {
if (window.WebViewJavascriptBridge) { return callback(WebViewJavascriptBridge); }
if (window.WVJBCallbacks) { return window.WVJBCallbacks.push(callback); }
window.WVJBCallbacks = [callback];
var WVJBIframe = document.createElement('iframe');
WVJBIframe.style.display = 'none';
WVJBIframe.src = 'https://__bridge_loaded__';
document.documentElement.appendChild(WVJBIframe);
setTimeout(function() { document.documentElement.removeChild(WVJBIframe) }, 0)
}
这段代码必须要粘贴到自己的JS代码中，否则bride无法正常运行。
- 自己拼写JS代码在注入到webview前，有两点需要注意。一是特殊字符的转义，而是确保代码运行在主线程。这个bridge在_dispatchMessage方法中进行了处理。
- (void)_dispatchMessage:(WVJBMessage*)message {
NSString *messageJSON = [self _serializeMessage:message pretty:NO];
[self _log:@"SEND" json:messageJSON];
messageJSON = [messageJSON stringByReplacingOccurrencesOfString:@"\\" withString:@"\\\\"];
messageJSON = [messageJSON stringByReplacingOccurrencesOfString:@"\"" withString:@"\\\""];
messageJSON = [messageJSON stringByReplacingOccurrencesOfString:@"\'" withString:@"\\\'"];
messageJSON = [messageJSON stringByReplacingOccurrencesOfString:@"\n" withString:@"\\n"];
messageJSON = [messageJSON stringByReplacingOccurrencesOfString:@"\r" withString:@"\\r"];
messageJSON = [messageJSON stringByReplacingOccurrencesOfString:@"\f" withString:@"\\f"];
messageJSON = [messageJSON stringByReplacingOccurrencesOfString:@"\u2028" withString:@"\\u2028"];
messageJSON = [messageJSON stringByReplacingOccurrencesOfString:@"\u2029" withString:@"\\u2029"];
NSString* javascriptCommand = [NSString stringWithFormat:@"WebViewJavascriptBridge._handleMessageFromObjC('%@');", messageJSON];
if ([[NSThread currentThread] isMainThread]) {
[self _evaluateJavascript:javascriptCommand];
} else {
dispatch_sync(dispatch_get_main_queue(), ^{
[self _evaluateJavascript:javascriptCommand];
});
}
}
通信过程
简单通信
没有回调的通信--OC给JS发消息
OC调用- (void)callHandler:(NSString*)handlerName data:(id)data;方法。这个方法会把handlerName和data包装成message。并通过stringByEvaluatingJavaScriptFromString方法发送给webview。webview会调用注入的JS方法_dispatchMessageFromObjC接收这次请求。然后调用回调方法var handler = messageHandlers[message.handlerName];处理这次请求，这个回调就是webview加载时注册的那个回调。
没有回调的通信--JS给OC发消息
JS调用bridge.callHandler()方法来给OC发送消息，callHandler方法是在webview加载完成后注入到webview的。callHandler方法又会调用_doSend方法，_doSend把要发送的数据包装成message进行发送。具体的发送动作是messagingIframe.src = CUSTOM_PROTOCOL_SCHEME + '://' + QUEUE_HAS_MESSAGE;通过给iframe重新设置src属性，就会触发webview重新请求新设置的src。此时webview的代理方法就会接收到这次请求，并按照设定的scheme判断是否截获这次请求。当截获到这次请求后，OC会调用WVJBHandler handler = self.messageHandlers[message[@"handlerName"]];这个回调处理请求，这个请求是OC设置bridge时注册的回调。这样JS就完成了给OC发消息的动作。
可以看到，OC和JS的互调很相似，两者都是先注册一个回调，在对方的请求到达时，调用这个回调。
有回调的通信比较复杂，不过说白了就是“互发消息”。
有回调的通信--OC调用JS
-
OC在发送发送消息时会先把回调加载进responseCallbacks字典缓存。回调是value，key是callbackID（一个自增的long类型值
++_uniqueId）。 -
JS在收到消息（_dispatchMessageFromObjC被执行）时，会判断消息是否包含callbackID，如果有就把callbackID设置为返回消息的responseID字段。并定义回调responseCallback，这个新定义的回调在执行时会调用_doSend方法。
if (message.callbackId) {
var callbackResponseId = message.callbackId;
responseCallback = function(responseData) {
_doSend({ handlerName:message.handlerName, responseId:callbackResponseId, responseData:responseData });
};
}
-
JS中调用注册时的回调，然后调用上面代码中定义的responseCallback，从而就会调用到里面的_doSend方法。这样JS就会把返回消息发送给OC。
-
OC在收到消息后，会进行处理，先判断message是否有responseId，如果有就从responseCallbacks缓存中通过responseId查询到对应的回调，并调用这个回调。然后清除responseCallbacks的这个回调记录。此时JS返回给OC的消息就能被OC获取了。
整个调用过程结束。
其实这个调用过程就是OC先缓存一个回调，把消息发送给JS，JS获取到OC需要回调，调用一次发送消息把数据发送回给OC，OC判断接收的消息是回调、从缓存中取得回调并执行的过程。
JS调用OC的过程和上面的过程相似，只是JS需要先缓存回调，最后获取相应的回调并执行。这里不再具体分析。
网友评论